.net fileupload批量上传可删除_web前端开发中关于文件上传，我的总结

FileUpload 对象

在网页上传文件，最核心元素就是这个HTML DOM的FileUpload对象了。什么鬼？好像不太熟啊~别急，看到真人就熟了：

就是他啊！其实在 HTML 文档中该标签每出现一次，一个 FileUpload 对象就会被创建。该标签包含一个按钮，用来打开文件选择对话框，以及一段文字显示选中的文件名或提示没有文件被选中。

把这个标签放在

标签内，设置form的action为服务器目标上传地址，并点击submit按钮或通过JS调用form的submit()方法就可以实现最简单的文件上传了。

这样就完成功能啦？没错。但是你要是敢提交这样的代码，估计脸要被打肿

都什么年代了，我们要的是页面无刷新上传！

更优雅的上传

现代网页通过什么来实现用户与服务器的无刷新交互？

——XMLHttpRequest

对，就是这个你很熟悉的家伙。如果你开发的产品支持的浏览器是现代浏览器，那么恭喜你，文件上传就是这么easy！特别强调强调现代浏览器是因为我们接下来讨论的XMLHttpRequest指的是XMLHttpRequest Level 2。

那什么是Level 1？为什么不行？因为它有如下限制：

• 仅支持文本数据传输, 无法传输二进制数据.
• 传输数据时, 没有进度信息提示, 只能提示是否完成.
• 受浏览器 同源策略 限制, 只能请求同域资源.
• 没有超时机制, 不方便掌控ajax请求节奏.

而XMLHttpRequest Level 2针对这些缺陷做出了改进：

• 支持二进制数据, 可以上传文件, 可以使用FormData对象管理表单.
• 提供进度提示, 可通过 xhr.upload.onprogress 事件回调方法获取传输进度.
• 依然受 同源策略 限制, 这个安全机制不会变. XHR2新提供 Access-Control-Allow-Origin 等headers, 设置为 * 时表示允许任何域名请求, 从而实现跨域CORS访问(有关CORS详细介绍请耐心往下读).
• 可以设置timeout 及 ontimeout, 方便设置超时时长和超时后续处理.

关于XMLHttpRequest的细节就不在这里赘述了，有兴趣可以移步这篇博客。目前, 主流浏览器基本上都支持XHR2, 除了IE系列需要IE10及更高版本. 因此IE10以下是不支持XHR2的.

上面提到的FormData就是我们最常用的一种方式。通过在脚本里新建FormData对象，把File对象设置到表单项中，然后利用XMLHttpRequest异步上传到服务器：

完成最基本的需求无法满足我们对用户体验的追求，所以我们还想要支持上传进度显示和上传图片预览。

上传进度

因为是XMLHttpRequest Level 2, 所以很容易就可以支持对上传进度的监听。细心地小伙伴会发现在chrome的developer tools的console里new一个XHR对象，调用点运算符就可以看到智能提示出来一个onprogress事件监听器，那是不是我们只要绑定XHR对象的progress事件就可以了呢？

很接近了，但是XHR对象的直属progress事件并不是用来监听上传资源的进度的。XHR对象还有一个属性upload, 它返回一个XMLHttpRequestUpload 对象，这个对象拥有下列下列方法：

• onloadstart
• onprogress
• onabort
• onerror
• onload
• ontimeout
• onloadend

这些方法在XHR对象中都存在同名版本，区别是后者是用于加载资源时，而前者用于资源上传时。其中onprogress 事件回调方法可用于跟踪资源上传的进度，它的event参数对象包含两个重要的属性loaded和total。分别代表当前已上传的字节数(number of bytes)和文件的总字节数。比如我们可以这样计算进度百分比：

