前端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 = "<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) {

        }
    });
});

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