Funktion zum Hochladen mehrerer Bilder, implementiert durch das Laravel-Framework und 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 Vorgänge zum Hochladen mehrerer Bilder in Form von Beispielen Freunde in Not können sich auf Folgendes beziehen und hoffen, dass es allen helfen kann.

1. Einleitung

Wir wissen, dass das Hochladen mehrerer Bilder im Allgemeinen über eine Sofortanzeigefunktion verfügt, d. h. Sie können die hochgeladenen Bilder sehen direkt nach dem Hochladen des Bildes. 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();
}

Verwandte Empfehlungen:

Implementierung der HTML-Vorschaufunktion zum Hochladen mehrerer Bilder

Verwendung HTML zur Implementierung der Vorschaufunktion zum Hochladen mehrerer Bilder

Einfaches PHP-Applet-Code zum Hochladen mehrerer Bilder_PHP-Tutorial

Das obige ist der detaillierte Inhalt vonFunktion zum Hochladen mehrerer Bilder, implementiert durch das Laravel-Framework und Blob. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!