标签:amp javascrip auto ajax content mes life exception mode
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); }
标签:amp javascrip auto ajax content mes life exception mode
原文地址:https://www.cnblogs.com/yuanmo/p/12656342.html