집 > 기사 > 웹 프론트엔드 > Ajax 작업 양식은 비동기적으로 파일을 업로드합니다.

Ajax 작업 양식은 비동기적으로 파일을 업로드합니다.

php中世界最好的语言원래의: 2018-04-03 15:43:191352검색

이번에는 비동기식 파일 업로드를 위한 Ajax 작업 양식을 가져왔습니다. Ajax 작업 양식의 비동기식 업로드에 대한 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

1. 원인

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

2. Try

먼저 "jQuery Form Plugin"을 시도했는데, 이것은 jquery1.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);
}
})
);

예를 들어 위 코드인데 어떻게 구성하면 파일이 업로드만 되면 성공으로 반환되는 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");
});

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 다른 관련 기사를 주목하시기 바랍니다. PHP 중국어 웹사이트에서!