ajax +formdata ,后台为PHP 实现上传整个文件夹（只适合谷歌浏览器）带进度条

有一个需求就是实现文件夹整个上传。而不是单个文件上传

但是只找到这个办法。适合谷歌的。有更好的。希望大神告知！

按钮可以自己设计

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

 

 

效果：

不明白可以问我。之前我用过webupload这个插件没有实现这个需求！！！难过