拖图片进浏览器的时候阻止浏览器的默认行为(比如打开直接图片)

dropbox 给我们的容器添加上几个事件绑定dragenter,dragover,drop三个事件dropbox.addEventListener(dragenter, function(e){ e.stopPropagation(); e.preventDefault(); }, false); dropbox.addEventListener(dragover , function(e){ e.stopPropagation(); e.preventDefault(); }, false); dropbox.addEventListener(drop, function(e){ e.stopPropagation(); //个人的理解是若在dropbox上的drop事件被监听多次则两外的事件绑定无效了不知道对不对 e.preventDefault(); //阻止默认动作 e.dataTransfer.files//一个file类型的数组就是你拖拽进来的文件 }, false);2.在得到一个文件file后,要把它显示出来预览图片要用到FileReader1 var rdnew FileReader(); 2 rd.onloadendfunction(e){ 3 var imgdocument.createElement(img);//创建一个图片 4 img.srcthis.result;//result就是读出来的内容 5 img.width100; 6 img.titlefile.name;//文件的原始名称 7 8 } 9 rd.readAsDataURL({file}); // 读取为dataurlFilereader有下面几种方法,预览图片用到的是readAsDataURL。方法名参数描述abortnone中断读取readAsBinaryStringfile将文件读取为二进制码readAsDataURLfile将文件读取为 DataURLreadAsTextfile, [encoding]将文件读取为文本3.把图片发送到服务端进行处理要提交到服务器我们必须把图片读取为二进制的格式这里就用到了Filereader的readAsBinaryString1 var reader new FileReader(); 2 reader.readAsBinaryString({file}); 3 4 reader.onloadend function(){ 5 //bug(this.readyState); // 这个时候 应该是 2 6 //bug(this.result); //读取完成回调函数数据保存在result中 7 var fileDatathis.result; 8 var CRLF\r\n; 9 var xhr new XMLHttpRequest(); 10 xhr.open(post, self.server, true); 11 //xhr.onreadystatechangefunction(){}; 12 var boundary------OTkwNzI0OTEx----;//一段随机字符串最好根据时间来生成为了分割多个表单项 13 // 模拟一个文件提交请求 14 xhr.setRequestHeader(Content-Type, multipart/form-data, boundaryboundary); 15 //xhr.setRequestHeader(Content-Length, file.size); 在chrome下会出错可能是出于安全考虑不允许这样做 16 var body ; 17 body -- boundary CRLF; 18 body Content-Disposition: form-data; name{fileFieldName}; filename file.name CRLF; 19 body Content-Type: file.typeCRLFCRLF; 20 body fileData CRLF; 21 body -- boundary --CRLF; 22 xhr.onreadystatechange function (aEvt) { 23 if (xhr.readyState 4) { 24 if (xhr.status 200) 25 alert(xhr.responseText); 26 else 27 console.log(Error, xhr.statusText); 28 } 29 }; 30 31 xhr.sendAsBinary(body); 32 33 34 35 }上面代码的第18行filename直接用的原文件名称并没有改名这在原名为汉字的情况下会提示错误应该处理一下但不知道怎么弄值描述application/x-www-form-urlencoded在发送前编码所有字符默认multipart/form-data不对字符编码。在使用包含文件上传控件的表单时必须使用该值。text/plain空格转换为 加号但不对特殊字符编码。上面是在w3cschool搜到的既然multipart/form-data不对字符编码但为什么会出错希望知道的能告诉一声模拟出来的数据要以二进制发送。火狐XMLHttpRequest 对象中有sendAsBinary()方法这个是火狐私有的。chrome中没有但是可以模拟sendAsBinary1 XMLHttpRequest.prototype.sendAsBinary function(datastr) { 2 function byteValue(x) { 3 return x.charCodeAt(0) 0xff; 4 } 5 var ords Array.prototype.map.call(datastr, byteValue); 6 var ui8a new Uint8Array(ords); 7 this.send(ui8a.buffer); 8 }服务端接收文件时和普通上传文件时一样例如php代码if(!empty($_FILES)){ $file$_FILES[new_image]; //new_image 就是上面的fileFieldName echo $file[name]; move_uploaded_file($file[tmp_name],./zf/.$file[name]); die(); }4.显示上传进度1 var xhr new XMLHttpRequest(); 2 upload xhr.upload; 3 upload.addEventListener(progress, updateProgress, false);//updateProgress 处理上传进度 4 xhr.open(post, “服务端url”, true); 5 6 function updateProgress(evt) { 7 if (evt.lengthComputable) { 8 var percentComplete Math.round((evt.loaded * 100) / evt.total) 9 bug(percentComplete); 10 11 } 12 else { 13 // Unable to compute progress information since the total size is unknown 14 } 15 }