So implementieren Sie den Datei-Upload mit Ajax und form+iframe (ausführliche Erklärung mit Bildern und Text)

Dieses Mal werde ich Ihnen die Methode zum Datei-Upload mit Ajax und Formular+Iframe vorstellen (ausführliche Erklärung mit Bildern und Text). Was sind die Vorsichtsmaßnahmen für die Implementierung des Datei-Uploads? Ajax und form+iframe, das Folgende ist ein praktischer Fall, schauen wir uns das an.

Seit der Einführung von HTML5 ist das Hochladen von Dateien sehr einfach geworden. Es ist sehr praktisch, die Datei-Upload-Funktion zu lösen, die im Projekt verwendet werden muss. HTML5 unterstützt mehrere Bild-Uploads, Ajax-Uploads, Vorschauen von Bildern vor dem Hochladen und das Hochladen von Bildern per Drag-and-Drop. Es wird ausschließlich über die Dateisteuerung implementiert und enthält nur sehr wenig JS-Code.

HTML5Ajax-Upload

HTML5-Upload-Implementierung erfordert Dateikontrolle und XMLHttpRequest-Anfrage. Das Folgende ist ein Upload-Plugin, das ich gepackt habe:

function fileUpload(options) {
var opts = options || {};
var func = function() {};
this.fileInput = opts.fileInput || null;
this.url = opts.url || '';
this.fileList = [];
this.onFilter = opts.onFilter || function(f) {return f;}; //选择文件组的过滤方法
this.onSelect = opts.onSelect || func; //文件选择后
this.onProgress = opts.onProgress || func; //文件上传进度
this.onSuccess = opts.onSuccess || func; //文件上传成功时
this.onFailure = opts.onFailure || func; //文件上传失败时;
this.onComplete = opts.onComplete || func; //文件全部上传完毕时
this.init();
}
fileUpload.prototype = {
dealFiles: function(e) { //获取要上传的文件数组（用户选择文件后执行）
var files = e.target.files || e.dataTransfer.files;
this.fileList = this.onFilter(files);
for(var i = 0, file; file = this.fileList[i]; i++){ //增加唯一索引值
file.index = i;
}
this.onSelect(this.fileList);
return this;
},
removeFile: function(fileDelete) { //删除某一个文件
var arrFile = [];
for(var i = 0, file; file = this.fileList[i]; i++){
if (file != fileDelete) {
arrFile.push(file);
}
}
this.fileList = arrFile;
return this;
},
removeAll: function() { //清空文件队列
this.fileList = [];
return this;
},
uploadFile: function() { //上传文件
var me = this;
for(var i = 0, file; file = this.fileList[i]; i++){
(function(file) {
var formData = new FormData();
var xhr = new XMLHttpRequest();
if (xhr.upload) {
xhr.upload.addEventListener("progress", function(e) { // 上传中
me.onProgress(file, e.loaded, e.total);
}, false);
xhr.onreadystatechange = function(e) { // 文件上传成功或是失败
if (xhr.readyState == 4) {
if (xhr.status == 200) {
me.onSuccess(file, xhr.responseText);
me.removeFile(file);
if (!me.fileList.length) {
me.onComplete(); //上传全部完毕。执行回调
}
} else {
me.onFailure(file, xhr.responseText);
}
}
};
// 开始上传
formData.append('file', file);
xhr.open("POST", me.url, true);
xhr.send(formData);
}
})(file);
}
},
init: function() {
var me = this;
//文件选择控件选择
if (me.fileInput) {
me.fileInput.addEventListener("change", function(e) { me.dealFiles(e); }, false);
}
}
};

Ich glaube, Sie haben auch gesehen, dass formData im Code vorkommt. Das ist die Magie von HTML5. Mit Hilfe von formData können Sie die Funktion zum asynchronen Hochladen mehrerer Dateien ohne Aktualisierung problemlos implementieren und Vorschaubilder unterstützen. Erfreulich ist außerdem, dass mittlerweile viele Browser HTML5 unterstützen.

Aber! ! ! Versionen unter IE9 werden nicht unterstützt! !

Darüber hinaus hat die obige Methode einen weiteren Nachteil, da sie den domänenübergreifenden Upload nicht unterstützt. Wenn Sie diese beiden Geschäftsszenarien erfüllen müssen, versuchen Sie es mit der folgenden Methode und Iframe zum Hochladen. Schauen wir uns das genauer an:

Formularübermittlung an iframe

HTML-Code:

<iframe name="demoIframe" style="display:none"></iframe>
<form target="demoIframe" action="upload.php" method="post" enctype="multipart/form-data">
<input class="filename" type="file" name="fileLabel">
<input type="submit" value="提交">
</form>

Wir klicken auf „Senden“ und Sie sehen die folgende Anfrage:

Die Datei wurde hochgeladen. Das Hinzufügen dieser upload.php-Schnittstelle ist also verfügbar, und wenn der Upload erfolgreich ist, wird Folgendes zurückgegeben:

{
"code": "200",
"success": true,
"data": {
...
}
}

Wie erhalten wir den Rückgabewert, um den nächsten Schritt auszuführen? Da wir es in einen Iframe hochgeladen haben, müssen wir nur das Ladeereignis des Iframes abhören. Wenn es einen Rückgabewert gibt, können wir ihn zur weiteren Verarbeitung abrufen. Schauen Sie sich den js-Code an:

$('iframe').on('load', function() {
var responseText = $('iframe')[0].contentDocument.body.textContent;
var responseData = JSON.parse(responseText) || {};
if (responseData.isSuccess == true || responseData.code == 200) {
//success
} else {
//error 
}
});

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie beforeSend die Benutzererfahrung verbessert

Ajax asynchrone Anforderungs-JSON-Methode in der SpringMVC-Umgebung

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Datei-Upload mit Ajax und form+iframe (ausführliche Erklärung mit Bildern und Text). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!