使用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,这个插件支持以下功能:
- 不依赖于任何插件,支持拖放
- 不离开页面进行文件上传
- 在浏览器崩溃的情况下恢复上传