Multi-image upload function for Laravel framework and BLOB implementations

This paper mainly introduces the Laravel framework +BLOB implementation of the multi-image upload function, combined with the case of the Laravel framework +blob the front-end submission of multiple images upload operation and background processing related operations skills, the need for friends can refer to, hope to help everyone.

I. INTRODUCTION

We know that multi-image upload is usually accompanied by the instant display function, that is, you can immediately see the uploaded pictures. A multi-image upload plugin that has been used before is the selection of images, click Upload and then the image resources uploaded to the server, and then return to the stored path information, finally we click on the form's submit button and then insert the information into the database.

Now there is an awkward place, and when I click Upload Image, I cancel this form submission again. But the picture resources have been to the server, easy to cause space waste and so on.

Now provide a self-laravel framework to write a multi-image upload, (of course, can be directly applied anywhere), the feature is: Image upload can be displayed immediately, but is the browser through the BLOB call cache image information, when the form submitted, the picture resources will really upload server and database.

Two. Front End

Note: This example is based on the Laravel framework

On the form form first

<form method= "POST" enctype= "Multipart/form-data" action= "#" >  {{Csrf_field ()}}  <ul class= "List_ BTN ">  <li></li>   <li> <input type= "file" id= "House_img_one1" name= "Art_thumb" multiple= "multiple" Onchange= "Houseimgone (This)" ></li></ul>  <p class= "Submit" > Upload </p></form>

JS Code

<script> var _btnid = ';  var all_urls= "";  var all_types= ""; function Houseimgone (_this) {var img = '  ' _btnid = $ (_t    His). attr (' id ');    var obj = document.getElementById ("House_img_one1");    var length = Obj.files.length;       Multi-image upload traversal file information (can be viewed through object.files) for (var i = 0; i < length; i++) {var objurl = Getobjecturl (_this.files[i]);      Picture suffix type splicing all_types=all_types+_this.files[i].type;      Convert the picture to Base64 from the character var ofreader = new FileReader ();      Ofreader.readasdataurl (_this.files[i]); Ofreader.onload = function (ofrevent) {all_urls=all_urls+ofrevent.target.result+ "&| | |";      Splicing the data form base64 URL};        if (Objurl) {$ ('. Sz:last '). Before (IMG);      $ ('. Sz '). EQ ($ (". Sz"). length-2). attr ("src", objurl);    }}}//Click the Submit button to trigger 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 plugin prompt, you can choose Layer.msg ("Upload success", {Icon:6});        Window.location.reload (); }else {alert ("Upload failed!        ");  }      }    });  });    Gets the Blog object URL (actually gets the picture path information in the cache for immediate 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>

Three. Background processing code

Public function Store (Request $request) {  $data = $request->all ();  $imgs = $data [' IMGs '];  Array_values () is used to reset the array subscript  $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];  Extract base64 characters  $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 ();}