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

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

Casanover

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

阅读量6k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/wzj2584454/article/details/78056013

版权

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

摘要由CSDN通过智能技术生成

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

<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 form