前端ajax同时传图片(兼图片展示)与文本信息的方法

第一段的代码是点击上传图片的函数,可以验证图片信息和展示上传的图片,是在网上找的两端代码拼接的,改改就能用了.

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 = "";}}
}

下面这一段是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信息,所以设为falsedataType : "json",success : function(data) {}});
});

代码写的很丑,能明白啥意思就好....

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！