图片拖拽上传至服务器

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