第一段的代码是点击上传图片的函数,可以验证图片信息和展示上传的图片,是在网上找的两端代码拼接的,改改就能用了.
function PreviewImage(imgFile) { var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length); filextension=filextension.toLowerCase(); if ((filextension!='.jpg')&&(filextension!='.gif')&&(filextension!='.jpeg')&&(filextension!='.png')&&(filextension!='.bmp')) { alert("请上传正确的图片文件,谢谢 !"); imgFile.focus(); } else { var size; //自己设定大小 var imagSize = document.getElementById("userfile").files[0].size; if(imagSize > 1024 * size) { alert("图片大小应在"+1024 * size+"M以内"); }else{ var path = window.URL.createObjectURL(imgFile.files[0]);//在网上找的方法 document.getElementById("imgPreview").innerHTML = "<img id='img1' width='120px' height='100px' src='"+path+"'/>"; } } }
下面这一段是ajax代码 用formdata建立参数容器,用append方法添加参数就好了,可以同时上传图片与其他信息
//上传身份证modal的submit点击 $('.uploadIdSubmit').click(function(){ var formdata = new FormData(); $('#uploadIdModal .form-control').each(function(i, n) {//便利form表单 if ($(n).attr('param') != undefined) { //有param属性说明这里的数据是需要上传的 if($(n).prop('type') == 'file'){ //如果是图片 var paramName = $(n).attr('param') var paramValue = $(n).get(0).files; formdata.append(paramName, paramValue[0]); //formdata用append的方法来添加参数 }else{ //是文字的情况 var paramName = $(n).attr('param'); var paramValue = $(n).val(); formdata.append(paramName, paramValue); } } }); url = "/customers/customerInfo/uploadImages"; jQuery.ajax({ url : url, type : 'post', data : formdata, cache : false, contentType : false, //需要设置为false,不然后台拿不到数据 processData : false, //传送DOM信息,所以设为false dataType : "json", success : function(data) { } }); });
代码写的很丑,能明白啥意思就好....