ajax实现文件上传并且监听上传进度

最新推荐文章于 2024-09-03 17:07:04 发布

原创

最新推荐文章于 2024-09-03 17:07:04 发布 · 6.1k 阅读

6 ·

CC 4.0 BY-SA版权

这篇博客介绍了如何利用Ajax技术实现文件上传，并详细说明了在上传过程中如何监听文件的上传进度。关键在于设置form的enctype属性为'multipart/form-data'，以及使用FormData对象以二进制流方式上传文件。

在实现上传本地文件中，可以用

<form role="form" name="file" id="myForm" enctype="multipart/form-data" style="display: none"><!--上传文件需使用enctype="multipart/form-data"-->
      <input type="file" id="upload_file" name="uploadFile">
    </form>

需要注意的是，需要多添加enctype="multipart/form-data" 表单中enctype="multipart/form-data"的意思，是设置表单的MIME编码。默认情况，这个编码格式是application/x-www-encoded，不能用于文件上传；只有使用了multipart/form-data

利用formdata
formdata文件上传是以二进制流形式上传，且无需写额外代码。

var upload_file = document.getElementById('upload_file');
  upload_file.addEventListener('change', upload, false);

  function upload(){
    if(window.FormData){
      var formDate = new FormData($('#myForm')[0]);
      console.log("准备上传文件");
      $.ajax({
        url: '/uploadAPK',
        type:'POST',
        //数据
        data:formDate,
        //使jq不处理数据类型和不设置Content-Type请求头