图片拖拽上传至服务器

Posted 2020-10-18 心欲无痕

　　今天遇到一个新的问题，就是图片拖拽上传至服务器，一般，我们会想到使用ajax，但是现在问题是ajax默认是没有提交事件的，也就是说，我们拖拽上传图片后，没法将上传的图片信息发送到服务器，这时候就要模拟form表单的提交了。

　　既然要上传，这里首先要讲到的就是图片拖拽上传了。

oDiv.ondrop = function(e) {
        e.preventDefault(); //获取拖拽过来的对象,文件对象集合
        var fs = e.dataTransfer.files; //若为表单域中的file标签选中的文件，则使用form[表单name].files[0]来获取文件对象集合
        console.log(fs.length); //打印长度
　　　　//循环多文件拖拽上传 
　　　　　for (var i = 0; i < fs.length; i++) { 
　　　　　　　　　var _type = fs[i].type; console.log(_type); //获取文件类型 if (_type.indexOf(‘image‘) != -1) { console.log(fs[i].size); //文件大小控制

    　　　　　　　var reader = new FileReader();//读取文件对象

 　　　　　　　　 reader.readAsDataURL(fs[i]);  //读为DataUrl,无返回值　　　　

 　　　　　　　　 reader.onload = function() {  } //当读取成功时触发，this.result为读取的文件数据

　　　　　　　　　reader.onloadend = function() { 
　　　　　　　　　　　if (reader.error){  
　　　　　　　　　　　　　console.log(reader.error); 
　　　　　　　　　　　}else{ //上传没有错误，ajax发送文件，上传二进制文件  
　　　　　　　　　　　} 
　　　　　　　　　} 
　　　　　　　}else{ alert(‘请上传图片文件！‘); } } }  

　　

　　图片拖拽完成，现在要用ajax模拟表单提交事件（ps:以下代码是放在文件读取成功后的函数里面，也就是render.onload事件里面）：

xhr = new XMLHttpRequest(); 
xhr.open("post", "http://www.xunkanimg.top/upload", true); 
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 
var fd = new FormData(); 
fd.append(‘file‘, fs[0]);  // file相当于input type=file，后面的fs[0]则是要提交的图片信息
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4&& xhr.status == 200){
        // ajax回调函数
    }
}   
xhr.send(fd);