W3Schools Learner's Blog

W3Schools Programming knowledge summary website



JQuery ajaxFileUpload plugin Asynchronous upload file

JQuery ajaxFileUpload plugin Asynchronous upload file is very simple.
Step 1: you need to download the jQuery ajaxFileUpload file in GitHub.

The github download address: https://github.com/carlcarl/AjaxFileUpload

The ajaxFileUpload.js file is introduced in the header file, and the code is as follows:
  1. <script type="text/javascript" src="${ctx}/asset/lib/ajaxfileupload.js"></script>
Step 2: Using jQuery ajaxFileUpload in the web page,we need to use onchange event, and define a ID, HTML code is as follows: 
  1. <input type='file' name='files' id="fileUpload" onchange="uploadExcelFile();"/>
Then we implement Ajax file upload in the <script></script> tag, and the "fileElementId" attribute points to the ID defined in the input tag.
  1. function uploadExcelFile() {
  2.    $.ajaxFileUpload({
  3.    url:"./questionType/importExcel",
  4.    type:"POST",
  5.    fileElementId :"fileUpload",
  6.    success:function (data) {
  7. //do something
  8.    },
  9.    error:function(erro){
  10. //do something
  11.    }
  12.    });
  13. }
Step 3: Uploading files with springmvc's MultipartFile class in the Java background.
  1. @PostMapping("/questionType/importExcel")
  2. @ResponseBody
  3. public String uploadExportWord(MultipartFile files) {
  4.    System.out.println("============"+file.getOriginalFilename());
  5.    //do something
  6.    return null;
  7. }

No comments:

Post a Comment

Note: only a member of this blog may post a comment.