Ajax 양식 비동기 파일 업로드 예제 코드

이 글은 Ajax 형식의 파일(파일 필드 포함) 비동기 업로드 예제 코드를 주로 소개합니다. 매우 훌륭하고 참고할만한 가치가 있습니다. 관심 있는 친구들은 함께 읽어보세요

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

2. Try

처음에는 "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 객체를 얻는 방법을 소개합니다.

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

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다. Related Articles : DROPDOW MENU의 카스케이트 작업

AJAX는 지방 및 지방 자치 단체의 3 단계 계단식을 실현합니다. AJAX 양식 제출 및 배경 처리를 기반으로 간단한 응용

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