Input框有图片和文字如何共同传给后端

Posted 2021-03-02 yuanmo

input添加图片

（1）需要引入：

  <link href="~/Content/css/imgcss/bootstrap-fileinput.css" rel="stylesheet">
    <script type="text/javascript" src="~/Content/css/imgcss/bootstrap-fileinput.js"></script>

（2）图片的input框

  <div class="col-md-12" id="uploadForm" >
                        <div class="form-group  col-md-4 " style="text-align:center">
                            <label class="col-sm-6 control-label">Related Qualification Certificate</label>
                            <div class="fileinput fileinput-new" data-provides="fileinput" id="exampleInputUpload">
                                <div class="fileinput-new thumbnail" style="width: 200px;height: auto;max-height:150px;">
                                    <img id=‘picImg‘ style="width: 100%;height: auto;max-height: 140px;" src="~/Content/css/extra-images/noimage.png"  />
                                </div>
                                <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
                                <div>
                                    <span class="btn btn-primary btn-file">
                                        <span class="fileinput-new">Select the file</span>
                                        <span class="fileinput-exists">Change</span>
                                        <input type="file" name="OTHER_PROVE" id="other_proves" accept="image/gif,image/jpeg,image/x-png" />
                                    </span>
                                    <a href="javascript:;" class="btn btn-warning fileinput-exists" data-dismiss="fileinput">Remove</a>
                                </div>
                            </div>
                        </div>
                        <div class="form-group col-md-4 " style="text-align:center">
                            <label class="col-sm-6 control-label">passport</label>
                            <div class="fileinput fileinput-new" data-provides="fileinput" id="exampleInputUpload">
                                <div class="fileinput-new thumbnail" style="width: 200px;height: auto;max-height:150px;">
                                    <img id=‘picImg‘ style="width: 100%;height: auto;max-height: 140px;" src="~/Content/css/extra-images/noimage.png"  />
                                </div>
                                <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
                                <div>
                                    <span class="btn btn-primary btn-file">
                                        <span class="fileinput-new">Select the file</span>
                                        <span class="fileinput-exists">Change</span>
                                        <input type="file" name="PASSPORT" id="passports" accept="image/gif,image/jpeg,image/x-png" />
                                    </span>
                                    <a href="javascript:;" class="btn btn-warning fileinput-exists" data-dismiss="fileinput">Remove</a>
                                </div>
                            </div>
                        </div>
</div>

(3)ajax提交

$.validator.setDefaults({
    submitHandler: function () {
        var formDatas = new FormData();
        var file1 = $("#person_ph")[0].files[0];
        var file2 = $("#life_pho")[0].files[0];
        var file3 = $("#teach_ph")[0].files[0];
        var file4 = $("#diplomas")[0].files[0];
        var file5 = $("#other_proves")[0].files[0];
        var file6 = $("#passports")[0].files[0];
        if (file1 != undefined) { formDatas.append("PERSONAL_PHOTO", file1); }
        if (file2 != undefined) { formDatas.append("LIFE_PHOTO", file2); }
        if (file3 != undefined) { formDatas.append("TEACH_DEMO", file3); }
        if (file4 != undefined) { formDatas.append("DIPLOMA", file4); }
        if (file5 != undefined) { formDatas.append("OTHER_PROVE", file5); }
        if (file6 != undefined) { formDatas.append("PASSPORT", file6); }
      
        formDatas.append("SURNAME", $("input[name=‘SURNAME‘]").val());
        formDatas.append("MIN_NAME", $("input[name=‘MIN_NAME‘]").val());
 $.ajax({
            url: "/Recruitment/InsertRecruitementInfo",
            type: "post",
            data: formDatas,
            processData: false,//对data参数进行序列化处理
            contentType: false,//内容编码类型
            cache: false,//不使用缓存
            success: function (source) {
                var data = source;
                if (source.status == 1) {

                    alert(source.msg);
                    location.reload();
                }
                else {
                    alert("error");
                    location.reload();
                }
            }

        })

其中：下面的必须写上

  processData: false,//对data参数进行序列化处理
            contentType: false,//内容编码类型
            cache: false,//不使用缓存
(4)后端C#接收图片与其他string类型的文字

  public ActionResult InsertRecruitementInfo(HttpPostedFileBase PERSONAL_PHOTO,string SURNAME,string MIN_NAME,string NAME,string BIRTH,string COUNTRY,string PHONE,string EMAIL,string FACEBOOK,string ADDRESS,string EDUCATION,string MAJOR,string GRADUATE_SCHOOL,string FAITH,string EXPERIENCE_JOB,string EXPERIENCE_PERSONAL,string HOBBY,HttpPostedFileBase LIFE_PHOTO,HttpPostedFileBase TEACH_DEMO,HttpPostedFileBase DIPLOMA,HttpPostedFileBase  OTHER_PROVE,HttpPostedFileBase PASSPORT,string JOB_PLAN=null,string JOB_CHOOSE=null,string NEED=null)
        {
            Models.Recruitment recruitment=new Models.Recruitment();
            Models.ResponseData res = new Models.ResponseData();
            try
            {
                recruitment.PERSONAL_PHOTO = DataHelper.convertImage(PERSONAL_PHOTO);
                recruitment.SURNAME = SURNAME;
                recruitment.MIN_NAME = MIN_NAME;
                recruitment.NAME = NAME;
                recruitment.BIRTH = BIRTH;
                recruitment.COUNTRY = COUNTRY;
                recruitment.PHONE = PHONE;
                recruitment.EMAIL = EMAIL;
                recruitment.FACEBOOK = FACEBOOK;
                recruitment.ADDRESS = ADDRESS;
                recruitment.EDUCATION = EDUCATION;
                recruitment.MAJOR = MAJOR;
                recruitment.GRADUATE_SCHOOL = GRADUATE_SCHOOL;
                recruitment.FAITH = FAITH;
                recruitment.EXPERIENCE_JOB = EXPERIENCE_JOB;
                recruitment.EXPERIENCE_PERSONAL = EXPERIENCE_PERSONAL;
                recruitment.HOBBY = HOBBY;
                recruitment.LIFE_PHOTO = DataHelper.convertImage(LIFE_PHOTO);
                recruitment.TEACH_DEMO = DataHelper.convertImage(TEACH_DEMO);
                recruitment.DIPLOMA = DataHelper.convertImage(DIPLOMA);
                recruitment.OTHER_PROVE = DataHelper.convertImage(OTHER_PROVE);
                recruitment.PASSPORT = DataHelper.convertImage(PASSPORT);
                recruitment.JOB_PLAN = JOB_PLAN;
                recruitment.JOB_CHOOSE = JOB_CHOOSE;
                recruitment.NEED = NEED;
                int count = DAL.RecruitmentDAL.GetInstance().insertData(recruitment);
                if (count != 0)
                {
                    res.status = 1;
                    res.msg = "信息保存成功";
                }
                else
                {
                    res.status = 0;
                    res.msg = "数据保存失败";
                }
            }
            catch(Exception e)
            {
                res.status = 2;
                res.msg = e.Message;
            }
            return Json(res, JsonRequestBehavior.AllowGet);
            
        }