拖拽上传图片

 

很久没有写过博客了，闲的时候没东西可写，忙的时候没有时间写。

前些天，后台的同事提建议说，上传图片不是很好用，后台在线编辑器用的是fckeditor。
这时候想到了很久前看过一遍提升用户体验：HTML5 拖放文件上传，于是就打算做一个拖拽上传图片的功能。

因为是后台用，所以不用考虑ie的兼容了。

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

　　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后,要把它显示出来

预览图片要用到FileReader

var rd=new FileReader();
rd.onloadend=function(e){
  var img=document.createElement('img');//创建一个图片
    img.src=this.result;//result就是读出来的内容
    img.width=100;
    img.title=file.name;//文件的原始名称
              
}
rd.readAsDataURL({file}); // 读取为dataurl

Filereader有下面几种方法,预览图片用到的是readAsDataURL。

方法名	参数	描述
abort	none	中断读取
readAsBinaryString	file	将文件读取为二进制码
readAsDataURL	file	将文件读取为 DataURL
readAsText	file, [encoding]	将文件读取为文本

 

 

 

 

3.把图片发送到服务端，进行处理

 要提交到服务器，我们必须把图片读取为二进制的格式，这里就用到了Filereader的readAsBinaryString

var reader = new FileReader(); 
        reader.readAsBinaryString({file});
         
        reader.onloadend = function(){
            //bug(this.readyState); // 这个时候 应该是 2
            //bug(this.result); //读取完成回调函数，数据保存在result中    
            var fileData=this.result;
            var CRLF="\r\n";
            var xhr = new XMLHttpRequest();   
            xhr.open('post', self.server, true);
            //xhr.onreadystatechange=function(){};
            var boundary='------OTkwNzI0OTEx----';//一段随机字符串，最好根据时间来生成，为了分割多个表单项
            // 模拟一个文件提交请求
            xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary);
            //xhr.setRequestHeader("Content-Length", file.size);     在chrome下会出错，可能是出于安全考虑，不允许这样做
            var body = '';     
            body += '--' + boundary + CRLF;
            body += 'Content-Disposition: form-data; name="'+{fileFieldName}+'"; filename="' + file.name + '"'+CRLF;     
            body += "Content-Type: "+file.type+CRLF+CRLF;     
            body += fileData + CRLF;     
            body += "--" + boundary + "--"+CRLF;  
            xhr.onreadystatechange = function (aEvt) {  
              if (xhr.readyState == 4) {  
                 if (xhr.status == 200)  
                   alert(xhr.responseText); 
                 else  
                   console.log('Error', xhr.statusText);  
              }  
            }; 
   
            xhr.sendAsBinary(body);
             
            
            
        }

上面代码的第18行filename直接用的原文件名称，并没有改名，这在原名为汉字的情况下会提示错误，应该处理一下，但不知道怎么弄

 

值	描述
application/x-www-form-urlencoded	在发送前编码所有字符（默认）
multipart/form-data	不对字符编码。 在使用包含文件上传控件的表单时，必须使用该值。
text/plain	空格转换为 "+" 加号，但不对特殊字符编码。

上面是在w3cschool搜到的，既然multipart/form-data不对字符编码，但为什么会出错，希望知道的能告诉一声
模拟出来的数据要以二进制发送。火狐XMLHttpRequest 对象中有sendAsBinary()方法，这个是火狐私有的。chrome中没有，但是可以模拟sendAsBinary

XMLHttpRequest.prototype.sendAsBinary = function(datastr) {
                function byteValue(x) {
                    return x.charCodeAt(0) & 0xff;
                }
                var ords = Array.prototype.map.call(datastr, byteValue);
                var ui8a = new Uint8Array(ords);
                this.send(ui8a.buffer);
            }

服务端接收文件时和普通上传文件时一样
例如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.显示上传进度

var xhr = new XMLHttpRequest();
    upload =xhr.upload;
    upload.addEventListener("progress", updateProgress, false);//updateProgress 处理上传进度     
    xhr.open('post', “服务端url”, true);

function updateProgress(evt) {    
    if (evt.lengthComputable) {  
        var percentComplete = Math.round((evt.loaded * 100) / evt.total)
        bug(percentComplete); 

    } 
    else {  
    // Unable to compute progress information since the total size is unknown  
    }  
}  

 

这个也挺简单，代码如上，不过要注意的是：

1.事件要绑定到 XMLHttpRequest的 upload上，这样才能监听上传进度。 XMLHttpRequest上同时也有progress事件，不过是监听下载的。
2. 火狐和chrome调用updateProgress频率好像一样，具体是每秒调用一次还是怎么着，我也不是很清楚。假如文件很小，而且网络很快（本地测试的，当然快）FF就不会触发progress事件。
   在火狐下， 在上传完成时也不触发事件所以总是导致进度到不了100%，到了百分之80,90就不动了。

 

好了，功能基本都实现了，另外上面那些代码都是我在写篇文章是复制过来的（写了将近一个星期的时间，有空就写，程序基本功能完成是在两个星期前。）。
最后在附上一个我搜索资料过程中找到的一个jquery 插件 jquery-filedrop。

源码下载