Javascript uses uploadify for Multifile upload and ajax for File Upload

Javascript uses uploadify for Multifile upload and ajax for File Upload

Using uploadify to upload files allows the client to determine the file size, control the File Upload type, implement multi-File Upload, display progress bar, and other functions, which is easy to use and has good compatibility.

In this example, the uploadify function in dwz is extracted and can be used independently. It does not have to be used in dwz. In this example, the static page is used for testing:

The Code is as follows:

2. html page code

<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"> 
3. Uploaded servlet code

Package uploadFile; import java. io. file; import java. io. IOException; import java. util. iterator; import java. util. list; import javax. servlet. servletException; import javax. servlet. http. httpServlet; import javax. servlet. http. httpServletRequest; import javax. servlet. http. httpServletResponse; import org. apache. commons. fileupload. fileItem; import org. apache. commons. fileupload. fileUploadException; import Org. apache. commons. fileupload. disk. diskFileItemFactory; import org. apache. commons. fileupload. servlet. servletFileUpload; public class UploadFile extends HttpServlet {@ Override protected void service (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {super. service (request, response) ;}@ Override protected void doPost (HttpServletRequest req, HttpServlet Response resp) throws ServletException, IOException {// temporary directory String basePath = req. getServletContext (). getRealPath ("upload"); String tempDir = "temp"; File tempFile = new File (basePath + File. separator + tempDir); if (! TempFile. exists () {tempFile. mkdir ();} DiskFileItemFactory dfc = new DiskFileItemFactory (); dfc. setSizeThreshold (1*1024*1024); // set the critical value dfc. setRepository (tempFile); // set the temporary upload directory ServletFileUpload upload = new ServletFileUpload (dfc); upload. setHeaderEncoding ("UTF-8"); // set the encoding // set the maximum value of the file, set 5 Mb, 5*1024*1024; upload. setSizeMax (5*1024*1024); try {List fileList = upload. parseRequest (req); Iterator <FileI Tem> iterator = fileList. iterator (); while (iterator. hasNext () {FileItem item = iterator. next (); String fileName = item. getName (); // get the object name if (fileName! = Null) {// System. out. println (fileName); // System. out. println (item. getSize (); File sourceFile = new File (basePath + File. separator + fileName); item. write (sourceFile) ;}} catch (FileUploadException e) {e. printStackTrace ();} catch (Exception e) {e. printStackTrace ();} // resp. getWriter (). print ("Upload successful! ") ;}@ Override protected void doGet (HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {super. doPost (req, resp );}}
4. web. xml configuration

<servlet>  <servlet-name>upLoadify</servlet-name>  <servlet-class>uploadFile.UploadFile</servlet-class> </servlet> <servlet-mapping>  <servlet-name>upLoadify</servlet-name>  <url-pattern>/servlet/uploadify.do</url-pattern> </servlet-mapping> 
5. The prompt information of uploadify is in English. In order to display the Chinese prompt information, re-run the error prompt method and create an errorCode. put js under the resource/dwz/uploadify/scripts folder and import this js on the page. The js Code is as follows:

Var uploadify_onSelectError = function (file, errorCode, errorMsg) {var msgText = "Upload Failed \ n"; switch (errorCode) {case SWFUpload. QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED: // this. queueData. errorMsg = "upload at most each time" + this. settings. queueSizeLimit + "Files"; msgText + = "upload at most each time" + this. settings. queueSizeLimit + "Files"; break; case SWFUpload. QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT: msgText + = "the file size exceeds the limit (" + this. settings. fileSizeLimit + ")"; break; case SWFUpload. QUEUE_ERROR.ZERO_BYTE_FILE: msgText + = "the file size is 0"; break; case SWFUpload. QUEUE_ERROR.INVALID_FILETYPE: msgText + = "the file format is incorrect. Only" + this. settings. fileTypeExts; break; default: msgText + = "error code:" + errorCode + "\ n" + errorMsg;} alert (msgText);}; var uploadify_onUploadError = function (file, errorCode, errorMsg, errorString) {// if (errorCode = SWFUpload. UPLOAD_ERROR.FILE_CANCELLED | errorCode = SWFUpload. UPLOAD_ERROR.UPLOAD_STOPPED) {return;} var msgText = "Upload Failed \ n"; switch (errorCode) {case SWFUpload. UPLOAD_ERROR.HTTP_ERROR: msgText + = "HTTP Error \ n" + errorMsg; break; case SWFUpload. UPLOAD_ERROR.MISSING_UPLOAD_URL: msgText + = "the upload file is lost. please upload it again"; break; case SWFUpload. UPLOAD_ERROR.IO_ERROR: msgText + = "IO error"; break; case SWFUpload. UPLOAD_ERROR.SECURITY_ERROR: msgText + = "security error \ n" + errorMsg; break; case SWFUpload. UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED: msgText + = "maximum upload each time" + this. settings. uploadLimit + "; break; case SWFUpload. UPLOAD_ERROR.UPLOAD_FAILED: msgText + = errorMsg; break; case SWFUpload. UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND: msgText + = "the specified file cannot be found. Please operate again"; break; case SWFUpload. UPLOAD_ERROR.FILE_VALIDATION_FAILED: msgText + = "parameter error"; break; default: msgText + = "file:" + file. name + "\ n Error Code:" + errorCode + "\ n" + errorMsg + "\ n" + errorString;} alert (msgText);} // return parameters; //} var uploadify_onUploadSuccess = function (file, data, response) {alert (file. name + "\ n uploaded ");};
Close!

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.