用了很多方法，但是用h5自带的 方法 效果很不好，由于是在微信中展示的页面。所以用了微信的组件：
贴代码：
微信sdk 代码略
<script src="jquery.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
wx.config({
debug: false,
appId: '<?php echo $signPackage["appId"];?>',
timestamp: <?php echo $signPackage["timestamp"];?>,
nonceStr: '<?php echo $signPackage["nonceStr"];?>',
signature: '<?php echo $signPackage["signature"];?>',
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage'
]
});
// 在这里调用 API
var tupian = "";
// 5.1 拍照、本地选图
var images = {
localId: [],
serverId: []
};
document.querySelector('#chooseImage').onclick = function () {
wx.chooseImage({
success: function (res) {
images.localId = res.localIds;
alert('已选择 ' + res.localIds.length + ' 张图片');
/* *** 选择结束 上传开始 。 */
var i = 0, length = images.localId.length;
images.serverId = [];
wx.uploadImage({
localId: images.localId[i],
success: function (res) {
i++;
alert('已上传：' + i + '/' + length);
images.serverId.push(res.serverId);
tupian = res.serverId;
document.getElementById("img").innerHTML="<img src='http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=<? echo $jssdk->getAccessToken(); ?>&media_id="+tupian+"' />";
document.getElementById("imgdiv").innerHTML="http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=<? echo $jssdk->getAccessToken(); ?>&media_id="+tupian;
if (i < length) {
upload();
}
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
/* * * */
}
});
};
</script>
在上面的代码中，上传图片的图片还在微信的 服务器上，提交订单后，可以根据微信服务上图片的地址，保存包本地服务器即可。
