后台用的INSPINIA框架的模板,里面有,dropzone.js
dropzone是一个可以拖文件上传的js.
拖进去,就上传了。我在页面上,写了一个保存已经上传的文件的p_w_picpath3,p_w_picpath4.
这就需要改写一下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="p_w_picpath3" value="{$info.pictureurls|default=''}"/>
<input type="text" class="form-control hidden" id="p_w_picpath4"/>
<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 = $('#p_w_picpath3').val(); var hasfilename4 = $('#p_w_picpath4').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; } $( '#p_w_picpath3').val(newfilename3); $( '#p_w_picpath4').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->p_w_picpath_dir. DS,'');
if($info){
// 輸出 42a79759f284b767dfcb2a0197904287.jpg
$filename = $info->getInfo($name='name'); // 原文件名
$savename = $info->getSavename();
$path['filename'] = $filename;
$path['name'] = DS . 'uploads/' .$this->p_w_picpath_dir. DS . $savename;
// 保存文件到數據庫 附件表
$pathname = $path['name'];
$p_w_upload = model('Attachment');
$p_w_upload -> savep_w_upload($info,$filename,$pathname);
// 返回需要的信息
echo json_encode($path);
}else{
// 上傳失敗獲取錯誤信息
return $this->error($file->getError()) ;
}
}
}
上面的:savep_w_upload,是另一个方法,写在model里的。
// 文件保存到數據庫附件表
public function savep_w_upload($info,$filename,$pathname){
$data = array (
'module' => Request::instance()->controller(), // 控制器名
'filename' => $filename, // 原文件名
'filepath' => $pathname, // 上傳後的新文件名
'filesize' => $info->getInfo($name='size'), // 文件大小
'fileext' => get_extension($filename), // 文件擴展名
'isp_w_picpath' => $info->getInfo($name='key')=='p_w_picpath'?1:0, // 是否為圖片文件
'create_time'=> time(), // 上傳時間
'uploadip' => get_client_ip(), // 上傳ip
'authcode' => uniqid(), // 唯壹碼
'create_uid' => Session::get('uid'), // 上傳文件的用戶id
'siteid' => 1, // 站點id,備用
);
$p_w_upload = model('Attachment');
$p_w_upload-> save($data);
}
p_w_upload表结构:
CREATE TABLE `hk_p_w_upload` (
`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,
`isp_w_picpath` 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;
---------- 招募未来大神 -----------------------
如果您有利他之心,乐于帮助他人,乐于分享
如果您遇到php问题,百度且问了其他群之后仍没得到解答
欢迎加入,PHP技术问答群,QQ群:292626152
教学相长!帮助他人,自己也会得到提升!
为了珍惜每个人的宝贵时间,请大家不要闲聊。
愿我们互相帮助,共同成长!
加入时留言暗号,php,ajax,thinkphp,yii...
转载于:https://blog.51cto.com/phpervip/1930382