今天遇到一个新的问题，就是图片拖拽上传至服务器，一般，我们会想到使用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); ???????????图片拖拽上传至服务器
原文地址：http://www.cnblogs.com/jf-67/p/8082412.html