Heim > Web-Frontend > H5-Tutorial > Hauptteil

Beispiel zur Erläuterung der H5-Mobilentwicklung. Ajax lädt mehrere Bilder im Base64-Format auf den Server hoch

小云云
Freigeben: 2017-12-26 11:04:26
Original
2473 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich das Hochladen mehrerer Bilder im Base64-Format auf den Server vorgestellt. Interessierte Freunde können darauf verweisen.

Schauen wir uns ohne weiteres den Code an

1. Komponenten hochladen


 <p class="imgbox">
   <img class="goodsimg" src="../../assets/addimg.png">
   <input id="file" type="file" class="fileupload" accept="image/*" multiple capture="camera" @change="viewimg()"/>
 </p>
Nach dem Login kopieren

2. Zeigen Sie die hinzugefügten Bilder an


viewimg($event) {
   //获取当前的input标签
   var currentObj = event.currentTarget; 
   //找到要预览的图片img标签,亦可动态生成
   var img = currentObj.parentNode.children[0]; 
   setImagePreview(currentObj, img);

   function setImagePreview(docObj, imgObjPreview) {
     if (docObj.files && docObj.files[0]) {
        imgObjPreview.style.display = &#39;block&#39;;
        imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
    }
  }
}
Nach dem Login kopieren
3. Holen Sie sich die Bilder und laden Sie sie auf den Server hoch


//单张图片上传
var inputs = $("input.fileupload");
for (var i = 0; i < inputs.length; i++) {
  //图片转base64上传
  var file = inputs[i].files;
  if (file[0]) {
    var reader = new FileReader();
    reader.readAsDataURL(file[0]);
    reader.onload = function(e) {
   var event = this;
   console.log(event.result);
      $.ajax({
        type: &#39;POST&#39;,
        url: &#39;http://10.145.0.05/goods/addGoodsBase64&#39;,
        dataType: "json",
        data: {
          "base64": event.result,
        },
        success: function(data) {
          console.log(data);
        }
      });
    }
  }
}
Nach dem Login kopieren
Okay, das ist alles. Der Rest bleibt den Back-End-Studenten überlassen.

Verwandte Empfehlungen:


Implementierungsschritte von js und Servlet zur Implementierung des Datei-Uploads in h5

PostMessage-API-Diagramm in H5 Der Artikel erklärt ausführlich

Über mehrere neue Hintergrundattribute und Textattribute in h5

Das obige ist der detaillierte Inhalt vonBeispiel zur Erläuterung der H5-Mobilentwicklung. Ajax lädt mehrere Bilder im Base64-Format auf den Server hoch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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