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

来源：互联网发布：网络歌手麦克风图片编辑：程序博客网时间：2024/06/04 20:29

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

<!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>

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

0 0