文件上传(拖拽文件)

PHP 专栏收录该内容
13 篇文章 0 订阅
本地上传,提前预览(图片,视频)
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));  
?> 
PHP move_uploaded_file() 函数

定义和用法
move_uploaded_file() 函数将上传的文件移动到新位置。 若成功,则返回 true,否则返回 false。

语法
move_uploaded_file(file,newloc)
参数
描述
file
必需。规定要移动的文件。
newloc
必需。规定文件的新位置。
说明
本函数检查并确保由  file  指定的文件是合法的上传文件(即通过 PHP 的 HTTP POST 上传机制所上传的)。如果文件合法,则将其移动为由  newloc  指定的文件。
如果  file  不是合法的上传文件,不会出现任何操作,move_uploaded_file() 将返回 false。
如果  file  是合法的上传文件,但出于某些原因无法移动,不会出现任何操作,move_uploaded_file() 将返回 false,此外还会发出一条警告。
这种检查显得格外重要,如果上传的文件有可能会造成对用户或本系统的其他用户显示其内容的话。  



 




  • 0
    点赞
  • 0
    评论
  • 4
    收藏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值