浅鱼

JS中使用FormData上传文件
直接上代码,详情看代码中的注释HTML部分的代码:<!-- 学生信息导入 --> <div cl...
扫描右侧二维码阅读全文
31
2018/12

JS中使用FormData上传文件

直接上代码,详情看代码中的注释

HTML部分的代码:

<!-- 学生信息导入 -->
<div class="card">
  <h5 class="card-header">学生信息导入</h5>
  <div class="card-body">
    <h5 class="card-title">从Excel文件导入:<small class="download-excel"><a href="http://134.175.152.210:8084/admin/download" class="btn btn-outline-danger">标准模版下载</a></small></h5>
    <div class="row choose-line">
        <p>学生信息批量导入:</p>
        <form class="form row" enctype="multipart/form-data" role="form" id="tf">
            <input type="file" name="file" class="form-control-file" id="uploadfiles">
            <select class="form-control custom-select col-xs-3 col-sm-3" name="batchName" id='importStudents_select'>
                <!-- <option>选择导入至批次</option>
                <option>2019A01</option>
                <option>2019A02</option>
                <option>2019B01</option>
                <option>2019B02</option> -->
            </select>
        <span class="col-xs-3 col-sm-3">

        </form>
    <input type="button" class="btn btn-primary row" onclick="importStudents()" value="开始导入">
    </div>
  </div>
</div>
<!-- 学生信息导入结束 -->

JS部分的代码:

// 上传文件导入学生信息
function importStudents(){
  // console.log($("#uploadfiles").val());
  var formdata = new FormData();  //创建一个FormData空对象
  formdata.append("file",  $("#uploadfiles")[0].files[0]);   //使用append方法添加key/value
  let batchName = $('#importStudents_select').val();
  formdata.append("batchName", batchName);    //使用append方法添加key/value
  console.log(formdata.getAll("file"));
  console.log(formdata.getAll("batchName"));
  $.ajax({
      url: base_url + "/admin/importStudents",
      type: "post",
      data: formdata,
      cache : false,
      processData: false, // 不处理发送的数据,因为data值是Formdata对象,不需
      contentType: false, // 不设置Content-type请求头
      success:function(data){
          // window.clearInterval(timer);
          console.log("over..");
          swal(
            '导入成功!',
            '导入学生信息成功!',
            'success'
          );
      },
      error:function(e){
        swal(
          '导入失败!',
          '导入学生信息失败!',
          'success'
        );
          // window.clearInterval(timer);
      }
  });
}

导入前:

屏幕快照 2018-12-31 01.41.46.png

导入时:

屏幕快照 2018-12-31 01.42.33.png

导入后:

屏幕快照 2018-12-31 01.43.04.png

问题:

1、为什么console.log(formdata)显示为空?

直接打印是看不到的,要用FormData的get()和getAll()方法

formData.append("a1", "aa");
formData.append("a1", "bb");
formData.append("a1", "cc");
formData.get("a1"); // "aa"  console.log这个
formData.getAll("a1"); // ["aa","bb","cc"]

参考:
1、JS中使用FormData上传文件、图片的方法
2、创建的formData打印为空?

Last modification:December 31st, 2018 at 01:47 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment