1. 犀牛前端部落首页
  2. Html5百科

javascript如何异步上传文件

使用HTML5,您可以使用Ajax和jQuery进行文件上传。 不仅如此,您还可以使用HTML5进度标记(或div)执行文件验证(名称,大小和MIME类型)或处理progress事件。

下面,俺给出了一个实现的方法:

HTML

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

Javascript

我们可以通过文件的change事件来做一些验证

$(':file').on('change', function () {
  var file = this.files[0];

  if (file.size > 1024) {
    alert('上传文件最大为1k');//限制文件上传大小
  }

  
});

点击上传按钮触发事件

$(':button').on('click', function () {
  $.ajax({
    // 服务器处理脚本
    url: 'upload.php',
    type: 'POST',

    // 表单数据
    data: new FormData($('form')[0]),

    // 告诉jquery不需要处理data或担心content-type
    // 必须包含以下属性
    cache: false,
    contentType: false,
    processData: false,

    xhr: function () {
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        //用于处理上传的进度
        myXhr.upload.addEventListener('progress', function (e) {
          if (e.lengthComputable) {
            $('progress').attr({
              value: e.loaded,
              max: e.total,
            });
          }
        }, false);
      }
      return myXhr;
    }
  });
});

正如您所看到的,使用HTML5(以及一些研究)文件上传不仅可以实现,而且非常简单。 尝试使用谷歌浏览器,因为有些浏览器可能不兼容。

开源插件

俺给大家在推荐一个插件,uppy,这个插件支持以下功能:

  • 不依赖于任何插件,支持拖放
  • 不离开页面进行文件上传
  • 在浏览器崩溃的情况下恢复上传

 

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/1738.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注