thinkphp+layui多图上传(1)thinkphp5+layui实现多图上传保存到数据库,可以实现图片自由排序,自由删除。

公共css代码

<style>
.layui-upload-img { width: 90px; height: 90px; margin: 0; }
.pic-more { width:100%; left; margin: 10px 0px 0px 0px;}
.pic-more li { width:90px; float: left; margin-right: 5px;}
.pic-more li .layui-input { display: initial; }
.pic-more li a { position: absolute; top: 0; display: block; }
.pic-more li a i { font-size: 24px; background-color: #008800; }
#slide-pc-priview .item_img img{ width: 90px; height: 90px;}
#slide-pc-priview li{position: relative;}
#slide-pc-priview li .operate{ color: #000; display: none;}
#slide-pc-priview li .toleft{ position: absolute;top: 40px; left: 1px; cursor:pointer;}
#slide-pc-priview li .toright{ position: absolute;top: 40px; right: 1px;cursor:pointer;}
#slide-pc-priview li .close{position: absolute;top: 5px; right: 5px;cursor:pointer;}
#slide-pc-priview li:hover .operate{ display: block;}
</style>

  

多图上传页面html代码

<div class="layui-form-item" id="pics">
  <div class="layui-form-label">相册图集</div>
  <div class="layui-input-block" style="width: 70%;">
    <div class="layui-upload">
      <button type="button" class="layui-btn layui-btn-primary pull-left" id="slide-pc">选择多图</button>
      <div class="pic-more">
        <ul class="pic-more-upload-list" id="slide-pc-priview">
        </ul>
      </div>
    </div>
  </div>
</div>

  

公共JS代码

<script>
         layui.use(‘upload‘, function(){
         var $ = layui.jquery;
         var upload = layui.upload;
 upload.render({
     elem: ‘#slide-pc‘,
     url: ‘{:url(‘admin/common/upload‘)}‘,
     size: 500,
     exts: ‘jpg|png|jpeg‘,
     multiple: true,
     before: function(obj) {
         layer.msg(‘图片上传中...‘, {
                icon: 16,
                shade: 0.01,
                time: 0
            })
     },
     done: function(res) {
        layer.close(layer.msg());//关闭上传提示窗口
         if(res.status == 0) {
             return layer.msg(res.message);
         }
         //$(‘#slide-pc-priview‘).append(‘<input type="hidden" name="pc_src[]" value="‘ + res.filepath + ‘" />‘);
         $(‘#slide-pc-priview‘).append(‘<li class="item_img"><div class="operate"><i class="toleft layui-icon">《</i><i class="toright layui-icon">》</i><i  class="close layui-icon"><img style="height: 32px;width: 32px;" src="__PUBLIC_ADMIN/del.png"></i></div><img src="__STATIC__/../‘ + res.filepath + ‘" class="img" ><input type="hidden" name="pc_src[]" value="‘ + res.filepath + ‘" /></li>‘);
     }
 });
});
//点击多图上传的X,删除当前的图片
$("body").on("click",".close",function(){
    $(this).closest("li").remove();
  });
 //多图上传点击<>左右移动图片
  $("body").on("click",".pic-more ul li .toleft",function(){
    var li_index=$(this).closest("li").index();
    if(li_index>=1){
      $(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index)-1));
    }
  });
  $("body").on("click",".pic-more ul li .toright",function(){
    var li_index=$(this).closest("li").index();
    $(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index)+1));
  });
</script>

  

原文地址:https://www.cnblogs.com/yehuisir/p/10851866.html

时间: 2024-11-10 14:06:18

thinkphp+layui多图上传(1)thinkphp5+layui实现多图上传保存到数据库,可以实现图片自由排序,自由删除。的相关文章

多图上传控制器及模型代码(2)thinkphp5+layui实现多图上传保存到数据库,可以实现图片自由排序,自由删除。

公共css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: 0; } .pic-more { width:100%; left; margin: 10px 0px 0px 0px;} .pic-more li { width:90px; float: left; margin-right: 5px;} .pic-more li .layui-input { display: initial; } .pic-mor

