我们平时经常做的是上传文件，，上传文件夹与上传文件类似，但也有一些差别之处，此次做了上传文件夹就记录下以备后用。

首先我们需要了解的是上传文件三要素：

1.表单提交方法:post (get方法提交有巨细限制,post没有)

2.表单的enctype属性:必需设置为multipart/form-data.

3.表单必需有文件上传项:file，且文件项需要给定name值

上传文件夹需要增加一个属性webkitdirectory，像这样：

<input type="file"  webkitdirectory>

不过webkitdirectory属性有个问题，只能撑持高版本的chrome，不能撑持低版本的IE，如ie6,ie7,ie8，不能做到全浏览器适配，运行环境对照单一。

js中可以判断文件夹中文件数量及文件夹巨细是否切合要求，不切合要求不能向后台提交：

前台HTML模板

this.GetHtmlFiles = function()

{

     var acx = "";

     acx += ‘<div>\

                <div><img src="http://www.mamicode.com/js/file.png"/></div>\

                   <div>\

                       <div>\

                            <div>HttpUploader措施开发.pdf</div>\

                            <div>(35%)</div>\

                            <div child="1">1000.23MB</div>\

                    </div>\

                       <div><div></div></div>\

                       <div>15.3MB 20KB/S 10:02:00</div>\

                   </div>\

                   <div>\

                    <span title="打消"><img src="http://www.mamicode.com/js/stop.png"/><div>打消</div></span>\

                    <span title="继续"><img src="http://www.mamicode.com/js/post.png"/><div>继续</div></span>\

                       <span title="遏制"><img src="http://www.mamicode.com/js/stop.png"/><div>遏制</div></span>\

                       <span title="删除"><img src="http://www.mamicode.com/js/del.png"/><div>删除</div></span>\

                   </div>‘;

     acx += ‘</div>‘;

     //文件夹模板

     acx += ‘<div>\