xhr.upload.onprogress = function(event) {

if (event.lengthComputable) {

var percentComplete = (event.loaded / event.total) * 100;

// 对进度进行处理 }

}

其中事件的lengthComputable属性代表文件总大小是否可知。如果 lengthComputable 属性的值是 false，那么意味着总字节数是未知并且 total 的值为零。

如果是现代浏览器，可以直接配合HTML5提供的

其value属性绑定上面代码中的percentComplete的值即可。再进一步我们还可以对的样式统一调整，实现优雅降级方案，具体参见这篇文章。

再说说我在测试这个progress事件时遇到的一个问题。一开始我设在onprogress事件回调里的断点总是只能走到一次，并且loaded值始终等于total。觉得有点诡异，改用console.log打印loaded值不见效，于是直接加大上传文件的大小到50MB，终于看到了5个不同的百分比值。

因为xhr.upload.onprogress在上传阶段(即xhr.send()之后，xhr.readystate=2之前)触发，每50ms触发一次。所以文件太小网络环境好的时候是直接到100%的。

图片预览

普通青年的图片预览方式是待文件上传成功后，后台返回上传文件的url，然后把预览图片的img元素的src指向该url。这其实达不到预览的效果和目的。

属于文艺青年的现代浏览器又登场了：“使用HTML5的FileReader API吧！” 让我们直接上代码，直奔主题：

function handleImageFile(file) {

var previewArea = document.getElementById('previewArea');

var img = document.createElement('img');

var fileInput = document.getElementById("myFile");

var file = fileInput.files[0];

img.file = file;

previewArea.appendChild(img);

var reader = new FileReader();

reader.onload = (function(aImg) {

return function(e) {

aImg.src = e.target.result;

}

})(img);

reader.readAsDataURL(file);

}

这里我们使用FileReader来处理图片的异步加载。在创建新的FileReader对象之后，我们建立了onload函数，然后调用readAsDataURL()开始在后台进行读取操作。当图像文件加载后，转换成一个 data: URL，并传递到onload回调函数中设置给img的src。

另外我们还可以通过使用对象URL来实现预览：

var img = document.createElement("img");

img.src = window.URL.createObjectURL(file);;

img.onload = function() {

// 明确地通过调用释放

window.URL.revokeObjectURL(this.src);

}

previewArea.appendChild(img);

多文件支持

什么？一个一个添加文件太烦？别急，打开一个开关就好了。别忘了我们文章一开头就登场的FileUpload对象，它有一个multiple属性。只要这样

我们就能在打开的文件选择对话框中选中多个文件了。然后你在代码里拿到的FileUpload对象的files属性就是一个选中的多文件的数组了。

var fileInput = document.getElementById("myFile");

var files = fileInput.files;

var formData = new FormData();

for(var i = 0; i < files.length; i++) {

var file = files[i];

formData.append('files[]', file, file.name);

}

FormData的append方法提供第三个可选参数用于指定文件名，这样就可以使用同一个表单项名，然后用文件名区分上传的多个文件。这样也方便前后台的循环操作。

二进制上传

有了FileReader，其实我们还有一种上传的途径，读取文件内容后直接以二进制格式上传。

var reader = new FileReader();

reader.onload = function(){

xhr.sendAsBinary(this.result);

}

// 把从input里读取的文件内容，放到fileReader的result字段里

reader.readAsBinaryString(file);

不过chrome已经把XMLHttpRequest的sendAsBinary方法移除了。所以可能得自行实现一个

XMLHttpRequest.prototype.sendAsBinary = function(text){

var data = new ArrayBuffer(text.length);

var ui8a = new Uint8Array(data, 0);

for (var i = 0; i < text.length; i++){

ui8a[i] = (text.charCodeAt(i) & 0xff);

}

this.send(ui8a);

}

这段代码将字符串转成8位无符号整型，然后存放到一个8位无符号整型数组里面，再把整个数组发送出去。

到这里，我们应该可以结合业务需求实现一个比较优雅的文件上传组件了。等等，哪里优雅了？都不支持拖拽！

拖拽的支持

利用HTML5的drag & drop事件，我们可以很快实现对拖拽的支持。首先我们可能需要确定一个允许拖放的区域，然后绑定相应的事件进行处理。看代码

var dropArea;

dropArea = document.getElementById("dropArea");

dropArea.addEventListener("dragenter