使用WEUI uploader上传图片

使用WEUI uploader上传图片，博主费了很大的劲总算找到完整的了，并且带后台接收代码，有需要的朋友拿去吧，亲测可用！

一、html代码

<linkrel="stylesheet"href="https://res.wx.qq.com/open/libs/weui/0.3.0/weui.css"/>

<divclass="weui_uploader">
<divclass=>
<divclass=>图片上传</div>
<divclass=>0/6</div>
</div>
<divclass="weui_uploader_bd">
<ulclass="weui_uploader_files">
</ul>
<divclass="weui_uploader_input_wrp">
<inputclass=type="file"accept="image/jpg,image/jpeg,image/png,image/gif"multiple=""></div>
</div>
</div>

二、JS代码

$(function
var'image/jpg''image/jpeg''image/png''image/gif'];
var
var
var
$('.js_file').on('change'function
var
if
return;
}
for(var
var
varnewFileReader();
if
'该类型不允许上传'});
continue;
}
if
'图片太大，不允许上传'});
continue;
}
if($('.weui_uploader_file'
'最多只能上传''张图片'});
return;
}
function
varnewImage();
function
var
var
var'canvas');
var'2d');
var'image/png');
var);
$('.weui_uploader_files').append($preview);
var'.weui_uploader_file').length;
$('.js_counter''/'
var
function
$preview.find('.weui_uploader_status_content''%');
if
}
else{
$preview.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove();
}
}
};
$.post("/wap/uploader.php"function(res){
if(res.img!=''){
alert();
$('#showimg').html('">');
}else{
alert();
}
},'json');
};
reader.readAsDataURL(file);
}
});
});

三、PHP代码

$img$_POST['img'$_POST['img'

标签

WeUI

传照片