js實現檔案拖拽上傳並顯示待上傳的檔案列表
阿新 • • 發佈：2018-12-23
首先實現html頁面的內容:
<body> <div name="single" style="text-align: center; "> <A class=btn_addPic href="javascript:void(0);"><SPAN>選擇檔案</SPAN> <input id="file" class="filePrew" type="file" name="file" multiple="multiple" onchange="javascript:onc();" /> </A> </div> <div name="dropbox" id="dropbox" style="font-size:30px;color:#333333;background-color:#888888;min-width:300px;min-height:100px;border:3px dashed silver;"> <p style="line-height: 100px;">拖拽檔案上傳</p> </div> <div style="text-align: center; "> <button class="button" type="submit" onclick="javascript:Upload();">上傳</button> </div> <div id="fileliststring" style="background-color:#cccccc; color:#333333; "> </div> </body>
這裡定義了4個div
第一個是點選按鈕選擇要上傳的檔案
第二個為拖拽上傳
第三個為上傳按鈕
第四個用來先顯示待上傳的檔案列表
下面來實現js程式碼:
定義一個便用用來儲存待上傳的檔案列表:
var uploadFiles = new Array();
使用jquery方法阻止瀏覽器的預設行為，並獲取檔案列表:
$(function(){ //阻止瀏覽器預設行為。 $(document).on({ dragleave:function(e){ //拖離 e.preventDefault(); }, drop:function(e){ //拖後放 e.preventDefault(); }, dragenter:function(e){ //拖進 e.preventDefault(); }, dragover:function(e){ //拖來拖去 e.preventDefault(); } }); var box = document.getElementById('dropbox'); //拖拽區域 box.addEventListener("drop",function(e){ e.preventDefault(); //取消預設瀏覽器拖拽效果 var fileList = e.dataTransfer.files; //獲取檔案物件 //檢測是否是拖拽檔案到頁面的操作 if(fileList.length == 0){ return false; } AddFiles(fileList); },false); });
然後寫一個方法，用來處理待上傳的檔案列表:
function AddFiles(files){ var errstr = ""; for(var i=0; i< files.length; i++){ var filename = files[i].name; var isfind = false; for(var j=0; j< uploadFiles.length; j++){ if(uploadFiles[j].name == filename){ isfind = true; break; } } var index1=filename.lastIndexOf("."); var index2=filename.length; var postf=filename.substring(index1+1,index2);//字尾名 var myarray = new Array('JPG','jpg','jpeg','JPEG','gif','GIF','png','PNG'); if($.inArray(postf,myarray) == -1){ errstr += filename + "/"; continue; } if(isfind == false){ uploadFiles.push(files[i]); } } if(errstr != ""){ alert("檔案格式錯誤:"+errstr); } var fileliststring = ""; for(var j=0; j< uploadFiles.length; j++){ fileliststring += uploadFiles[j].name + " 大小:" + (uploadFiles[j].size / 1000) + "k" + "</br>"; } document.getElementById("fileliststring").innerHTML=fileliststring; }
這個方法的引數傳入的是html中的檔案列表
這裡使用一個數組來存放可以上傳的檔案型別，可以根據自己的需求來修改，如果上傳了非法的檔案會彈出提示。
然後是選擇檔案的回撥方法:
function onc(){
var files = document.getElementById("file").files;
if(files.length < 0){
return ;
}
AddFiles(files);
}最後是上傳的方法:
function Upload(){
AddFiles(new Array());
if(uploadFiles.length <= 0){
Refresh();
return;
}
uploadcount = uploadFiles.length ;
var FileController = "SaveFile.php"; // 接收上傳檔案的後臺地址
// FormData 物件
var form = new FormData();
form.append("file", uploadFiles[0]);
// XMLHttpRequest 物件
var xhr = new XMLHttpRequest();
xhr.open("post", FileController, true);
xhr.onload = function () {
Upload();
};
xhr.send(form);
uploadFiles.splice(0,1);
}
其中SaveFile.php為後臺接收上傳檔案的指令碼.
這裡首先判斷檔案列表中的檔案是否有檔案，有檔案則上傳並把上傳檔案從列表中刪除，上傳結束後繼續呼叫上傳方法繼續上傳後面的檔案，直到所有檔案都上傳完成，會重新整理一次當前頁面。
這是後臺接收檔案的php指令碼SaveFile.php：
<?php
$file = $_FILES['file'];//得到傳輸的資料
if($file != null){
//得到檔名稱
$name = $file['name'];
$names = explode('.',$name);
if(count($names) < 2){
exit();
}
$allow_type = array('JPG','jpg','jpeg','JPEG','gif','GIF','png','PNG'); //定義允許上傳的型別
//判斷檔案型別是否被允許上傳
if(in_array($names[count($names)-1], $allow_type)){
move_uploaded_file($file['tmp_name'],"file/".$file['name']);
}
}
?>
這個很簡單，就是將上傳的檔案存快取位置複製到目標位置.這裡同樣也會對上傳的檔案格式進行判斷。
下面來看下效果:
這時我們就可以從後臺的file資料夾中看到我們剛剛上傳的檔案了：
