用于web开发的文件上传的多种实现

1、用于web开发的文件上传的多种实现文件上传是web开发常见需求，上传文件需要用到文件输入框，假如给文件输入框添加一个multiple属性则可以一次挑选多个文件（不支持的扫瞄器会自动忽视这个属性）点击这个输入框就可以打开扫瞄文件对话框挑选文件了，普通一个输入框上传一个文件就行，要上传多个文件也可以用多个输入框来处理，这样做是为了兼容那些不支持multiple属性的扫瞄器，同时用户普通也不会挑选多个文件（推举学习：html视频教程）基本上传方式当把文件输入框放入表单中，提交表单的时候即可将选中的文件一起提交上传到服务器，需要注重的是因为提交的表单中包含文件，因此要修改一下表单元素的enctype属

2、性为multipart/form-dataupload这样上传方式是传统的同步上传，上传的文件假如很大，往往需要等待很久，上传完成后页面还会重新加载，并且必需等待上传完成后才干继续操作早期的扫瞄器并不支持异步上传，不过可以用法iframe来模拟，在页面中躲藏一个元素，指定一个name值，同时将元素的target属性值指定为元素的name属性的值，将两者关联起来upload这样在提交表单上传的时候，页面就不会重新加载了，取而代之的是iframe重新加载了，不过iframe原本就是躲藏的，即使重新加载也不会感知到拜访文件fileapi提供了拜访文件的能力，通过输入框的files属性拜访，这会得到一

3、个filelist，这是一个集合，假如只挑选了一个文件，那么集合中的第一个元素就是这个文件varinput=document.queryselector(&39;inputtype="file"&39;)varfile=input.files0console.log()/文件名称console.log(file.size)/文件大小console.log(file.type)/文件类型支持fileapi的扫瞄器可以参考caniuseajax上传因为可以通过fileapi挺直拜访文件内容，再结合xmlhttprequest对象

4、挺直将文件上传，将其作为参数传给xmlhttprequest对象的send办法即可varxhr=newxmlhttprequest()xhr.open(&39;post&39;,&39;/upload/url&39;,true)xhr.send(file)不过一些缘由不建议挺直这样传递文件，而是用法formdata对象来包装需要上传的文件，formdata是一个构造函数，用法的时候先new一个实例，然后通过实例的append办法向其中添加数据，挺直把需要上传的文件添加进去varformdata=newformdata()formdata.append(&

5、39;file&39;,file,)/第3个参数是文件名称formdata.append(&39;username&39;,&39;mary&39;)/还可以添加额外的参数甚至也可以挺直把表单元素作为实例化参数，这样囫囵表单中的数据就所有包含进去了varformdata=newformdata(document.queryselector(&39;form&39;)数据预备好后，就是上传了，同样是作为参数传给xmlhttprequest对象的send办法varxhr=newxmlhttprequest()xhr.open

6、(&39;post&39;,&39;/upload/url&39;,true)xhr.send(formdata)监测上传进度xmlhttprequest对象还提供了一个progress大事，基于这个大事可以知道上传进度如何varxhr=newxmlhttprequest()xhr.open(&39;post&39;,&39;/upload/url&39;,true)xhr.upload.onprogress=progresshandler/这个函数接下来定义上传的progress大事由xhr.upload对象触发，在大事处理程序

7、中用法这个大事对象的loaded（已上传字节数）和total（总数）属性来计算上传的进度functionprogresshandler(e)varpercent=math.round(e.loaded/e.total)*100)上面的计算会得到一个表示完成百分比的数字，不过这两个值也不一定总会有，保险一点先推断一下大事对象的lengthcomputable属性functionprogresshandler(e)if(e.lengthcomputable)varpercent=math.round(e.loaded/e.total)*100)支持ajax上传的扫瞄器可以参考caniuse分割上传

8、用法文件对象的slice办法可以分割文件，给该办法传递两个参数，一个起始位置和一个结束位置，这会返回一个新的blob对象，包含原文件从起始位置到结束位置的那一部分（文件file对象其实也是blob对象，这可以通过fileinstanceofblob确定，blob是file的父类）varblob=file.slice(0,1024)/文件从字节位置0到字节位置1024那1kb将文件分割成几个blob对象分离上传就能实现将大文件分割上传functionupload(file)letformdata=newformdata()formdata.append(&39;file&39;,

9、file)letxhr=newxmlhttprequest()xhr.open(&39;post&39;,&39;/upload/url&39;,true)xhr.send(formdata)varblob=file.slice(0,1024)upload(blob)/上传第一部分varblob2=file.slice(1024,2048)upload(blob2)/上传其次部分/上传剩余部分通常用一个循环来处理更便利varpos=0/起始位置varsize=1024/块的大小while(posletformdata=newformdata()formdata.

10、append(&39;file&39;,file)letxhr=newxmlhttprequest()xhr.open(&39;post&39;,&39;/upload/url&39;,true)xhr.onload=()=>resolve(xhr.responsetext)xhr.onerror=()=>reject(xhr.statustext)xhr.send(formdata)当一切完成后promise.all(promises).then(response)=>console.log(&39;uploadsuc

11、cess!&39;).catch(err)=>console.log(err)支持文件分割的扫瞄器可以参考caniuse推断一下文件对象是否有该办法就能知道扫瞄器是否支持该办法，对于早期的部分版本扫瞄器需要加上对应的扫瞄器厂商前缀varslice=file.slice|file.webkitslice|file.mozsliceif(slice)letblob=slice.call(file,0,1024)/callupload(blob)elseupload(file)/不支持分割就只能挺直上传囫囵文件了，或者提醒文件过大拖拽上传通过拖拽api可以实现拖拽文件上传，默认状况下，

12、拖拽一个文件到扫瞄器中，扫瞄器会尝试打开这个文件，要用法拖拽功能需要阻挡这个默认行为document.addeventlistener(&39;dragover&39;,function(e)e.preventdefault()e.stoppropagation()随意指定一个元素来作为释放拖拽的区域，给一个元素绑定drop大事varelement=document.queryselector(&39;label&39;)element.addeventlistener(&39;drop&39;,function(e)e.preventdefau

13、lt()e.stoppropagation()/.)通过该大事对象的datatransfer属性猎取文件，然后上传即可varfile=e.datatransfer.files0upload(file)/upload函数前面已经定义挑选类型给文件输入框添加accept属性即可指定挑选文件的类型，比如要挑选png格式的，则指定其值为image/png，假如要允许挑选全部类型的，就是image/*添加capture属性可以调用设备机能，比如capture="camera"可以调用相机拍照，不过这并不是一个标准属性，不同设备实现方式也不一样，需要注重经测ios设备添加该属性后只能拍照而不能从相册挑选文件了，所以推断一下if(ios)/ios用navigator.useragent推断input.removeattribute(&39;capture&39;)不支持的扫瞄器会自动忽视这些属性自定义样式文