Fonction de téléchargement multi-images implémentée par le framework Laravel et Blob

Cet article présente principalement la fonction de téléchargement multi-images implémentée par Laravel framework + Blob. Il analyse en détail les compétences opérationnelles liées à la soumission frontale et au traitement en arrière-plan du framework Laravel + Blob pour plusieurs opérations de téléchargement d'images sous forme d'exemples. Les amis dans le besoin peuvent se référer à ce qui suit, en espérant que cela puisse aider tout le monde.

1. Introduction

Nous savons que les téléchargements multiples d'images sont généralement dotés d'une fonction d'affichage instantané, c'est-à-dire que vous pouvez voir les images téléchargées. immédiatement après le téléchargement de l'image. Un plug-in de téléchargement multi-images que j'ai utilisé auparavant consiste à sélectionner une image, à cliquer sur Télécharger et à télécharger les ressources d'image sur le serveur, puis à renvoyer les informations de chemin stockées. Enfin, nous cliquons sur le bouton Soumettre du formulaire. insérez ces informations dans la base de données.

Maintenant, il y a une chose embarrassante. Après avoir cliqué pour télécharger l'image, j'ai de nouveau annulé la soumission du formulaire. Cependant, les ressources d'image ont déjà été envoyées au serveur, ce qui peut facilement entraîner une perte d'espace.

Nous proposons désormais un téléchargement multi-images écrit par nous-mêmes combiné avec le framework Laravel (bien sûr, il peut être appliqué directement n'importe où). La fonctionnalité est la suivante : l'image peut être affichée immédiatement après le téléchargement, mais c'est le cas). mises en cache par le navigateur appelé via les informations sur l'image blob, lorsque le formulaire est soumis, les ressources d'image seront effectivement téléchargées sur le serveur et la base de données.

2. Front end

Remarque : Cet exemple est basé sur le framework Laravel

Entrez d'abord le formulaire Form

<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>

Code JS

<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. >

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();
}

Recommandations associées :

Mise en œuvre de la fonction d'aperçu du téléchargement multi-images HTML

Utilisation HTML pour implémenter la fonction d'aperçu du téléchargement multi-images

Tutoriel code_PHP d'applet de téléchargement multi-images PHP simple

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!