JavaScript实现拖拽预览，AJAX小文件上传

本地上传，提前预览（图片，视频）

1.html中div标签预览显示，button标签触发上传事件。

[html] view
plain copy

<div  id="drop_area" style="border:3px dashed silver;width:200px; height:200px">将图片拖拽到此</div>  

<button onclick="xhr2()">ajax上传</button>  

2.禁止浏览器打开文件行为

[html] view
plain copy

document.addEventListener("drop",function(e){  //拖离   

    e.preventDefault();      

})  

document.addEventListener("dragleave",function(e){  //拖后放   

    e.preventDefault();      

})  

document.addEventListener("dragenter",function(e){  //拖进  

    e.preventDefault();      

})  

document.addEventListener("dragover",function(e){  //拖来拖去    

    e.preventDefault();      

})  

3.拖拽,预览文件

[html] view
plain copy

var box = document.getElementById('drop_area'); //拖拽区域     

box.addEventListener("drop",function(e){           

    var fileList = e.dataTransfer.files; //获取文件对象    

    //检测是否是拖拽文件到页面的操作            

    if(fileList.length == 0){                

        return false;            

    }             

    //拖拉图片到浏览器，可以实现预览功能    

    //规定视频格式  

    Array.prototype.S=String.fromCharCode(2);  

    Array.prototype.in_array=function(e){  

        var r=new RegExp(this.S+e+this.S);  

        return (r.test(this.S+this.join(this.S)+this.S));  

    };  

    var video_type=["video/mp4","video/ogg"];  

      

    //创建一个url连接,供src属性引用  

    var fileurl = window.URL.createObjectURL(fileList[0]);                

    if(fileList[0].type.indexOf('image') === 0){  //如果是图片  

        var str="<img width='200px' height='200px' src='"+fileurl+"'>";  

        document.getElementById('drop_area').innerHTML=str;                   

    }else if(video_type.in_array(fileList[0].type)){   //如果是规定格式内的视频                    

        var str="<video width='200px' height='200px' controls='controls' src='"+fileurl+"'></video>";  

        document.getElementById('drop_area').innerHTML=str;        

    }else{ //其他格式，输出文件名  

        //alert("不预览");  

        var str="文件名字:"+fileList[0].name;  

        document.getElementById('drop_area').innerHTML=str;      

    }         

    resultfile = fileList[0];             

},false);  

4.ajax上传

[html] view
plain copy

function xhr2(){  

    var xhr = new XMLHttpRequest();//第一步  

    //新建一个FormData对象  

    var formData = new FormData(); //++++++++++  

    //追加文件数据  

    formData.append('file', resultfile);  

    //post方式  

    xhr.open('POST', 'xhr2.php'); //第二步骤  

    //发送请求  

    xhr.send(formData);  //第三步骤  

    //ajax返回  

    xhr.onreadystatechange = function(){ //第四步  

　　　　if ( xhr.readyState == 4 && xhr.status == 200 ) {  

　　　　　　console.log( xhr.responseText );        

　　　　}  

　　};  

    //设置超时时间  

    xhr.timeout = 10000;  

    xhr.ontimeout = function(event){  

　　　　alert('请求超时！');  

　　}           

}  



5.php保存文件

[html] view
plain copy

<?php  

    print_r($_FILES["file"]);  

    $name = $_FILES["file"]["name"]; //中文可能乱码使用iconv函数  

    move_uploaded_file($_FILES["file"]["tmp_name"],iconv("UTF-8","gb2312",$name));  

?>