thinkphp/thinkcmf多图上传并保存到数据库

&&思路:图片和一些信息一起上传,先把信息用ajax提交到添加数据的function,添加成功后取到此条信息的主键,存session,返回模板ajax接收返回的信息,接收完毕后,再把多图上传的from表单提交,取到图片的信息,循环后拼接图片路径,根据session存的主键值修改(save)信息(smeta)到数据库,结束 &&这里特别说一下这个 multiple="multiple" 添加上这个之后可以一次选择多个文件进行上传,是 html5 的新属性

thinkphp表单上传文件并将文件路径保存到数据库中

上传单个文件,此文以上传图片为例,上传效果如图所示 创建数据库upload_img,用于保存上传路径 CREATE TABLE `seminar_upload_img` (  `id` int(11) NOT NULL AUTO_INCREMENT,  `img_name` varchar(255) DEFAULT NULL COMMENT '图片名称',  `img_url` varchar(255) DEFAULT NULL COMMENT '图片路径',  `create_time` te

dropzone拖动文件上传在thinkphp5中应用一个实例

参考:Dropzone的使用方法 点击查看dropzone中文文档 后台用的INSPINIA框架的模板,里面有,dropzone.js dropzone是一个可以拖文件上传的js. 拖进去,就上传了.我在页面上,写了一个保存已经上传的文件的image3,image4. 这就需要改写一下dropzone.js. 代码如下: 前端: <div class="ibox-content">     <p>         <strong>組圖上傳</s

Android上使用camera拍照,把获取的照片上传到远程服务器

使用Java上传文件 从Apache Software Foundation下载HttpClient 4.3.4. 在工程中添加下面的jar包: 参考sample,写一个简单的上传: public static void main(String[] args) throws Exception {         // TODO Auto-generated method stub         CloseableHttpClient httpclient = HttpClients.crea

基于element ui 实现七牛云自定义key上传文件,并监听更新上传进度

借助上传Upload 上传组件的 http-request 覆盖默认的上传行为,可以自定义上传的实现 <el-upload multiple ref="sliderUpload" :data="uploadData" :action="uploadData.url" list-type="picture-card" accept="image/png,image/jpeg,image/jpg" :au

ajax结合文件上传类进行多文件的单个上传

今天做项目的时候碰见一个问题:之前一个同事离职之前做了一个网站,有一个上传商品详细图片的功能,当时已经完成,但是由于后期程序的有更改以及更改的程序员的水平也是参差不齐,最后导致程序bug很多,由于当时用的是一个框架,最终也没找到说明文档,后来我就重新写了一个结合ajax上传文件的upload.classs.php虽然界面欠缺美观,但是通俗易懂好维护. //首先是页面. index.php <!DOCTYPE html> <html lang="en"> <

h5上传视频到服务端,存到指定位置,url保存到数据库,最后以特定格式显示

一.视频上传到服务器,存到指定位置. 试过n个方法中,最最靠谱的一个: http://www.cnblogs.com/xdp-gacl/p/4200090.html 二.url保存到数据库 1.项目中新建一个jdbc包 新建类 package jdbc; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; i

使用swfupload上传超过30M文件,使用FLASH上传组件

原文:使用swfupload上传超过30M文件,使用FLASH上传组件 前一段时间会员的上传组件改用FLASH的swfupload来上传,既能很友好的显示上传进度,又能完全满足大文件的上传. 后来服务器升级到windows 2008,改为IIS7后,上传文件一旦超过30M时,就出现404错误,而且是是上传进度达到100%之后,真是让人难思其解. 反复测试,发现FLASH上传文件到并没有正确的执行.NET程序,也就是.NET程序本身有问题; 但小于30M又是一切OK,难道是上传的文件大小有所限制?

PHP 图片上传工具类(支持多文件上传)

====================ImageUploadTool======================== <?php class ImageUploadTool { private $file; //文件信息 private $fileList; //文件列表 private $inputName; //标签名称 private $uploadPath; //上传路径 private $fileMaxSize; //最大尺寸 private $uploadFiles; //上传文件