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

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

    <div  id="drop_area" style="border:3px dashed silver;width:200px; height:200px">将图片拖拽到此</div>  
    <button οnclick="xhr2()">ajax上传</button>  

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

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.拖拽,预览文件

    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上传

    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保存文件

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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值