快捷導(dǎo)航

springMVC+ajax實現(xiàn)文件上傳且?guī)нM(jìn)度條實例

更新時間：2017年01月18日 09:40:18 作者：肖哥哥

本篇文章主要介紹了springMVC+ajax實現(xiàn)文件上傳且?guī)нM(jìn)度條實例，具有一定的參考價值，有興趣的可以了解一下。

前端代碼：

<form id= "uploadForm"> 
   <p >指定文件名： <input type="text" name="filename" value= ""/></p > 
   <p >上傳文件： <input type="file" name="file"/></ p> 
   <input type="button" value="上傳" onclick="doUpload()" /> 
</form> 

function doUpload() { 
   var formData = new FormData($( "#uploadForm" )[0]); 
   $.ajax({ 
     url: 'http://localhost:8080/xiaochangwei/file/upload' , 
     type: 'POST', 
     data: formData, 
     async: false, 
     cache: false, 
     contentType: false, 
     processData: false, 
     success: function (returndata) { 
       alert(returndata); 
     }, 
     error: function (returndata) { 
       alert(returndata); 
     } 
   }); 
}

后端：

@RequestMapping(value = "/upload", method = RequestMethod.POST)
  public String upload(HttpServletRequest request, @RequestParam("file") MultipartFile file, ModelMap model) {
    System.out.println("開始");
    String path = request.getSession().getServletContext().getRealPath("upload");
    String fileName = file.getOriginalFilename();
    // String fileName = new Date().getTime()+".jpg";
    System.out.println(path);
    File targetFile = new File(path, fileName);
    if (!targetFile.exists()) {
      targetFile.mkdirs();
    }

    // 保存
    try {
      file.transferTo(targetFile);
    } catch (Exception e) {
      e.printStackTrace();
    }
    model.addAttribute("fileUrl", request.getContextPath() + "/upload/" + fileName);
    return "result";
  }

如果前端有很多實體類數(shù)據(jù)同文件一同提交

可以修改后端方法為：

復(fù)制代碼代碼如下:

upload(HttpServletRequest request, @RequestParam("file") MultipartFile file, ModelMap model,User user)

利用下面的代碼更可實現(xiàn)帶有進(jìn)度條的文件上傳

<script type="text/javascript">

    function UpladFile() {
      var fileObj = document.getElementById("file").files[0]; // js 獲取文件對象
      var FileController = "http://localhost:8080/xiaochangwei/file/upload";          // 接收上傳文件的后臺地址 

      // FormData 對象
      var form = new FormData($( "#uploadForm" )[0]);

      // XMLHttpRequest 對象
      var xhr = new XMLHttpRequest();
      xhr.open("post", FileController, true);
      xhr.onload = function () {
        // alert("上傳完成!");
      };

      xhr.upload.addEventListener("progress", progressFunction, false);
      xhr.send(form);
    }

    function progressFunction(evt) {
      var progressBar = document.getElementById("progressBar");
      var percentageDiv = document.getElementById("percentage");
      if (evt.lengthComputable) {
        progressBar.max = evt.total;
        progressBar.value = evt.loaded;
        percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
        if(evt.loaded==evt.total){
          alert("上傳完成100%");
        }
      }
    } 

  </script>
  

  <progress id="progressBar" value="0" max="100"></progress>


<form id= "uploadForm">

  <input type="file" id="file" name="myfile" />
  <input type="button" onclick="UpladFile()" value="上傳" />

</form>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: