2020-08-04

标题 html5上传多张图片 ，预览，并加入数据库 前台代码，注意我用的是easyui写的

找了一大堆资料，都不全面，所有自己整理出来一篇 第一种跟第二种差不多 有两种方法，建议第二种
后台代码在下一篇
html页面

form id="addServerForm">
<input name=”serverId” id=”serverId”>
图片上传<input  type="file"name="fileName"  id="filename"   multiple="multiple" accept="image/png, image/jpeg, image/jpg" onchange="onLoadImage()>	
		<div id="onLoadImage"></div>
<a id=”serverbtnSave” class=”easyui-linkbutton” 			 data-option=”iconCls:’icon-add’”>确定</a>
</form>

第一种方法 js

Js代码：
var imgObjPreview="";
function onLoadImage(avalue){
	 //获取选择图片的对象
    var docObj = document.getElementById("filename");
    //后期显示图片区域的对象
         var dd = document.getElementById("onLoadImage");
     dd.innerHTML = "";
     //得到所有的图片文件
     var fileList = docObj.files;
   //循环遍历
    for (var i = 0; i < fileList.length; i++) {    
             //动态添加html元素        
         dd.innerHTML += "<div style='float:left' > <img id='img" + i + "'  /> </div>";
         //获取图片imgi的对象
         var imgObjPreview = document.getElementById("img"+i); 
         console.log(imgObjPreview);
         if (docObj.files && docObj.files[i]) {
             imgObjPreview.style.display = 'block';
             imgObjPreview.style.width = '200px';
            imgObjPreview.style.height = '180px';
             imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);   //获取上传图片文件的物理路径
            	//圖片的地址
            	             console.log(imgObjPreview.src);
         }
        else {
            //IE下，使用滤镜
             docObj.select();
            var imgSrc = document.selection.createRange().text;
             //alert(imgSrc)
             var localImagId = document.getElementById("img" + i);
           //必须设置初始大小
            localImagId.style.width = "200px";
             localImagId.style.height = "180px";
             //图片异常的捕捉，防止用户修改后缀来伪造图片
             try {
                 localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                 localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
             }
             catch (e) {
                 alert("您上传的图片格式不正确，请重新选择!");
                 return false;
            }
             imgObjPreview.style.display = 'none';
             document.selection.empty();
        }
     }  
     return true;
}

第二种方法

function onLoadImage(){
	 if(checkImage()){
		var docObj = document.getElementById("filename");
		  //后期显示图片区域的对象
	    var dd = document.getElementById("onLoadImage");
		dd.innerHTML = "";
		//得到所有的图片文件
		var fileList = docObj.files;
	//$('#filename').get(0).files[0] 得到的值跟fileList一样
	    for(var i = 0; i < fileList.length; i++){
			var reader = new FileReader();
			 console.log(fileList[0]);
			 //将文件以Data URL形式读入页面
			 reader.readAsDataURL(fileList[i]);
			 reader.onload=function(){
			     //显示文件
				dd.innerHTML+='<a><img class="imgSrc" width="100px" src="' + this.result +'" alt="" /></a>';
			         }
			    }
		  }
}
function checkImage() {
    var fileName=$("#filename").val();
    var flag=true;
    if(fileName==""){
        flag=false;
        alert("请选择图片");
    }
    else{
        var size = $("#filename")[0].files[0].size;
        if(size/1000>2048){
            flag=false;
            alert("图片大小不能超过2M");
        }
    }
    if(!flag)
        $("#filename").val("");
    return flag;
}