ThinkPHP5+Layui实现图片上传加预览

朴灿烈づ我的快乐病毒、 2022-06-06 08:42 159阅读 0赞

<label class="layui-form-label">图片</label>
    <a class="layui-btn" id="image" style="float: left;"><i class="layui-icon"></i>上传图片</a>
    <div class="layui-input-block" style="margin-left: 220px;">
      <input type="text" name="img" value="{$tptc.img}" class="layui-input" style="position: absolute;left: 0;top: 0;">
    </div>
    </div>
    
    <div class="layui-form-item">
      <img style="margin-left: 110px;" id="img" src="{$tptc.img}">
    </div>
    
    <script>
    layui.use('upload',function(){
      var upload = layui.upload,
      jq = layui.jquery;
      upload.render({
    	url: '{:url("index/upload")}'
    	,elem:'#image'
    	,ext: 'jpg|png|gif'
    	,area: ['500', '500px']
    	,before: function(input){
    	loading = layer.load(2, {
    	shade: [0.2,'#000']
    	});
    	}
    	,done: function(res){
    	layer.close(loading);
    	jq('input[name=img]').val(res.path);
    	img.src = ""+res.path;
    	layer.msg(res.msg, {icon: 1, time: 1000});
    	}
      }); 
    
    })
    </script>

public function upload(){
        // 获取表单上传文件 例如上传了001.jpg
        $file = request()->file('file');
        // 移动到框架应用根目录/public/uploads/ 目录下
        $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
        if($info){
    	// 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
    	$path =  $info->getExtension();
            // 成功上传后 返回上传信息
    	return json(array('state'=>1,'path'=>$path));
        }else{
            // 上传失败返回错误信息
    	return json(array('state'=>0,'errmsg'=>'上传失败'));
        }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，159人围观）

还没有评论，来说两句吧...

相关阅读

相关 CKEditor实现图片上传以及预览

前言 CKEditor其实不需要多介绍，最早之前叫FCKEditor，后面改名了，其实就是一个富文本编辑器。 > The best web text editor fo

末蓝、/ 2022年07月24日 06:05/ 0 赞/ 376 阅读

相关 js实现上传图片事实预览

html部分 <img alt="" id="img" > <input type="file" onchange='PreviewImage(this

分手后的思念是犯贱/ 2022年07月12日 23:08/ 0 赞/ 316 阅读

相关 ThinkPHP5+Layui实现图片上传加预览

<label class="layui-form-label">图片</label> <a class="layui-btn" id="image" style

朴灿烈づ我的快乐病毒、/ 2022年06月06日 08:42/ 0 赞/ 160 阅读

相关 jquery 实现图片上传预览

jquery 实现图片上传预览 1.如下代码就能实现： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

蔚落/ 2022年06月05日 01:57/ 0 赞/ 374 阅读

相关 node+layui实现图片上传预览和删除功能

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></titl

浅浅的花香味﹌/ 2022年05月28日 20:28/ 0 赞/ 225 阅读

相关关于layui文件上传-- 多图片上传预览

<html> <head> <meta charset='UTF-8'> <meta name='Author'

忘是亡心i/ 2022年05月27日 01:17/ 0 赞/ 320 阅读

相关 layui-图片上传，可使用选择图片->上传图片，预览图片，删除图片（转载）

原文地址：https://gitee.com/AMortal/codes/qt8m6zk30u1g4evr95jhx13 1. `<!DOCTYPE html>` 2.

亦凉/ 2022年05月11日 00:50/ 0 赞/ 741 阅读

相关 js 实现异步上传图片+预览

两种js实现方式，一种用原生的ajax；另一种用JQuery，例子比较简单，直接上代码。 ![复制代码][copycode.gif] <!DOCTYPE html>

我不是女神ヾ/ 2022年05月06日 20:28/ 0 赞/ 360 阅读

相关 js thinkphp5 图片上传可预览可删除

HTML部分 <style> .upload_btn{margin-left: 100px; border: none; background-color:

本是古典何须时尚/ 2022年04月18日 03:48/ 0 赞/ 119 阅读

相关 react antv实现图片上传预览

1、引入 import {Upload} from 'antd' 全局引入样式:import 'antd/dist/antd.css'

Bertha 。/ 2021年07月24日 23:32/ 0 赞/ 690 阅读