Submit form including file upload using ajax

Khi trong form của bạn có một input file và bạn muốn khi submit form dùng ajax thì sẽ submit cả files.

Ta sẽ tạo 1 action không parameter và dữ liệu submit lên sẽ được lấy thông qua Request.Form và Request.Files:

[HttpPost]
        public JsonResult UploadResumeAjax() {
            List<HttpPostedFileBase> userfile = new List<HttpPostedFileBase>();
            foreach(string file in Request.Files) {
                userfile.Add(Request.Files[file]);
            }
            Prameter model = new Prameter();
            model.userfile_url = Request.Form["userfile_url"];
            model.googleFileId = Request.Form["googleFileId"];
            model.googleAuth = Request.Form["googleAuth"];
            model.uploadSource = Request.Form["uploadSource"];
            model.userfile_filename = Request.Form["userfile_filename"];
            model.firstName = Request.Form["firstName"];
            model.lastName = Request.Form["lastName"];
            model.email = Request.Form["email"];
            string err = UploadResume(userfile, model.userfile_url, model.googleFileId, model.googleAuth, model.uploadSource, model.userfile_filename, model.firstName, model.lastName, model.email);
            if (string.IsNullOrEmpty(err))
            {
                return Json(new { success = true }, JsonRequestBehavior.AllowGet);
            }
            return Json(new { success = false, message = err }, JsonRequestBehavior.AllowGet);
        }

Đây là method khi click vào button sẽ submit dữ liệu. Ở đây ta dùng FormData, critique_file_upload là id của input file:

$('#submitResume').click(function (e) {
           
            var isValid = resume.validateResumeForm();
            var obj = $('#frmResumeFormModal').serializeObject();
            var data = new FormData();
            var files = $('#critique_file_upload')[0].files;
            for (var i = 0; i < files.length; i++) {
                data.append(files[i].name, files[i]);
            }
            data.append("userfile_url", obj.userfile_url);//$('#critique_file_upload')[0].files[0];
            data.append("googleFileId", obj.googleFileId);
            data.append("googleAuth", obj.googleAuth);
            data.append("uploadSource", obj.uploadSource);
            data.append("userfile_filename", obj.userfile_filename);
            data.append("firstName", obj.firstName);
            data.append("lastName", obj.lastName);
            data.append("email", obj.Email);
            debugger;
            if(isValid == true) {
                var result = ajaxHelper.excutePostAjaxFormData_ReturnDataJson("/Resume/UploadResumeAjax", data);
                if(result != undefined && result.success == true) {
                    Alert.notify("", "<strong>Upload resume for review successfully.</strong>");
                    $('#popup-resume').modal('hide');
                } else {
                    Alert.notify("", "<strong>" + result.message + "</strong>");
                }
            } else {
                if($('.page-resume #Email').parents('div:first').find('.error_text:first').is(":visible")){
                    $('#popup-resume').animate({ scrollTop: 0 }, 1000);
                }
            }
            return false;
        });
 Đây là method ajaxHelper.excutePostAjaxFormData_ReturnDataJson :

AjaxHelper.prototype.excuteAjaxFormData_ReturnData = function (dataType, type, url, inputData, message) {
    dataType = typeof dataType !== 'undefined' ? dataType : ajaxHelper.jsonType;
    type = typeof type !== 'undefined' ? type : ajaxHelper.typeGet;
    message = typeof message !== 'undefined' ? message : ajaxHelper.message_ajax_error;
    var returnData;
    $.ajax({
        dataType: dataType,
        type: type,
        url: url,
        data: inputData,
        async: false,
        cache: false,

// next 2 lines required for using FormData with jQuery

        contentType: false,
        processData: false,
        success: function (data) {
            returnData = data;
        },
        error: function (xhr, status, error) {
            console.log("AjaxHelper.ExcuteAjax_ReturnData: url:" + url + ' ' + xhr.responseText);
            returnData = null;
        }
    });
    return returnData;
};