Analyse eines Beispiels für die Funktion zum Hochladen mehrerer Bilder, implementiert durch das Laravel-Framework + Blob

In diesem Artikel wird hauptsächlich die vom Laravel-Framework + Blob implementierte Funktion zum Hochladen mehrerer Bilder vorgestellt. Er analysiert detailliert die Front-End-Übermittlungs- und Hintergrundverarbeitungsfunktionen des Laravel-Frameworks + Blob für mehrere Bild-Upload-Vorgänge in Form von Beispielen . Freunde, die es brauchen, können

Das Beispiel in diesem Artikel beschreibt die Funktion zum Hochladen mehrerer Bilder, die vom Laravel-Framework + Blob implementiert wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

1. Einführung

Wir wissen, dass es im Allgemeinen zum Hochladen mehrerer Bilder kommt mit einer Sofortanzeigefunktion, d. h. Sie können das hochgeladene Bild sofort nach dem Hochladen sehen. Ein Plug-in zum Hochladen mehrerer Bilder, das ich zuvor verwendet habe, besteht darin, ein Bild auszuwählen, auf Hochladen zu klicken, die Bildressourcen auf den Server hochzuladen und dann die gespeicherten Pfadinformationen zurückzugeben. Schließlich klicken wir auf die Schaltfläche „Senden“ des Formulars Fügen Sie diese Informationen in die Datenbank ein.

Jetzt gibt es eine peinliche Sache. Nachdem ich auf das Hochladen des Bildes geklickt habe, habe ich die Formularübermittlung erneut abgebrochen. Allerdings wurden die Bildressourcen bereits an den Server gesendet, was leicht zu Platzverschwendung führen kann.

Jetzt bieten wir einen von uns selbst geschriebenen Multi-Image-Upload in Kombination mit dem Laravel-Framework an (natürlich kann er überall direkt angewendet werden). Die Funktion ist: Das Bild kann sofort nach dem Hochladen angezeigt werden, ist es aber Wird vom Browser zwischengespeichert, der über Blob aufgerufen wird. Bildinformationen. Wenn das Formular gesendet wird, werden die Bildressourcen tatsächlich auf den Server und die Datenbank hochgeladen.

2. Frontend

Hinweis: Dieses Beispiel basiert auf dem Laravel-Framework

Geben Sie zuerst das Formular ein

<form method="post" enctype="multipart/form-data" action="#">
  {{csrf_field()}}
  <ul class="list_btn">
  <li><img id="imgone" class="sz" width="100px" height="100px" src="" style="display: none;"></li>
   <li> <input type="file" id="house_img_one1" name="art_thumb" multiple="multiple" onchange="houseImgOne(this)"></li>
</ul>
  <p class="submit">上传</p>
</form>

JS-Code

<script>
  var _btnId = &#39;&#39;;
  var all_urls="";
  var all_types="";
  function houseImgOne(_this) {
    var img = &#39;<img class="sz" width="100px" height="100px" src=""  >&#39;
    _btnId = $(_this).attr(&#39;id&#39;);
    var obj = document.getElementById("house_img_one1");
    var length = obj.files.length;
    //多图上传时遍历文件信息（可以通过object.files查看）
    for (var i = 0; i < length; i++) {
      var objUrl = getObjectURL(_this.files[i]);
      //图片后缀类型拼接
      all_types=all_types+_this.files[i].type;
      //将图片转换成base64自字符
      var oFReader = new FileReader();
      oFReader.readAsDataURL(_this.files[i]);
      oFReader.onload = function (oFREvent) {
        all_urls=all_urls+oFREvent.target.result+"&|||"; //拼接data形式base64的url
      };
      if (objUrl) {
        $(&#39;.sz:last&#39;).before(img);
        $(&#39;.sz&#39;).eq($(".sz").length - 2).attr("src", objUrl);
      }
    }
  }
  //点击提交按钮触发ajax
    $(".submit").click(function(){
    //console.log(all_types);
    $.ajax({
      type:"post",
      url:"{{url(&#39;admin/img&#39;)}}",
      data:{&#39;imgs&#39;:all_urls,&#39;types&#39;:all_types,&#39;_token&#39;:"{{csrf_token()}}"},
      dataType:"json",
      success:function(data){
        if (data==1){
          // layer插件提示，可自行选择则
          layer.msg("上传成功", {icon: 6});
          window.location.reload();
        }else {
          alert("上传失败！");
        }
      }
    });
  });
  //获取blog对象url(实际获取的是缓存中的图片路径信息，用于即时显示，并非服务器返回的实际资源路径)
  function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) {
      url = window.createObjectURL(file);
    } else if (window.URL != undefined) {
      url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) {
      url = window.webkitURL.createObjectURL(file);
    }
    return url;
  }
</script>

3. Hintergrundverarbeitungscode

public function store(Request $request)
{
  $data=$request->all();
  $imgs = $data['imgs'];
  // array_values()用于重置数组下标
  $types =array_values(array_filter(explode('image/',$data['types'])));
  $arr=array_values(array_filter(explode('&|||',$imgs)));
  foreach ($arr as $k => $v){
  //文件路径
  $filepath = base_path().'/storage/app/imgs/'.date('YmdHis').$k.'.'.$types[$k];
  //提取base64字符
  $imgdata = substr($v,strpos($v,",") + 1);
  $decodedData = base64_decode($imgdata);
  file_put_contents($filepath,$decodedData );
  //插入数据库
  $img = new Img;
  $filepath = strchr($filepath,'/');
  $img->img_path=$filepath;
  $img->save();
}

Artikel, die Sie interessieren könnten:

Swoole 1.10. 0 neue Version veröffentlicht, eine Reihe neuer Funktionsanalysen hinzugefügt

Beispielerklärung der Methode zum Drucken einer Matrix im Uhrzeigersinn (Spiralmatrix) in PHP

Erklärung der Methode zur Beurteilung, ob ein Binärbaum in PHP symmetrisch ist

Das obige ist der detaillierte Inhalt vonAnalyse eines Beispiels für die Funktion zum Hochladen mehrerer Bilder, implementiert durch das Laravel-Framework + Blob. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!