有一個需求就是實現文件夾整個上傳。而不是單個文件上傳
但是只找到這個辦法。適合谷歌的。有更好的。希望大神告知！
按鈕可以自己設計
<form id="uploadForm" enctype="multipart/form-data" style="background-color:#ecf0f5">
<span class="file">上傳文件夾 <input type="file" id="uoloadfile" name="file" webkitdirectory> </span>
</form>
input里加這個屬性webkitdirectory就是默認可以上傳文件夾了。谷歌瀏覽器可以。其他瀏覽器好像不行
js代碼
<script>
var treeid = 1;
var uploadcount=0;//這次上傳文件總數
var backcount=0;
//文件上傳觸發時間
$("#uoloadfile").change(function(){
var $list = $('.upload-html');
var files_arr=[];
var formData = new FormData();
files_arr = document.getElementById("uoloadfile").files;//獲取上傳的文件的數據
var files=[];
var name="";
var xhr = new XMLHttpRequest();
uploadcount=files_arr.length;
for (var i=0;i<files_arr.length;i++)
{
name=files_arr[i].name;
files=files_arr[i];
formData.append("cid",treeid);
formData.append("fname",files.webkitRelativePath);
formData.append("file",files);
getajax(formData,name);//執行上傳文件ajax
}
});
function getajax(formData,name){
$("#thelist2").css("display","block");
$.ajax({
url:'{:get_page_action("morefileupload")}',
type: "POST",
data: formData,
async:true,
processData: false, // 不處理數據
contentType: false,
beforeSend: function(){
$('.progress').css('color','#1AB394').show();
},
success:function(result){
backcount++;
if(result.code==1){
$('.progress').html(result.msg).css('color','black').fadeOut(10000,function(){$(this).html('')});
$('.filename').css('color','black').fadeOut(10000,function(){$(this).html('')});
}
if(backcount==uploadcount){
$('#thelist2').css('display','none');
setTimeout(function(){
window.location.reload();
},1000);
}
},
xhr: function(){
var xhr = $.ajaxSettings.xhr();
if(onprogress && xhr.upload) {
xhr.upload.addEventListener("progress", function () { onprogress(event,name) }, false);//監聽文件上傳進度,name文件名
return xhr;
}
},
error:function(){
$('.progress').html(result.msg).css('color','black').fadeOut(10000,function(){$(this).html('')});
$('.filename').css('color','black').fadeOut(10000,function(){$(this).html('')});
$('#thelist2').css('color','black').fadeOut(10000,function(){$(this).html('')});
setTimeout(function(){
window.location.reload();
},1000);
}
});
//實現進度條
function onprogress(evt,name){
var loaded = evt.loaded;
var tot = evt.total;
var txt1="<p class='filename'>"+name+"</p>";
var txt2="<div class='progress'><div class='bar'";
txt2+='style=width:';
txt2+=+Math.floor(100*loaded/tot)+'%'+">";
txt2+=Math.floor(100*loaded/tot)+'%';
txt2+=" </div></div>";
$("#progress-mask").append(txt1,txt2);
}
}
</script>
---------------------
原文鏈接：https://blog.csdn.net/hexiaoniao/article/details/89231143
效果展示：
在頁面中選擇好相應的上傳目錄，點擊粘貼上傳按鈕，數據即可快速開始上傳
數據庫記錄
Mac控件安裝教程與演示說明：
Linux控件安裝教程與演示說明：
控件包下載：
MacOS：http://t.cn/Aijg65dZ
Linux：http://t.cn/Aijg6fRV
cab(x86)：http://t.cn/Ai9pmG8S
cab(x64)：http://t.cn/Ai9pm04B
示例下載：
php： http://t.cn/Ai9p3CKQ
在線教程：
php-文件管理器教程：http://t.cn/AiNhmilv
個人博客：http://t.cn/AiY7heL0