使用WEUI uploader上传图片，博主费了很大的劲总算找到完整的了，并且带后台接收代码，有需要的朋友拿去吧，亲测可用！
一、html代码
<
link
rel
=
"stylesheet"
href
=
"https://res.wx.qq.com/open/libs/weui/0.3.0/weui.css"
/>
|
<
div
class
=
"weui_uploader"
>
<
div
class
=
"weui_uploader_hd weui_cell"
>
<
div
class
=
"weui_cell_bd weui_cell_primary"
>图片上传</
div
>
<
div
class
=
"weui_cell_ft js_counter"
>0/6</
div
>
</
div
>
<
div
class
=
"weui_uploader_bd"
>
<
ul
class
=
"weui_uploader_files"
>
<!-- 预览图插入到这 -->
</
ul
>
<
div
class
=
"weui_uploader_input_wrp"
>
<
input
class
=
"weui_uploader_input js_file"
type
=
"file"
accept
=
"image/jpg,image/jpeg,image/png,image/gif"
multiple
=
""
></
div
>
</
div
>
</
div
>
|
二、JS代码
$(
function
() {
// 允许上传的图片类型
var
allowTypes = [
'image/jpg'
,
'image/jpeg'
,
'image/png'
,
'image/gif'
];
// 1024KB，也就是 1MB
var
maxSize = 1024 * 1024;
// 图片最大宽度
var
maxWidth = 300;
// 最大上传图片数量
var
maxCount = 6;
$(
'.js_file'
).on(
'change'
,
function
(event) {
var
files = event.target.files;
// 如果没有选中文件，直接返回
if
(files.length === 0) {
return
;
}
for
(
var
i = 0, len = files.length; i < len; i++) {
var
file = files[i];
var
reader =
new
FileReader();
// 如果类型不在允许的类型范围内
if
(allowTypes.indexOf(file.type) === -1) {
$.weui.alert({text:
'该类型不允许上传'
});
continue
;
}
if
(file.size > maxSize) {
$.weui.alert({text:
'图片太大，不允许上传'
});
continue
;
}
if
($(
'.weui_uploader_file'
).length >= maxCount) {
$.weui.alert({text:
'最多只能上传'
+ maxCount +
'张图片'
});
return
;
}
reader.onload =
function
(e) {
var
img =
new
Image();
img.onload =
function
() {
// 不要超出最大宽度
var
w = Math.min(maxWidth, img.width);
// 高度按比例计算
var
h = img.height * (w / img.width);
var
canvas = document.createElement(
'canvas'
);
var
ctx = canvas.getContext(
'2d'
);
// 设置 canvas 的宽度和高度
canvas.width = w;
canvas.height = h;
ctx.drawImage(img, 0, 0, w, h);
var
base64 = canvas.toDataURL(
'image/png'
);
// 插入到预览区
var
$preview = $(
'<li class="weui_uploader_file weui_uploader_status" style="background-image:url('
+ base64 +
')"><div class="weui_uploader_status_content">0%</div></li>'
);
$(
'.weui_uploader_files'
).append($preview);
var
num = $(
'.weui_uploader_file'
).length;
$(
'.js_counter'
).text(num +
'/'
+ maxCount);
// 然后假装在上传，可以post base64格式，也可以构造blob对象上传，也可以用微信JSSDK上传
var
progress = 0;
function
uploading() {
$preview.find(
'.weui_uploader_status_content'
).text(++progress +
'%'
);
if
(progress < 100) {
setTimeout(uploading, 30);
}
else
{
// 如果是失败，塞一个失败图标
//$preview.find('.weui_uploader_status_content').html('<i class="weui_icon_warn"></i>');
$preview.removeClass(
'weui_uploader_status'
).find(
'.weui_uploader_status_content'
).remove();
}
}
setTimeout(uploading, 30);
};
img.src = e.target.result;
$.post(
"/wap/uploader.php"
, { img: e.target.result},
function
(res){
if
(res.img!=
''
){
alert(
'upload success'
);
$(
'#showimg'
).html(
'<img src="'
+ res.img +
'">'
);
}
else
{
alert(
'upload fail'
);
}
},
'json'
);
};
reader.readAsDataURL(file);
}
});
});
|
三、PHP代码
$img
= isset(
$_POST
[
'img'
])?
$_POST
[
'img'
] :
''
;
// 获取图片
list(
$type
,
$data
) =
explode
(
','
,
$img
);
// 判断类型
if
(
strstr
(
$type
,
'image/jpeg'
)!=
''
){
$ext
=
'.jpg'
;
}
elseif
(
strstr
(
$type
,
'image/gif'
)!=
''
){
$ext
=
'.gif'
;
}
elseif
(
strstr
(
$type
,
'image/png'
)!=
''
){
$ext
=
'.png'
;
}
// 生成的文件名
$photo
=
"../upload/"
.time().
$ext
;
// 生成文件
file_put_contents
(
$photo
,
base64_decode
(
$data
), true);
// 返回
header(
'content-type:application/json;charset=utf-8'
);
$res
=
array
(
'img'
=>
$photo
);
echo
json_encode(
$res
);
|