Thinkphp结合dropzone.js做上传功能

来源：互联网发布：勇者斗恶龙10国服mac 编辑：程序博客网时间：2024/06/03 14:33

首先写好上传的方法，注意这个方法只负责上传。至于把图片路径插入数据库应该再定义一个新的方法来调用这个方法。

       /**     * upload 上传方法     * @author   <kingphp@foxmail.com>     * @param int $returnType 返回数据的格式 (1代表使用json返回，2代表数组格式返回,3将数据存放到SESSION中)     * @return json 返回json格式的图片数据信息，json包括url(图片路径) state(错误信息)     */    public function upload($returnType=1){         $upload = new \Think\Upload();         $upload->allowExts  = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型         $upload->autoSub =true ;         $upload->subType ='date';         $upload->saveName = time().'_'.mt_rand();         $upload->dateFormat ='ym' ;         $upload->rootPath = './';         $upload->savePath =  './Uploads/thumb/';// 设置附件上传目录         $info = $upload->upload();         if($info){            foreach($info as $v){                $imgData[] = $v['savepath'].$v['savename'];                if($returnType==1){                    echo json_encode(array(                        'url'=>$imgData,                        'state'=>'SUCCESS'                    ));                }elseif($returnType==2){                   return $imgData;                }else{                    $_SESSION['imgData'][] = $imgData;                    return;                }            }        }else{             echo json_encode(array(                'state'=>$upload->getError()             ));             exit;        }    }接下来，说说dropzone.js吧。DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库。它是轻量级的，不依赖任何其他类库（如JQuery）并且高度可定制（比如说，你不想使用官方默认的上传样式，也是可以修改的）。比如，我这里就修改了默认样式。把默认上传样式变成一下的样子：![这里写图片描述](http://img.blog.csdn.net/20151126093444677)具体实现的代码：

<html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <link rel="stylesheet" href="__PUBLIC__/bootstrap_files/bootstrap.min.css">  <link rel="stylesheet" href="__PUBLIC__/bootstrap_files/bootstrap-theme.min.css">  <link rel="stylesheet" type="text/css" href="__PUBLIC__/admin/css/dropzone.css">  <script type="text/javascript" src="__PUBLIC__/admin/js/dropzone.js"></script>  <style>    html, body {      height: 100%;    }    #actions {      margin: 2em 0;    }    div.table {      display: table;    }    div.table .file-row {      display: table-row;    }    div.table .file-row > div {      display: table-cell;      vertical-align: top;      border-top: 1px solid #ddd;      padding: 8px;    }    div.table .file-row:nth-child(odd) {      background: #f9f9f9;    }    #total-progress {      opacity: 0;      transition: opacity 0.3s linear;    }    #previews .file-row.dz-success .progress {      opacity: 0;      transition: opacity 0.3s linear;    }    #previews .file-row .delete {      display: none;    }    #previews .file-row.dz-success .start,    #previews .file-row.dz-success .cancel {      display: none;    }    #previews .file-row.dz-success .delete {      display: block;    }    .test{        display:inline-block;    }  </style></head><body>  <div class="container" id="container">    <div id="actions" class="row">      <div class="col-lg-7">        <span class="btn btn-success fileinput-button dz-clickable" id="fileinput">            <i class="glyphicon glyphicon-plus"></i>            <span>Add files...</span>        </span>        <button type="submit" class="btn btn-primary start">            <i class="glyphicon glyphicon-upload"></i>            <span>Start upload</span>        </button>        <button type="reset" class="btn btn-warning cancel">            <i class="glyphicon glyphicon-ban-circle"></i>            <span>Cancel upload</span>        </button>      </div>      <div class="col-lg-5">        <!-- The global file processing state -->        <span class="fileupload-process">          <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">            <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress=""></div>          </div>        </span>      </div>    </div>    <div class="table table-striped files" id="previews">    </div>    <script>      //定制你想要的显示图片的界面      var previewTemplate1 = '<div class="dz-preview dz-file-preview test"><div class="dz-details"><div class="dz-filename"><span data-dz-name></span></div><div class="dz-size" data-dz-size></div><img data-dz-thumbnail /></div><div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div><div class="dz-error-message"><span data-dz-errormessage></span></div></div>';      var fileinput = document.querySelector('#fileinput');      var myDropzone = new Dropzone(document.body, {        //这是负责处理上传的路径        url:'__URL__/upload/type/1',        thumbnailWidth: 80,        thumbnailHeight: 80,        parallelUploads: 20,        addRemoveLinks:true,        previewTemplate: previewTemplate1,        //不自动提交图片，直到手动提交        autoQueue: false,         //预览图片的容器        previewsContainer: "#previews",         clickable: ".fileinput-button"       });      myDropzone.on("addedfile", function(file) {      });      // Update the total progress bar      myDropzone.on("totaluploadprogress", function(progress) {        document.querySelector("#total-progress .progress-bar").style.width = progress + "%";      });      myDropzone.on("sending", function(file) {      });      // Hide the total progress bar when nothing's uploading anymore      myDropzone.on("queuecomplete", function(progress) {        document.querySelector("#total-progress").style.opacity = "0";      });      document.querySelector("#actions .start").onclick = function() {        myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));      };      document.querySelector("#actions .cancel").onclick = function() {        myDropzone.removeAllFiles(true);      };    </script>  </div>  <input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0px; left: 0px; height: 0px; width: 0px;"></body></html>

0 0