Example of Multi graph Upload Function Realized by Laravel Framework + Blob

This paper describes the multi-graph uploading function realized by Laravel framework + Blob. Share it for your reference, as follows:

1. Introduction

We know that multi-picture upload 1 comes with instant display function, that is, you can see the transmitted pictures immediately after uploading. A multi-picture upload plug-in used directly in the previous 1 is to select pictures, click Upload, then upload picture resources to the server, and then return to the stored path information. Finally, we click the Submit button of the form and insert this information into the database.

Now there is an awkward place. When I click Upload Picture, I cancel the form submission again. However, the picture resources have arrived at the server, which is easy to cause space waste.

Now we provide a multi-picture upload written by ourselves in combination with Laravel framework, (of course, it can be directly applied anywhere), which is characterized by: the picture can be displayed immediately after uploading, but the browser called by blob caches the picture information. When the form is submitted, the picture resources will be really uploaded to the server and database.

2. Front end

Note: This example is based on the Laravel framework

Go to the Form form first

<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>
  <div class="submit"> Upload </div>
</form>

JS code

<script>
  var _btnId = '';
  var all_urls="";
  var all_types="";
  function houseImgOne(_this) {
    var img = '<img class="sz" width="100px" height="100px" src=""  >'
    _btnId = $(_this).attr('id');
    var obj = document.getElementById("house_img_one1");
    var length = obj.files.length;
    // Traverse file information when uploading multiple graphs (you can pass object.files View) 
    for (var i = 0; i < length; i++) {
      var objUrl = getObjectURL(_this.files[i]);
      // Picture suffix type mosaic 
      all_types=all_types+_this.files[i].type;
      // Convert a picture to base64 Self character 
      var oFReader = new FileReader();
      oFReader.readAsDataURL(_this.files[i]);
      oFReader.onload = function (oFREvent) {
        all_urls=all_urls+oFREvent.target.result+"&|||"; // Splice data Form base64 Adj. url
      };
      if (objUrl) {
        $('.sz:last').before(img);
        $('.sz').eq($(".sz").length - 2).attr("src", objUrl);
      }
    }
  }
  // Triggered by clicking the Submit button ajax
    $(".submit").click(function(){
    //console.log(all_types);
    $.ajax({
      type:"post",
      url:"{{url('admin/img')}}",
      data:{'imgs':all_urls,'types':all_types,'_token':"{{csrf_token()}}"},
      dataType:"json",
      success:function(data){
        if (data==1){
          // layer Plug-in prompt, you can choose your own 
          layer.msg(" Upload succeeded ", {icon: 6});
          window.location.reload();
        }else {
          alert(" Upload failed! ");
        }
      }
    });
  });
  // Get blog Object url( What is actually obtained is the picture path information in the cache, which is used for instant display, not the actual resource path returned by the server )
  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. Background processing code

public function store(Request $request)
{
  $data=$request->all();
  $imgs = $data['imgs'];
  // array_values() Used to reset array subscripts 
  $types =array_values(array_filter(explode('image/',$data['types'])));
  $arr=array_values(array_filter(explode('&|||',$imgs)));
  foreach ($arr as $k => $v){
  // File path 
  $filepath = base_path().'/storage/app/imgs/'.date('YmdHis').$k.'.'.$types[$k];
  // Extraction base64 Character 
  $imgdata = substr($v,strpos($v,",") + 1);
  $decodedData = base64_decode($imgdata);
  file_put_contents($filepath,$decodedData );
  // Insert database 
  $img = new Img;
  $filepath = strchr($filepath,'/');
  $img->img_path=$filepath;
  $img->save();
}

More readers interested in Laravel can check the topics of this site: "Introduction and Advanced Tutorial of Laravel Framework", "Summary of Excellent Development Framework of php", "Introduction Tutorial of php Object-Oriented Programming", "Introduction Tutorial of php+mysql Database Operation" and "Summary of Common Database Operation Skills of php"

I hope this article is helpful to the PHP programming based on Laravel framework.