Heim > Web-Frontend > js-Tutorial > So erhalten Sie hochgeladene Bildinformationen (Pfad, Name, Größe vorübergehend speichern) über js und übergeben sie dann über ajax_javascript-Kenntnisse an das Backend

So erhalten Sie hochgeladene Bildinformationen (Pfad, Name, Größe vorübergehend speichern) über js und übergeben sie dann über ajax_javascript-Kenntnisse an das Backend

WBOY
Freigeben: 2016-05-16 15:37:39
Original
1835 Leute haben es durchsucht

Projektanforderungen: So erhalten Sie die hochgeladenen Bildinformationen (temporärer Speicherpfad, Name, Größe) über js und übergeben sie dann über Ajax an das Backend

Das Subjekt verwendet jquery, um

zu empfangen
<input name="c_pic" id="c_pic" type="file" class="file">
Nach dem Login kopieren

Die verwendete Methode ist:

var input = document.getElementById("c_pic");
input.addEventListener('change',readFile,false);
function readFile(){ 
var file = this.files[0]; 
}
Nach dem Login kopieren

Der Betreff möchte die Ajax-Post-Methode verwenden, um die relevanten Informationen des hochgeladenen Bildes an das Backend zu übertragen. Wie kann ich sie in ein Datenformat konvertieren, das per Post übertragen werden kann?

Als ich dieses Thema sah, dachte ich, dass es nicht einfach sei, die Datei direkt über JSON.stringify(file) zu übergeben (Hinweis: stringify() wird zum Parsen einer Zeichenfolge aus einem Objekt verwendet. Der Code lautet wie folgt). :

var input = document.getElementById("c_pic");
input.addEventListener('change',readFile,false);

function readFile(){ 
var file = this.files[0];
var file_json = JSON.stringify(file);
console.log(file_json); //打印出来是: {}
$.post('',file_json);
}
Nach dem Login kopieren

Ich habe festgestellt, dass das, was gedruckt wurde, ein leeres Objekt war: {}; wenn Sie etwas darüber wissen, lassen Sie es mich wissen, ich wäre Ihnen dankbar!

Also habe ich es mir anders überlegt und das Uploadfile-Plugin oder den Webuploader von Baidu verwendet. Dabei handelt es sich um eine JQuery-Bild-Upload-Komponente, die das Hochladen mehrerer Dateien, das Abbrechen, das Löschen, die Vorschau von Miniaturansichten vor dem Hochladen und die Listenanzeige der Bildgröße unterstützt. und Unterstützung für das Hochladen. Fortschrittsbalkenanzeige; unterstützt serverseitige Entwicklung in verschiedenen dynamischen Sprachen.
Wenn es HTML5 unterstützt, können Sie zum Hochladen FormData Ajax verwenden.

Der obige Inhalt ist die vom Editor geteilte Methode, um hochgeladene Bildinformationen (temporärer Speicherpfad, Name, Größe) über js abzurufen und sie dann über Ajax an das Backend weiterzuleiten. Ich hoffe, dass dies für alle hilfreich ist.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage