Hang's 码场

jquery异步操作文件

2018/04/28

文件异步上传

单文件

<input type="file" onchange="UploadFile(this)" />

多文件

<input type="file" onchange="UploadFile(this)" multiple="multiple" />

jquery

<script type="text/javascript">
  function UploadFile(field) {
    var file_data = $(field).prop("files"); // 获取文件
    if(file_data.length>0){
      var form_data = new FormData();
      $.each(file_data,function (i,e) {
        form_data.append("file"+i, e);
      })
      $.ajax({
        type: "POST",
        url: "UploadServlet",
        dataType : "json",
        processData: false,  // 注意：让jQuery不要处理数据
        contentType: false,  // 注意：让jQuery不要设置contentType
        data: form_data
      }).success(function(data) {
        console.log(data);
      }).fail(function(data) {
        console.log(data);
      });
    }
  }
</script>

文件异步下载

单文件

<input type="file" onchange="UploadFile(this)" />

多文件

<input type="file" onchange="UploadFile(this)" multiple="multiple" />

jquery

<script type="text/javascript">
  function UploadFile(field) {
    var file_data = $(field).prop("files"); // 获取文件
    if(file_data.length>0){
      var form_data = new FormData();
      $.each(file_data,function (i,e) {
        form_data.append("file"+i, e);
      })
      $.ajax({
        type: "POST",
        url: "UploadServlet",
        dataType : "json",
        processData: false,  // 注意：让jQuery不要处理数据
        contentType: false,  // 注意：让jQuery不要设置contentType
        data: form_data
      }).success(function(data) {
        console.log(data);
      }).fail(function(data) {
        console.log(data);
      });
    }
  }
</script>

目录