利用拖拽效果實現檔案上傳功能
阿新 • • 發佈：2018-12-23
1、獲取檔案的方法
file物件是來自使用者在一個<input>表單元素上選擇檔案後返回的filelist物件,也可以是來自自由拖拽操作生成的dataTransfer物件，dataTransfer是拖拽事件物件的屬性。
2、示例程式碼
<body>
<div id="touxiang"></div>
<div id="drag"></div>
</body><style type="text/css"> #touxiang{ width:200px; height:200px; line-height:200px; text-align:center; font-size:80px; border:1px solid #ccc; margin:0 auto; position: relative; } #touxiang:after{ content:"+"; color:#ccc; } #drag{ width:500px; height:350px; border:1px dashed #ccc; margin:0px auto; } #touxiang img{ width:200px; height:200px; position: absolute; top:0; left:0; z-index:1; }
<script type="text/javascript"> //實現的功能：將檔案拖拽到指定區域後上傳到伺服器,在從伺服器獲得檔案的路徑顯示在頁面的另一個指定區域。 window.onload=function(){ var odrag=document.getElementById("drag"); var touxiang=document.getElementById("touxiang"); odrag.ondrop=function(e){ e.preventDefault();//阻止進行拖拽時瀏覽器的預設行為，即自動開啟圖片 var fileobj=e.dataTransfer.files[0];//通常我們提交（使用submit）時，會把form中的所有表單元素中的name與value組成一個查詢字串，提交到後臺。但當使用ajax提交時，要使用formData物件的append(name,value)方法. var formdata=new FormData(); formdata.append("upload",fileobj); var xhr=new XMLHttpRequest(); xhr.open("post","file1.php");//配置傳送請求 xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200){ var src=xhr.responseText; var img=document.createElement("img"); img.src=src;console.log(src); touxiang.appendChild(img); odrag.style.display="none"; } } }; xhr.send(formdata); } odrag.ondragover=function(e){ e.preventDefault();//阻止進行拖拽時瀏覽器的預設行為，即自動開啟圖片 } }; </script>
header("Content-type:text/html;charset=utf8");
if(isset($_FILES["upload"]["name"])){
if(is_uploaded_file($_FILES["upload"]["tmp_name"])){
move_uploaded_file($_FILES["upload"]["tmp_name"],"./files/".$_FILES["upload"]["name"]);
echo "./files/".$_FILES["upload"]["name"];
}
}