Input box with pictures and text together how to pass the back-end

Add a picture input

(1) need to be introduced:

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

(2) the input picture frame

  <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" alt="" />
                                </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" alt="" />
                                </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 submit

$.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());
            url:
 $ .ajax ({"/ Recruitment / InsertRecruitementInfo" , 
            type: "POST" , 
            data: formDatas, 
            the processData: to false , // for serializing data parameter 
            contentType: to false , // content encoding type 
            Cache: to false , // do not use the cache 
            success: function (Source) {
                 var Data = Source;
                 IF (source.status ==. 1 ) { 

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

        })

Where: The following must be written on

  processData: false, // parameters of the data processing sequence 
            contentType: false, // content encoding type 
            cache: false, // do not use the cache 
(4) C # rear end of the reception with other types of character 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 () The insertData (recruitment);.
                 IF (COUNT = 0! ) 
                { 
                    Res.status =. 1 ; 
                    res.msg = "success information storage" ; 
                } 
                the else 
                { 
                    res.status = 0 ; 
                    res.msg = "failed data storage" ; 
                } 
            } 
            the catch (Exception E) 
            { 
                res.status = 2 ; 
                res.msg = e.Message;
            }
            return Json(res, JsonRequestBehavior.AllowGet);
            
        }