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

Posted 2020-09-20

参考：Dropzone的使用方法

点击查看dropzone中文文档

后台用的INSPINIA框架的模板，里面有，dropzone.js

dropzone是一个可以拖文件上传的js.

拖进去，就上传了。我在页面上，写了一个保存已经上传的文件的image3,image4.

这就需要改写一下dropzone.js.

代码如下：

前端：

<div class="ibox-content">
    <p>
        <strong>組圖上傳</strong>
    </p>

    <form action="#" class="dropzone" id="dropzoneForm">
        <div class="fallback">
            <input name="file" type="file" multiple />
        </div>
    </form>
</div>

<div class="form-group"><label class="col-sm-2 control-label">組圖</label>
    <div class="col-sm-9">
        <input name="pictureurls" type="text" class="form-control" id="image3" value="{$info.pictureurls|default=‘‘}"/>
        <input type="text" class="form-control hidden" id="image4"/>
        <span class="help-block">上傳成功的文件已自動保存於服務器，進入附件管理可編輯和刪除。組圖url框只針對此篇內容包含的組圖。</span>
    </div>
    <div class="col-sm-1"><span class="btn btn-default btn-xs" id="delpic34">清空</span></div>
</div>

<script >
Dropzone.options.dropzoneForm = {
    url:"{:url(‘admin/picture/dz_upload‘)}",
    paramName: "file", // The name that will be used to transfer the file
    maxFilesize: 2, // MB
    dictDefaultMessage: "<strong>拖動文件或點擊上傳</strong></br>"
};
</script>

在dropzone.js里

// 这里加上res

success: function(file,res) {
    // console.log(typeof(res));
    res = JSON.parse(res);
    // console.log(res[‘filename‘]);
    if(res[‘filename‘]){
        // add by zy
        var hasfilename3 = $(‘#image3‘).val();
        var hasfilename4 = $(‘#image4‘).val();
        if(hasfilename3){
            var newfilename3 = hasfilename3+‘,‘+res.name;
        }else{
            var newfilename3 = res.name;
        }
        if(hasfilename4){
            var newfilename4 = hasfilename4+‘,‘+res.filename;
        }else{
            var newfilename4 = res.filename;
        }
        $( ‘#image3‘).val(newfilename3);
        $( ‘#image4‘).val(newfilename4);
        // 增加两个框，id
    }
    if (file.previewElement) {
        return file.previewElement.classList.add("dz-success");
    }
},

后端：

// 多圖上傳 3-1  dropzone.js
public function dz_upload()
{
    // 獲取表單上傳文件
    $files = request()->file(‘‘);
    foreach($files as $file){

        // 移動到框架應用根目錄/public/uploads/ 目錄下
        // 下面move()中去掉参数,‘‘就会改名，加上,‘‘就使用原文件名。
        $info = $file->move(ROOT_PATH . ‘public‘ . DS . ‘uploads‘.$this->image_dir. DS,‘‘);
        if($info){
            // 輸出 42a79759f284b767dfcb2a0197904287.jpg
            $filename = $info->getInfo($name=‘name‘);                  // 原文件名
            $savename = $info->getSavename();

            $path[‘filename‘] = $filename;
            $path[‘name‘] = DS . ‘uploads/‘ .$this->image_dir. DS . $savename;

            // 保存文件到數據庫 附件表
            $pathname = $path[‘name‘];
            $attachment = model(‘Attachment‘);
            $attachment -> saveattachment($info,$filename,$pathname);

            // 返回需要的信息
            echo json_encode($path);
        }else{
            // 上傳失敗獲取錯誤信息
            return $this->error($file->getError()) ;
        }
    }
}

上面的：saveattachment,是另一个方法，写在model里的。

// 文件保存到數據庫附件表
public function saveattachment($info,$filename,$pathname){
    $data = array (
        ‘module‘     =>    Request::instance()->controller(),          // 控制器名
        ‘filename‘   =>    $filename,                                  // 原文件名
        ‘filepath‘   =>    $pathname,                                  // 上傳後的新文件名
        ‘filesize‘   =>    $info->getInfo($name=‘size‘),               // 文件大小
        ‘fileext‘    =>    get_extension($filename),                   // 文件擴展名
        ‘isimage‘    =>    $info->getInfo($name=‘key‘)==‘image‘?1:0,   // 是否為圖片文件
        ‘create_time‘=>    time(),                                     // 上傳時間
        ‘uploadip‘   =>    get_client_ip(),                            // 上傳ip
        ‘authcode‘   =>    uniqid(),                                   // 唯壹碼
        ‘create_uid‘ =>    Session::get(‘uid‘),                        // 上傳文件的用戶id
        ‘siteid‘     =>    1,                                          // 站點id,備用
    );
    $attachment = model(‘Attachment‘);
    $attachment-> save($data);
}

attachment表结构：

CREATE TABLE `hk_attachment` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `module` char(15) NOT NULL,
  `cate_id` smallint(5) unsigned NOT NULL DEFAULT ‘0‘,
  `filename` char(50) NOT NULL,
  `filepath` char(200) NOT NULL,
  `filesize` int(10) unsigned NOT NULL DEFAULT ‘0‘,
  `fileext` char(10) NOT NULL,
  `isimage` tinyint(1) unsigned NOT NULL DEFAULT ‘0‘,
  `isthumb` tinyint(1) unsigned NOT NULL DEFAULT ‘0‘,
  `downloads` mediumint(8) unsigned NOT NULL DEFAULT ‘0‘,
  `userid` mediumint(8) unsigned NOT NULL DEFAULT ‘0‘,
  `create_time` int(10) unsigned NOT NULL DEFAULT ‘0‘,
  `uploadip` char(15) NOT NULL,
  `status` tinyint(1) NOT NULL DEFAULT ‘0‘,
  `authcode` char(32) NOT NULL,
  `siteid` smallint(5) unsigned NOT NULL DEFAULT ‘0‘,
  `desc` varchar(255) DEFAULT NULL COMMENT ‘图片简介‘,
  `pic_tag` varchar(255) DEFAULT NULL,
  `author` varchar(20) DEFAULT NULL,
  `size` varchar(30) DEFAULT NULL,
  `we_status` int(11) DEFAULT ‘0‘,
  `title` varchar(30) DEFAULT NULL,
  `update_uid` int(10) DEFAULT NULL,
  `create_uid` int(10) DEFAULT NULL,
  `click` int(10) DEFAULT ‘1‘,
  `mobao` varchar(255) DEFAULT NULL,
  `authority` tinyint(1) DEFAULT ‘1‘,
  `update_time` int(10) DEFAULT NULL,
  `from_num` varchar(100) DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `authcode` (`authcode`)
) ENGINE=MyISAM AUTO_INCREMENT=56 DEFAULT CHARSET=utf8;