Ajax 양식 비동기 파일 업로드 예제 코드에 대한 자세한 설명

이 글은 주로 Ajax 형식의 파일(파일 필드 포함) 업로드 예제 코드를 소개합니다. 매우 훌륭하고 참고할 만한 가치가 있으니 관심 있는 분들은 꼭 읽어보시길 바랍니다.

1. 원인

프런트엔드 페이지를 만들 때 WebAPI의 Post 요청을 호출하고 일부 필드와 파일을 전송한 다음(ajax를 통해 비동기적으로 양식을 전송하고 반환 결과를 가져오는 것과 동일) 성공 여부를 결정하는 반환 값입니다.

2. 먼저 "jQuery Form Plugin"을 사용해 보았습니다. 이것은 jquery1.9.2와 잘 호환되지 않습니다. 나는 그것을 사용하여 마침내 문제를 해결했습니다. 파일 업로드는 반환 값을 얻지 못합니다.

$("#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);
}
})
);

예를 들어 위의 코드는 그런데 어떻게 구성하면 파일이 업로드만 되면 성공으로 반환되는 메시지는 null이어야 하는데(크롬 브라우저 아래에서) 실제로는 반환 값이 있고, 파일이 없으면 정상입니다. 더욱 무서운 것은 IE/EDGE에서 다운로드하라는 메시지가 표시될 때 Json 반환 값입니다.

jquery.form.js의 소스코드를 살펴보니 Iframe을 사용하여 구현된 pseudo-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);

이것은 파일이 있을 때와 없을 때 호출되는 두 가지 다른 함수입니다.

3. 솔루션

많은 반대 조사 끝에 우리는 xhr(XMLHttpRequest)이 좋은 것임을 알았습니다. 테스트 후 주류 브라우저와 모바일 브라우저 모두 이 기능을 지원합니다. 다음은 jquery/zepto의 ajax에서 양식(파일)을 업로드하기 위해 기본 XMLHttpRequest 객체를 얻는 방법을 소개합니다. 참고글: http://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 비동기 파일 업로드 예제 코드 공유

jQuery 비동기 파일 업로드 플러그인 사용 공유 사용

PHP가 ajax를 사용하여 파일(그림)을 비동기적으로 업로드하는 방법에 대한 자세한 설명

위 내용은 Ajax 양식 비동기 파일 업로드 예제 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!