Heim > Web-Frontend > js-Tutorial > Verwenden Sie Ajax, um Bilder im Base64-Format während der H5-Entwicklung hochzuladen

Verwenden Sie Ajax, um Bilder im Base64-Format während der H5-Entwicklung hochzuladen

php中世界最好的语言
Freigeben: 2018-03-31 16:20:16
Original
3203 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Verwendung von Ajax zum Hochladen von Bildern im Base64-Format bei der Entwicklung von H5 vorstellen.

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

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 = 'block';
        imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
    }
  }
}
Nach dem Login kopieren

3. Besorgen Sie sich das Bild und laden Sie es 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: 'POST',
        url: 'http://10.145.0.05/goods/addGoodsBase64',
        dataType: "json",
        data: {
          "base64": event.result,
        },
        success: function(data) {
          console.log(data);
        }
      });
    }
  }
}
Nach dem Login kopieren

Okay, das war's, der Rest wird von den Back-End-Studenten erledigt.

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:

So konfigurieren Sie Google Chrome für die Unterstützung von AJAX-Anfragen des Dateiprotokolls

AJAX ohne Aktualisierungsprüfung der eingegebene Benutzername

Das obige ist der detaillierte Inhalt vonVerwenden Sie Ajax, um Bilder im Base64-Format während der H5-Entwicklung hochzuladen. 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