H5获取上传图片名称、大小demo

今天聊下H5页面中，上传图片获取图片名称、大小、删除效果

<div class="fankui_img">
				<div class="file_file">
					<input type="file" multiple="multiple" name="fileLa" id="fileLa" value="" accept="image/*,.doc,.docx,.pdf"/>
				</div>
			</div>

$(function() {
			var filesForm = [];
			$("#fileLa").on("change", function(file) {
				
				var fileLa = $("#fileLa").val(); 
				var fileName= getFileName(fileLa);
				var fileSize= $("#fileLa")[0].files[0].size/(1024*1024);
				// if(fileSize>10){
				//     $.dialog.alert("上传单个文件大小不能超过10MB!");
				//     return false;
				// }
				//alert("文件名是："+fileName);
				//alert("文件大小："+fileSize);
				function getFileName(file){//通过第二种方式获取文件名
				    var arr = file.split('\\');//通过\分隔字符串，成字符串数组
				    return arr[arr.length-1];//取最后一个，就是文件名
				}
				
			    //存放图片的父级元素
			    var imgContainer = document.getElementsByClassName("fankui_img")[0];
			    //文本框的父级元素
			    var input = document.getElementsByClassName("file_file")[0];
				
				var files = file.target.files;
				for (var i = 0, file; file = files[i]; i++) {
					var reader = new FileReader();
					reader.onload = (function(theFile) {
						return function(e) {
							
							var imgUrl = e.target.result ;	//图片路径
							
							var fileTitle = e.target.result ;	//名称
							
							var imgSize = e.target.size;	//大小
							
					        var le = $(".file-del").length ;	//删除
					        
					        if(le>=9){
					        	WeizhuoCommonTabs.closeThis({'msg':"最多上传9张图片！"}); 
					        	return false ;
					        }
					        
							
					        var imgAdd = document.createElement("div");
					        imgAdd.setAttribute("class", "z_addImg");
					        
							var img = document.createElement("img");
							img.setAttribute("src", imgUrl);
							
							var fileTitle = document.createElement("h3");
							fileTitle.setAttribute("class", "fileName");
							fileTitle.innerHTML=fileName;
														
							var imgSize = document.createElement("h4");
							imgSize.setAttribute("class", "fileSize");
							imgSize.innerHTML=fileSize.toFixed(2)+"MB";
												        
							
					        var imgDel = document.createElement("span");
					        imgDel.setAttribute("class", "file-del");
					        imgDel.setAttribute("i", le+"" );
					        
							input.before(imgAdd);	//在上传按钮前插入元素
							//imgContainer.appendChild(imgAdd);//在上传按钮后插入元素
					        imgAdd.appendChild(img);
							imgAdd.appendChild(fileTitle);
							imgAdd.appendChild(imgSize);
							imgAdd.appendChild(imgDel);
					        
							
							filesForm.push(theFile);
						};
					})(file);
					reader.readAsDataURL(file);
				}
			});
			// 删除按钮
			$(".fankui_img").on('click', '.file-del', function () {
				var imgDiv = $(this).parent();
				var index = $(this).attr("i") ;
				filesForm.splice(index, 1);
				imgDiv.remove();
			});
			
		});