Ajax 폼 비동기 업로드 파일 인 스 턴 스 코드(파일 필드 포함)

1.원인
프론트 페이지 를 만 들 때 웹 API 의 Post 요청 을 호출 하여 필드 와 파일 을 보 내야 합 니 다.
2.시도
먼저'jQuery Form Plugin'을 시도 해 보 았 습 니 다.이것 은 바로 커 다란 구덩이 입 니 다.그 와 jquery 1.9.2 의 호환성 을 실현 하 는 것 은 그리 좋 지 않 습 니 다.가까스로$.browser 문 제 를 해결 하 였 는데 그 가 파일 을 올 려 서 반환 치 를 얻 지 못 한 것 을 발 견 했 습 니 다.

$("#view").submit(
$("#view").ajaxSubmit({
type: "post",
url: "../api/Article/Add",
dataType: "json",
success: function (msg) {
console.log(msg);
},
error: function (msg) {
$("#resultBox").html("       ");
console.log(msg);
}
})
);

예 를 들 어 위의 코드 를 어떻게 설정 합 니까?파일 을 업로드 하면 success 에서 돌아 오 는 msg 는 반드시 null(chromium 브 라 우 저 아래)이지 만 실제 반환 값 이 있 고 파일 이 없 을 때 도 정상 입 니 다.더 무 서운 것 은 IE/EDGE 에서 그 제 이 슨 의 반환 값 을 다운로드 하 라 는 힌트 를 주 었 다.
jquery.form.js 의 소스 코드 를 뒤 져 보 니 Iframe 으로 이 루어 진 가짜 Ajax 입 니 다.확실 하지 않 습 니 다.Pass!

// are there files to upload?
var files = $('input:file', this).fieldValue();
var found = false;
for (var j=0; j < files.length; j++)
if (files[j]) 
found = true;
if (options.iframe || found) // options.iframe allows user to force iframe mode
fileUpload();
else
$.ajax(options);

이것 은 파일 이 있 을 때 각각 2 개의 다른 함 수 를 호출 합 니 다.
3.해결 방안
다 반 조 사 를 통 해 xhr(XML HttpRequest)가 좋 은 것 임 을 발견 하 였 다.테스트 를 통 해 주류 브 라 우 저 와 모 바 일 브 라 우 저 는 모두 이 물건 을 지원 합 니 다.jquery/zepto 의 ajax 에서 원생 XML HttpRequest 대상 에 게 폼(파일)을 업로드 하 는 방법 을 소개 합 니 다.참고 글:https://www.jb51.net/article/91267.htm

function AjaxForm(formID, options) {
var form = $(formID);
// form         new FormData  
var formData = new FormData(form[0]);
$("input[type='file']").forEach(function (item, i) {
//  file           post $_FILES  
var domFile = $(item)[0].files[0];
//  file   
formData.append('file', domFile);
})
if (!options)options = {};
options.url = options.url ? options.url : form.attr("action");
options.type = options.type ? options.type : form.attr("method");
options.data = formData;
options.processData = false; // tell jQuery not to process the data
options.contentType = false; // tell jQuery not to set contentType
options.xhr = options.xhr ? options.xhr : function () {
//          xhr            
var xhr = $.ajaxSettings.xhr();
xhr.upload.onload = function () {
console.log("onload");
}
xhr.upload.onprogress = function (ev) {
if (ev.lengthComputable) {
var percent = 100 * ev.loaded / ev.total;
console.log(percent, ev)
}
}
return xhr;
};
options.success = options.success ? options.success : function (data) {
alert(data)
};
$.ajax(options);
}
//  
$("#sub").click(function (e) {
AjaxForm("#myForm");
});

위 에서 말 한 것 은 소 편 이 소개 한 Ajax 폼 비동기 로 파일 인 스 턴 스 코드(파일 도 메 인 포함)를 업로드 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!