整理文件上传

javascript:constonImageDrop=document.getElementById("img-drop");onImageDrop.addEventListener("dragover",function(event){event.preventDefault();})onImageDrop.addEventListener("drop",function(event){event.preventDefault();console.log(event);letfile=event.dataTransfer.files[0];letfileReader=newFileReader();let{type:fileType}=file;fileReader.onload=function(){if(/^image/.test(fileType)){constimg=document.createElement("img");img.setAttribute("src",this.result);document.body.appendChild(img);}}fileReader.readAsDataURL(file);让formData=newFormData();formData.append("fileContent",file);});数据在drop事件的event.dataTransfer.files中，得到File对象后，可以进行和输入框一样的操作，即使用FileReader读取，或者创建一个空的formData，然后追加到表单数据。另一种粘贴读取文件的方式是通过粘贴的方式获取文件的内容。这种读取文件的方法一般是在编辑框里操作，div的contenteditable设置为true：.files:document.getElementById("editor").addEventListener("paste",function(event){letfile=event.clipboardData.files[0];console.log(file)});文件上传可以通过三种方式获取File对象。目前，前端上传文件常用的方式有两种。WholefileuploadSliceuploadWholefileupload其实就是上传整个文件比较简单，因为不需要太多的操作，只需要通过FormData对象把对应的文件传到对应的地址即可。document.getElementById("btn").onclick=function(){constoInput=document.createElement("input");oInput.setAttribute("类型","文件");oInput.click();oInput.onchange=function(){constformdata=newFormData();formdata.append("文件",文件);constxhr=newXMLHttpRequest();xhr.open("post","上传文件地址");//获取上传进度xhr.upload.onprogress=function(event){if(event.lengthComputable){//进度constpercent=event.loaded/event.total*100;}}//上传表单数据xhr.send(formdata);}}当切片上传文件过大时，使用正常的上传方式是不可靠的。漫长的等待时间会让用户失去耐心，甚至导致用户流失。这时候就需要使用sliceupload，将文件切割成若干个小文件，分别上传到服务器。上传切片比上传普通文件更难，因为涉及到文件切分和与后台的配合。这里只描述前端的内容，后端是如何实现的（后面会用node实现）就不细说了。document.getElementById("btn").onclick=function(){constoInput=document.createElement("input");oInput.setAttribute("类型","文件");oInput.click();oInput.onchange=function(){constfile=oInput.files[0];constperFileSize=2097152;constblobParts=Math.ceil(file.size/perFileSize);让进度=0；让blobSize=0;for(leti=0;i