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

最新推荐文章于 2024-04-08 10:24:07 发布

原创最新推荐文章于 2024-04-08 10:24:07 发布 · 351 阅读

1 ·

CC 4.0 BY-SA版权

Javascript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种通过拖拽实现文件预览并利用Ajax进行文件上传的方法。具体包括禁用浏览器默认行为、预览拖拽进来的文件（如图片和特定格式的视频）、以及通过Ajax异步上传文件至服务器。

    <!DOCTYPE html>  
    <html>  
    <head>  
        <meta charset="UTF-8"/>  
        <title>xhr2</title>  
    </head>  
    <body>  
    <div  id="drop_area" style="border:3px dashed silver;width:200px; height:200px">将图片拖拽到此</div>  
    <button onclick="xhr2()">ajax上传</button>  
    <script>  
        //拖拽上传开始  
        //1.禁止浏览器打开文件行为  
        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();  
        })  
        //2.拖拽,预览文件  
        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);  
      
        //3.ajax上传  
      
        function xhr2(){  
            var xhr = new XMLHttpRequest();//第一步  
            //新建一个FormData对象  
            var formData = new FormData(); //++++++++++  
            //追加文件数据  
            formData.append('file', resultfile);  
            //post方式  
            xhr.open('POST', 'upload.php'); //第二步骤  
            //发送请求  
            xhr.send(formData);  //第三步骤  
            //ajax返回  
            xhr.onreadystatechange = function(){ //第四步  
                　　　　if ( xhr.readyState == 4 && xhr.status == 200 ) {  
                　　　　　　//console.log( xhr.responseText );  
                            alert('上传完成')  
        　　　　}  
        　　};  
            //设置超时时间  
            xhr.timeout = 10000;  
            xhr.ontimeout = function(event){  
                　　　　alert('请求超时！');  
        　　}  
        }  
    </script>  
    </body>  
    </html>

    <?php  
    print_r($_FILES["file"]);  
    $name = $_FILES["file"]["name"]; //中文可能乱码使用iconv函数  
    move_uploaded_file($_FILES["file"]["tmp_name"],iconv("UTF-8","gb2312",$name));  
    ?>