官网demo链接：http://www.uploadify.com/demos/
html:
|
1
2
3
4
5
6
7
8
9
10
|
<
div
class
=
"row cl"
>
<
label
class
=
"form-label col-3"
><
span
class
=
"c-red"
>*</
span
>图片：</
label
>
<
div
class
=
"formControls col-5"
>
<
input
id
=
"file_upload"
name
=
"file_upload"
type
=
"file"
multiple
=
"true"
>
<
div
class
=
"preview"
>
<
ul
id
=
"previewImgs"
></
ul
>
</
div
>
<
div
class
=
"col-4"
> </
div
>
</
div
>
</
div
>
|
需要引入的js、css:
|
1
2
3
|
<link type=
"text/css"
rel=
"stylesheet"
href=
"/public/uploadify/uploadify.css"
>
<script type=
"text/javascript"
src=
"/public/uploadify/jquery-1.8.2.min.js"
></script>
<script type=
"text/javascript"
src=
"/public/uploadify/jquery.uploadify.min.js"
></script>
|
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
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<script type=
"text/javascript"
>
$(
function
() {
$(
'#file_upload'
).uploadify({
'formData'
: {
'<?php echo session_name();?>'
:
'<?php echo session_id();?>'
},
'uploader'
:
'{:U("uploads")}'
+
"?session_id=<?php echo session_id(); ?>"
,
'swf'
:
'__PUBLIC__/admin/uploadify/uploadify.swf'
,
'auto'
:
true
,
//是否自动开始上传
'debug'
:
false
,
// 是否开启浏览器调试
'buttonText'
:
'请选择图片'
,
// 上传按钮文字
'fileTypeExts'
:
'*.jpg;*.gif;*.bmp;*.png;*.jpeg'
,
//允许的图片类型
'fileSizeLimit'
:
'2MB'
,
// 允许的单张图片的自大值
'multi'
:
false
,
//是否允许多张图片一起上传
'uploadLimit'
:6,
//允许上传数量
'successTimeout'
: 10,
//等待服务器响应时间
'removeTimeout'
: 0.2,
//成功显示时间
'onFallback'
:
function
(){
alert(
"您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。"
);
},
'onUploadSuccess'
:
function
(file,data,response){
//alert(data);
data = $.parseJSON(data);
var
Image =
"<div style='display:inline-block'><img src='"
+ data.thumbpath +
"' class='img' style='margin-top:10px;width:150px;height:150px;position: relative;'/>\
<input type='hidden' name='image[]' id='image' value='"
+ data.imgpath +
"' />\
<a class='del' onclick=goDel(this,'"
+data.thumbpath+
"')>删除</a></div>"
;
if
($(
"a[class=del]"
).length>=5){
alert(
"暂不支持5条以上！"
);
}
else
{
$(
"#previewImgs"
).append(Image);
}
}
});
});
// ajax 删除预览列表中的一张图片
function
goDel(objdom,src){
$(objdom).parent().remove();
return
false
;
}
</script>
|
php后台处理图片返回JSON数据：
|
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
|
public
function
uploads (){
$upload
=
new
\Think\Upload();
$upload
->exts =
array
(
'jpg'
,
'gif'
,
'png'
,
'jpeg'
);
$upload
->rootPath =
'./Uploads/'
;
$upload
->savePath =
'/image/commodity/'
;
if
(!
is_dir
(
$upload
->savePath)) {
mkdir
(
$upload
->savePath,0777,TRUE);
}
$info
=
$upload
->upload();
if
(!
$info
) {
echo
json_encode(
$upload
->getError());
}
else
{
// 上传成功
$info
[
'Filedata'
][
'savepath'
] =
str_replace
(
'image'
,
'Uploads/image'
,
$info
[
'Filedata'
][
'savepath'
]);
$path
=
$info
[
'Filedata'
][
'savepath'
] .
$info
[
'Filedata'
][
'savename'
];
$image
=
new
\Think\Image();
$image
->open(
'.'
.
$path
);
$thumbpath
=
'.'
.
$info
[
'Filedata'
][
'savepath'
] .
$info
[
'Filedata'
][
'savename'
];
//$image->thumb(148, 84)->save($thumbpath);
$path
= ltrim(
$path
,
'.'
);
$thumbpath
= ltrim(
$thumbpath
,
'.'
);
$data
=
array
(
'imgpath'
=>
$path
,
'thumbpath'
=>
$thumbpath
);
echo
json_encode(
$data
);
}
}
|
注意 : 上传图片时session丢失, 只需要修改thinkphp/conf/convention.php中，将VAR_SESSION_ID前面的注释去掉，然后在客户端这样配置下：
'uploader' : '{:U("uploads")}'+ "?session_id=<?php echo session_id(); ?>",
即可.
参考链接: http://m.blog.csdn.net/qq_29845761/article/details/49803427
本文转自噼里啪啦啦 51CTO博客，原文链接：http://blog.51cto.com/pilipala/1831613，如需转载请自行联系原作者
