今天遇到一个新的问题，就是图片拖拽上传至服务器，一般，我们会想到使用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);
