thinkphp3.2.3+layui实现多文件上传

最新推荐文章于 2022-11-21 10:49:41 发布

rens-_-

最新推荐文章于 2022-11-21 10:49:41 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/m0_37830658/article/details/87070295

版权

前端页面：

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>
           多文件上传
        </title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href="/Public/Home/css/x-admin.css" media="all">
		<link rel="stylesheet" href="/Public/Home/lib/layui-v2.4.5/layui/css/layui.css" media="all">
    </head>
    
    <body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>请选择需要上传的文件(文件大小不超过100M，可同时上传多个文件)</legend>
</fieldset> 
 
<div class="layui-upload">
  <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button> 
  <div class="layui-upload-list">
    <table class="layui-table">
      <thead>
        <tr><th>文件名</th>
        <th>大小</th>
        <th>状态</th>
        <th>操作</th>
      </tr></thead>
      <tbody id="demoList"></tbody>
    </table>
  </div>
  <button type="button" class="layui-btn" id="testListAction">开始上传</button>
</div> 
  
 
 <input type="hidden" id="fid" value="{$fid}"> 
          
<script src="/Public/Home/lib/layui-v2.4.5/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload;
 //多文件列表示例
  var demoListView = $('#demoList')
  ,uploadListIns = upload.render({
    elem: '#testList'
    ,url: "__CONTROLLER__/upload?fid="+$('#fid').val()
    ,accept: 'file'
    ,multiple: true
    ,auto: false
    ,bindAction: '#testListAction'
    ,choose: function(obj){   
      var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
      //读取本地文件
      obj.preview(function(index, file, result){
        var tr = $(['<tr id="upload-'+ index +'">'
          ,'<td>'+ file.name +'</td>'
          ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
          ,'<td>等待上传</td>'
          ,'<td>'
            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
          ,'</td>'
        ,'</tr>'].join(''));
        
        //单个重传
        tr.find('.demo-reload').on('click', function(){
          obj.upload(index, file);
        });
        
        //删除
        tr.find('.demo-delete').on('click', function(){
          delete files[index]; //删除对应的文件
          tr.remove();
          uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
        });
        
        demoListView.append(tr);
      });
    }
    ,done: function(res, index, upload){
      if(res.code == 0){ //上传成功
        var tr = demoListView.find('tr#upload-'+ index)
        ,tds = tr.children();
        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
        tds.eq(3).html(''); //清空操作
        return delete this.files[index]; //删除文件队列已经上传成功的文件
      }
      this.error(index, upload);
    }
    ,error: function(index, upload){
      var tr = demoListView.find('tr#upload-'+ index)
      ,tds = tr.children();
      tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
      tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
    }
  });
  

  
});
</script>

</body>
</html>

THINKPHP服务端代码：

 public function upload(){
		 
         $res=array(
          'code'=>1,
          'msg'=>'no sorry',
            'data'=>array(
                'src'=>'',
            )
        );
		$fid=I('get.fid');
		
        $upload = new \Think\Upload();
        $upload->maxSize =104857600;//允许上传的最大文件大小100MB=104857600字节(b)
        $upload->exts = array();
        $upload->rootPath ='./Public/Upload/';//文档上传的保存根路径
        $upload->saveName = '';
        $upload->savePath = '';
		$upload->replace = true;
        $info = $upload->upload();
        if(!$info){
            $res['code']=$upload->getError();
            $res['msg']='error';
        }else{
			$data['size']=$this->formatBytes($info['file']['size']);
			$data['ext']=$info['file']['ext'];
			$data['name']=$info['file']['name'];
			$data['time']=time();
			$data['fid']=I('get.fid');
			$data['src']=$upload->rootPath.$info['file']['savepath'].$info['file']['savename'];
			$data['author']=session('userid');
			//同名文件更新
			 $res=M('file')->where("name='".$info['file']['name']."'")->find();
			if($res){
				$res['code']=0;
				$res['msg']="文件替换成功";
				echo json_encode($res);die;
			}
			M('file')->add($data);
            $res['code']=0;
            $res['msg']='success';
            $res['res']=$upload->rootPath.$info['file']['savepath'].$info['file']['savename'];
        }
       echo json_encode($res);die;
 
    }

允许最大文件上传大小的设置

thinkphp $upload->maxsize=104857600 参数设置（单位为字体b）
php.ini
找到：max_execution_time = 30 ，这个是每个脚本运行的最长时间，单位秒，修改为：
max_execution_time = 150

找到：max_input_time = 60，这是每个脚本可以消耗的时间，单位也是秒，修改为：
max_input_time = 300

找到：memory_limit = 128M，这个是脚本运行最大消耗的内存，根据你的需求更改数值，这里修改为：
memory_limit = 256M

找到：post_max_size = 8M，表单提交最大数据为 8M，此项不是限制上传单个文件的大小,而是针对整个表单的提交数据进行限制的。限制范围包括表单提交的所有内容.例如:发表贴子时,贴子标题,内容,附件等…这里修改为：
post_max_size = 20M

找到：upload_max_filesize = 2M ，上载文件的最大许可大小，修改为：
upload_max_filesize = 10M
IIS IIS服务器默认允许最大上传文件大小为30M ，修改允许的最大内容长度（字节)[点击请求筛选-》编辑功能设置]

其他tp3.2自带上传文件类保存中文名称乱码问题

目录是THINK/DRIVER/local.class.php
第82行处改为if (!move_uploaded_file($file['tmp_name'], iconv('utf-8','gb2312',$filename)))

rens-_-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
5
评论
thinkphp3.2.3+layui实现多文件上传

前端页面：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt; 多文件上传 &lt;/title&gt; &lt;meta name="re
复制链接

扫一扫