Ausführliche Erklärung zur Implementierung des Datei-Uploads mit Ajax und form+iframe

Die Datei-Upload-Funktion wird häufig in Projekten verwendet. In diesem Artikel werden zwei Implementierungen von Datei-Upload vorgestellt: Ajax und Form + Iframe. Interessierte Freunde können gemeinsam lernen.

Seit der Einführung von HTML5. Das Hochladen von Dateien wird sehr einfach. 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 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 an iframe übermittelt

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 können die folgende Anfrage sehen:

wurde Datei-Upload eingereicht. Dann ist das Hinzufügen dieser upload.php-Schnittstelle verfügbar, und wenn der Upload erfolgreich ist, wird Folgendes zurückgegeben:

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

Wie erhalten wir die Rückgabe? Wert, also was ist der nächste Schritt? 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 
}
});

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Schnelle Lösung für die Ajax-Übermittlung verstümmelter Zeichen unter IE

Ajax-Formular-Beispielcode für asynchrone Upload-Dateien

Kaskadierende Bedienung des Dropdown-Menüs

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Implementierung des Datei-Uploads mit Ajax und form+iframe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!