后台用的INSPINIA框架的模板，里面有，dropzone.js
dropzone是一个可以拖文件上传的js.
拖进去，就上传了。我在页面上，写了一个保存已经上传的文件的image3,image4.
这就需要改写一下dropzone.js.
代码如下：
前端：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<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>
|
|
1
2
3
4
5
6
7
8
|
<
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里
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
// 这里加上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"
);
}
},
|
后端：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
// 多圖上傳 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里的。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// 文件保存到數據庫附件表
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表结构：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
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;
|
---------- 招募未来大神 -----------------------
如果您有利他之心，乐于帮助他人，乐于分享
如果您遇到php问题，百度且问了其他群之后仍没得到解答
欢迎加入，PHP技术问答群，ＱＱ群：292626152
教学相长！帮助他人，自己也会得到提升！
为了珍惜每个人的宝贵时间，请大家不要闲聊。
愿我们互相帮助，共同成长！
加入时留言暗号,php,ajax,thinkphp,yii...
本文转自phpervip 51CTO博客，原文链接：http://blog.51cto.com/phpervip/1930382
，如需转载请自行联系原作者
