标签:php 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;
dropzone拖动文件上传在thinkphp5中应用一个实例
标签:php dropzone
原文地址:http://phpervip.blog.51cto.com/11075781/1930382