通过Ajax方式上传文件(input file)，使用FormData进行Ajax请求

Ajax的方式进行异步请求上传文件

• 前台代码

    <div class="layui-card">
                  <div class="layui-card-header">文件上传</div>
                  <div class="layui-card-body">
  
  
                      <div class="layui-row">
  
                          <div class="layui-form-item">
  
                              <label class="layui-form-label">文件：</label>
                              <div class="layui-input-block">
                                  <input type="file" name="file" id="testFile" /> 
                              </div>
                              <div class="layui-form-mid layui-bg-green" style="padding:10px 0px;">
                                  上传进度:<span id="uploadProgress">0</span>%
                              </div>
                          </div>
                          <div class="layui-form-item">
                              <label class="layui-form-label">ID：</label>
                              <div class="layui-inline">
                                  <input id="txtId" class="layui-input" />
                              </div>
                          </div>
                          <div class="layui-form-item">
                              <label class="layui-form-label">名称：</label>
                              <div class="layui-inline">
                                  <input id="txtName" class="layui-input" />
                              </div>
                          </div>
                          <div class="layui-form-item">
                              <div class="layui-input-block">
                                  <a id="btn_save_single" class="layui-btn">上传单个文件</a>
                              </div>
                          </div>
                      </div>
  
  
                  </div>
              </div>

   <script type="text/javascript">
          $("#btn_save_single").click(function () {
              var url = "/api/demo/UploadSingle";
              var formData = new FormData();//表单参数
  
              //表单其他数据
              formData.append("id", $("#txtId").val());
              formData.append("name", $("#txtName").val());
   
              //获取 上传文件 file对象--添加  到表单域 补充 IE8 不支持.files 写法
              //var fileObj = document.getElementById("testFile").files[0]; // js 获取文件对象
              var fileObj = $("#testFile")[0].files[0]; // jquery 获取文件对象
              formData.append("file", fileObj);
  
  
  
              upload(url, formData);
          });
  
          //上传文件
          function upload(apiUrl, formData) {
  
  
              $.ajax({
                  type: "post"//统一采用 post 上传,默认get
                  , url: apiUrl
                  //,async:true//默认设置为true:异步
                  , data: formData
                  , cache: false//上传文件无需缓存
                  , processData: false//用于对data参数进行序列化处理 这里必须false
                  , contentType: false //必须
                  , xhr: function xhr() {
                       
                      //获取原生的xhr对象
                      var xhr = $.ajaxSettings.xhr();
                      if (xhr.upload) {
  
                          //添加 progress 事件监听
                          xhr.upload.addEventListener('progress', function (e) {
                              //debugger;
                              //e.loaded 已上传文件字节数
                              //e.total 文件总字节数 
                              var percent = Math.floor((e.loaded / e.total) * 100); //百分比
                              $("#uploadProgress").html(percent)
  
                          }, false);
                      }
                      return xhr;
                  }
                  , success: function (res) {
                      //成功回调
                      alert(JSON.stringify(res))
                  }
                  , error: function (e) {
                      //异常回调
                      alert(JSON.stringify(e))
                  }
              });
          }
  
  
  
      </script>

• 服务端：WebApi

          [HttpPost]
          public JsonResult<dynamic> UploadSingle()
          {
              var Request = HttpContext.Current.Request;
  
              var files = Request.Files;
  
              var fileCount = files.Count;
  
              var id = Request["id"];
              var name = Request["name"];
               
              var _data = new { id = id, name = name, fileCount = fileCount };
  
              return Json<dynamic>(new { msg = "上传文件个数 ：" + fileCount, code = 200, data = _data });
               
          }

• 效果