html异步上传文件,javascript如何异步上传文件

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

下面，俺给出了一个实现的方法：

HTML

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