So laden Sie Bilder hoch und zeigen sie in der Vorschau an, indem Sie thinkphp5 und Layui (Code) kombinieren.

Der Inhalt dieses Artikels befasst sich mit der Implementierung des Hochladens und der Vorschau von Bildern (Code) mithilfe der Kombination von thinkphp5 und Layui. Ich hoffe, dass er für Sie hilfreich ist .

HTML-Code

<div class="layui-upload">
   <button type="button" class="layui-btn" id="cover">上传封面</button></div> <div class="layui-input-inline">
   <img id="preview" width="200px" height="200px"></div>

JS-Code

var uploadInst = upload.render({
      elem:'#cover'
      ,url:'addCourse'
      ,accept:'file'  // 允许上传的文件类型
      ,auto:true // 自动上传
      ,before:function (obj) {
          console.log(obj);
          // 预览
          obj.preview(function(index,file,result) {
              // console.log(file.name);    //图片名字
              // console.log(file.type);    //图片格式
              // console.log(file.size);    //图片大小
              // console.log(result);    //图片地址
              $('#preview').attr('src',result); //图片链接 base64
          });
          // layer.load();
      }
      // 上传成功回调
      ,done:function(res) {
          // console.log(upload);
          console.log(res);
          
      }
      // 上传失败回调
      ,error:function(index,upload) {
          // 上传失败
      }
      
  });

PHP-Schnittstelle

$file = request()->file('file');
 // 移动到框架应用根目录/public/uploads/ 目录下
 $info = $file->move('public/upload/');
 if ($info) {
     $path = 'public/upload/'.$info->getSaveName();
     return return_succ($path);
 }

Verwandte Empfehlungen:

PHP - Bild-Upload HTML-Bildcode hochladen Bild-Upload-Plug-in PHP PHP-Bildcode hochladen

Einfache Implementierung von PHP+Ajax Bild hochladen MVC Ajax Bild hochladen JQuery Ajax Bild hochladen PHP Ajax Bild hochladen

Das obige ist der detaillierte Inhalt vonSo laden Sie Bilder hoch und zeigen sie in der Vorschau an, indem Sie thinkphp5 und Layui (Code) kombinieren.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!