Ajax upload files: ajaxsubmit use

Most of the time when uploading files, they are submitted using a form. There are several ways to upload a file using the form form:

1, the interface directly using the Submit button submitted. This way you can achieve the effect but there is no success event. That is, you can upload files, but there is no feedback information.
2, using the form method of jquery to submit the form, this way, you can specify the form OnSubmit, success, error events. This will be a little more friendly. problem Reason: File uploads are usually implemented using jquery.

Because of some of the recent reasons in our system, jquery's $ is in conflict with $ on the foreground schema bootstrap, so if you use the foreground frame, there is no form method in JQuery's $. This is a bit of a problem.
If you are submitting the document in the first way, then yes, it is not very friendly.

Therefore, in order to solve the problems encountered above, there are two possible solutions:
1, conflict resolution, after all, jquery and the front-desk framework are indispensable.
2. Re-search for the method of uploading the form.

After the search has decided to use Ajax to upload files. Online a search, found a plugin, using the Ajaxfileupload method submission.

Next look at an example, simple implementation of file upload. Example Front Desk:

<script type= "Text/javascript" >/** * Upload file (method required in step.js) * @param formtag */function UploadFile () {$.ajaxfileupload ({method: "POST", url:ctx+ "/leadtoquestion                        Types/importmongomedia ",//needs to be linked to server address Secureuri:true, Fileelementid: ' FileName ', The id attribute of the File selection box data:$ (' #picForm '). Serialize (), Success:function (data,s, status  
        {//The operation after successful upload (data, status, E) {//},error:function after upload failed}
    }); } </script> <form method= "POST" enctype= "Multipart/form-data" > <input type= "file" id= "fi Lename "Name=" FileName "style=" display:-webkit-inline-box;width:180px; " /> <input type= "button" style= "width:70px;" src= "Image/backgroup.png" onclick= "UploadFile ()" value= "Upload file"         
; </form> 

Controller (Spring MVC)

@RequestMapping ("Importmongomedia") public String Importmongomedia (@RequestParam (value = "FileName") multipartfile

    File, HttpServletRequest request, httpservletresponse response) throws Unsupportedencodingexception {
    Multiparthttpservletrequest multipartrequest = (multiparthttpservletrequest) request;

    Gets the uploaded file Multipartfile file1 = Multipartrequest.getfile ("FileName");
    Gets the file name String filename = File.getoriginalfilename ();

    Gets the file path String Logorealpathdir = Request.getsession (). Getservletcontext (). Getrealpath (FileName);

    File LocalFile = new file (Logorealpathdir);
    try {File1.transferto (localfile); } catch (IllegalStateException |
    IOException e) {e.printstacktrace ();

    } String MediaID = Uuid.randomuuid (). toString ();

    Linkedhashmap map = new Linkedhashmap ();
    Mongoutil mongoutil = new Mongoutil ();

    Mongoutil.uploadfile (LocalFile, MediaID, DbName, CollectionName, map); Return MEdiaid;
 }

After the controller obtains the file, it can invoke the method of the background upload.

Although it can be implemented, the conflict issue still needs to be addressed. For the realization of a kind of function, only mastering a variety of implementation ways, can realize no difficulty coding, can select high-performance scheme.