input file 多文件上传

最近做多文件上传input file遇到许多坑

多文件上传可以选择文件夹或者按住ctrl选择几个文件

<input value="上传文件夹" type="file" id="file" name="file" class="file" accept="image/jpeg,image/png"  webkitdirectory="true"/>

这种就是上传文件夹，关键属性是webkitdirectory=“true”，但是这种只能chrome使用

还有就是按住ctrl和shift选择多个

 <input  type="file" id="file" name="file" class="file" accept="image/jpeg,image/png" multiple=true onchange="getFileSize()"/> 

关键属性multiple=true

之后遇到另一个问题：怎么获取上传的这些文件的总大小

查了好多都是只能获取到第一个文件的大小，或者就是后端进行判断，太烦了，话不多说，上代码

function getFileSize() {
				  //1.0-过滤文件大小
				var maxSize=10*1024*1024;
				console.log("file"+file+"size："+fileSize+"---max"+maxSize)
                var fp = $("#file");
				var lg = fp[0].files.length; 
				var items = fp[0].files;
				var fragment = "";
				var size=0;
				if (lg > 0) {
				for (var i = 0; i < lg; i++) {
				var fileName = items[i].name; //获得文件名
				console.log(fileName);
				var fileSize = items[i].size; //获得文件大小 
				var fileType = items[i].type; //获得文件类型
				var fileTypes = new Array("jpg","png"); //定义可支持的文件类型数组
				var fileTypeFlag = "0";
				var newFileName = fileName.split('.');
				newFileName = newFileName[newFileName.length - 1];
				for (var i = 0; i < fileTypes.length; i++) {
					if (fileTypes[i] == newFileName) {
						fileTypeFlag = "1";
						return true;
					}
				}
				if (fileTypeFlag == "0") {
					layer.msg("请选择jpg或png后缀格式的文件上传！");
					return false;
				}
				size=size+fileSize
				//alert(fileSize);
				}
				}
				if (size > maxSize) {
					alert("文件大小为"+size);
                    alert("文件大小超过限制，不能超过10M");
                    $("#file").val("");
                    return false;
                }
				
				
			};

完美