Ajax Uploading Files

Source: Internet
Author: User

First on

Based on Eazyui development

The current single file upload, or pseudo-progress bar,
As for the real dynamic progress bar needs Ajax to get the file size and total size,
Considering the current project file is under 10MB, so I used a pseudo-progress bar.

On the Code

Html

<form id= "Fileload" action= "/processdeployment/upload" target= "FileUpload" enctype= "Multipart/form-data" method= "POST" ><table style= "line-height:30px; width:420px; margin:0px auto; " &GT;&LT;TR&GT;&LT;TD style= "text-align:right;" > Process Name: </td><td><input id= "Txtprocessname" name= "Txtprocessname" class= "Easyui-textbox" style= " width:300px; "/></td></tr><tr><td style=" text-align:right; > Process files: </td><td><input id= "txtfile" name= "txtfile" data-options= "buttontext: ' Select Zip file '" class= " Easyui-filebox "style=" width:300px; "/></td></tr></table></form><iframe style=" Display:none "Name=" FileUpload "></iframe><divstyle=" text-align:center; line-height:50px; width:420px; margin:0px auto; " ><button id= "Btnsave" class= "Easyui-linkbutton" data-options= "iconcls: ' Icon-save '" style= "width:70px;" > Save </button><button id= "Btncancel" class= "Easyui-linkbutton" data-options= "iconcls: ' Icon-cancel '" Style= "width:70px;" > Cancel </button></div>


Js

$ ("#btnSave"). Bind ("click", Function () {var processName = $ ("#txtProcessName"). TextBox ("GetValue"); if (ProcessName = = "") {$.messager.alert (' System message ', ' please fill in the process name. ' Info '); return;} var Filebox = $ ("#txtFile"). Filebox ("GetValue"), if (Filebox = = "") {$.messager.alert (' System message ', ' Please select Process file. ' Info '); return;} else {if (Filebox.tolowercase (). LastIndexOf (". zip") < 0) {$.messager.alert (' System messages ', ' Please select a zip file. ' Info '); return;}} $.messager.confirm (' System message ', ' Are you sure to save it? ', function (r) {if (R) {$.messager.progress ({title: ' System Message ', msg: ' File crosses ... '}); SetTimeout (function () {$ ("#fileload"). Submit (); $.messager.progress (' close '); $.messager.alert (' System message ', ' file upload succeeded. ' Info '); $ (' #win '). Window (' Close ');}, 1000);});});


Jfinal is used in the background

Controller

public void Upload () {//processengine processengines = Processengines.getdefaultprocessengine ();//Save files UploadFile file = GetFile ("txtfile"); String processName = Getpara ("Txtprocessname"); System.out.println ("xxxx:" +processname); System.out.println ("22222:" +file.getfile (). GetName ());}


Configuration of File Save address

Jfinalcfg.java class Inside

public void Configconstant (Constants me) {//TODO auto-generated method stub//loads a small amount of the necessary configuration, which can then be GetProperty (...) Get the value loadpropertyfile ("config.properties");//Set Configuration file Development mode Me.setdevmode (Getpropertytoboolean ("DevMode", false));// Set page development type Me.setviewtype (viewtype.jsp),//default View location Me.setbaseviewpath ("/view");//Address bar parameter mode Me.seturlparaseparator ("- ")///File Upload storage address, under Webroot Web-inf/classes/diagrams folder Me.setuploadedfilesavedirectory (Pathkit.getwebrootpath () +" /web-inf/classes/diagrams ");}


File after the last successful upload

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Ajax Uploading Files

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.