AjaxFileUpload: simple to use, ajaxfileupload

AjaxFileUpload: simple to use, ajaxfileupload

<% @ Page language = "java" contentType = "text/html; charset = UTF-8" pageEncoding = "UTF-8" %> <! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> 




Package com. yangshidesign. weixinface. servlet; import java. io. file; import java. io. IOException; import java. util. list; import javax. servlet. servletContext; import javax. servlet. servletException; import javax. servlet. annotation. webServlet; 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; import com. alibaba. fastjson. JSONObject;/*** Servlet implementation class FileUploadServlet */@ WebServlet ("/FileUploadServlet") public class FileUploadServlet extends HttpServlet {private static final long serialVersionUID = 1L; protected void doGet (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response. getWriter (). println ("ppppppppppppppppp");} protected void doPost (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// fileNameString fileName = null to be returned; // reference http://commons.apache.org/proper/commons-fileupload/using.html// Check that we have a file upload requestboolean isMultipart = ServletFileUpload. isMultipartContent (request); // Create a factory for disk-based file itemsDiskFileItemFactory factory = new DiskFileItemFactory (); // Configure a repository (to ensure a secure temp location is used) servletContext servletContext = this. getServletConfig (). getServletContext (); File repository = (File) servletContext. getAttribute ("javax. servlet. context. tempdir "); factory. setRepository (repository); // Create a new file upload handlerServletFileUpload upload = new ServletFileUpload (factory); // Parse the requesttry {List <FileItem> items = upload. parseRequest (request); for (FileItem item: items) {// other parameters String type = item. getContentType (); if (type = null) {// System. out. println (item. getString (item. getFieldName (); continue;} // file parameter fileName = item. getName (); // set the path to save the file String realPath = request. getServletContext (). getRealPath ("/image"); File dir = new File (realPath); File f = new File (dir, fileName); if (f. exists () {f. delete ();} f. createNewFile (); // save item. write (f) ;}} catch (FileUploadException e) {e. printStackTrace ();} catch (Exception e) {e. printStackTrace ();} // return result JSONObject obj = new JSONObject (); obj. put ("fileName", fileName); response. getWriter (). print (obj. toJSONString ());}}


A js file to be used: (click to download)
Ajaxfileupload. js

Two jar packages:
Commons-io-2.4.jar

Commons-fileupload-1.3.1.jar



Note: The callback function is not executed after the upload is successful.
Solution: (reference link: http://www.myexception.cn/ajax/727453.html)
Open ajaxfileupload. js and find it at the bottom.

if ( type == "json" ) {            eval( "data = " + data );        }

Changed:


if ( type == "json" ) {        data = data.replace("<pre>","").replace("</pre>","");        //data = eval("("+data.replace("<pre>","").replace("</pre>","")+")");    }






How to Implement Asynchronous upload using the jquery ajaxfileupload plug-in jsp
Page code: 
How to Implement Asynchronous upload using the jquery ajaxfileupload plug-in jsp
<Script type = text/javascript src = js/jquery. js </script <script type = text/javascript src = js/ajaxfileupload. js </script <! -- Function for executing the file upload operation -- <script type = text/javascriptfunction ajaxFileUpload () {$. ajaxFileUpload ({url: 'Update. do? Method = uploader ', // link to the server address secureuri: false, fileElementId: 'housemaps', // The id attribute dataType of the file selection box: 'xml', // format returned by the server, can be jsonsuccess: function (data, status) // equivalent to the usage of trysyntax in Java. ('{result'}.html ('added successfully');}, error: function (data, status, e) // similar to the usage of catchsyntax in Java, ('{result'}.html ('add failed') ;}}</script