最近采用的微擎模块万能表单无法在手机端普通浏览器上传图片,查看代码发现只考虑了微信下的上传,于是对upimg函数添加h5浏览器的上传方法。
具体实现方式如下:
<script type="text/javascript" src="{$_W['siteroot']}app/resource/js/lib/jquery-1.11.1.min.js"></script>
<script type="application/javascript">
jQuery.noConflict();
</script>
<!--引入jUploader上传控件-->
<script type="text/javascript" src="{MODULE_URL}template/weui/js/jUploader.js"></script>
jQuery.jUploader.setDefaults({
cancelable: false, // 可取消上传
allowedExtensions: ['jpg', 'png', 'gif','jpeg'], // 只允许上传图片
messages: {
upload: '上传',
cancel: '取消',
emptyFile: "{file} 为空,请选择一个文件.",
invalidExtension: "{file} 后缀名不合法. 只有 {extensions} 是允许的.",
onLeave: "文件正在上传,如果你现在离开,上传将会被取消。"
}
});
//判断是否微信登陆
function isWeiXin() {
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
return true;
} else {
return false;
}
}
function upimg(obj,id){
var images = {
localId: [],
serverId: []
};
if (isWeiXin()) {
// alert(" 是来自微信内置浏览器")
wx.chooseImage({
count: 1,
sourceType: ['album', 'camera'],
success:function(res){
images.localId = res.localIds;
var i = 0, length = images.localId.length;
var wxUpload = function() {
wx.uploadImage({
localId: images.localId[i],
isShowProgressTips: 1,
success: function (res) {
i++;
images.serverId.push(res.serverId);
var url = "{php echo $this->createMobileUrl('uploads',array('type'=>'image'));}&serverId=" + res.serverId + "&localId=" + i;
$.post(url, function(dat){
var dat = eval("("+dat+")");
if (dat.status == 'success') {
$.toast(dat.message, "success");
$('input[name="'+obj.getAttribute("data")+'"]').val(tomedia(dat.path));
document.getElementById('show'+id).src = tomedia(dat.path);
}else{
$.toast(dat.message, "cancel");
document.getElementById('show'+id).src = "";
}
});
if(i < length){
wxUpload();
}
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
};
wxUpload();
}
});
} else {
// alert("不是来自微信内置浏览器")
console.log(jQuery(obj).data('blzx')===undefined);
if(jQuery(obj).data('blzx')===undefined){
console.log('jQuery.jUploader');
jQuery.jUploader({
button: jQuery(obj), // 这里设置按钮id
action: "{php echo $this->createMobileUrl('pcupload')}", // 这里设置上传处理接口
onUpload: function (fileName) {
},
// 上传完成事件
onComplete: function (fileName, response) {
if (response.status == 'success') {
$.toast(response.message, "success");
$('input[name="'+obj.getAttribute("data")+'"]').val(tomedia(response.path));
document.getElementById('show'+id).src = tomedia(response.path);
}else{
$.toast(response.message, "cancel");
document.getElementById('show'+id).src = "";
}
},
});
jQuery(obj).data('blzx',1);
jQuery(obj).children("input").trigger("click");
}
}
}
后台接收方式:
游客,如果您要查看本帖隐藏内容需支付¥0.50元立即购买
require(['clipboard'], function(Clipboard){ var clipboardRewrite = new Clipboard(".copy", { text: function(v) { return $(v).attr('data-clipboard-text'); }
PbootCMS模板上传后导致前台页面错乱的原因,并提供解决这个问题的一些技术方法。我们将探讨如何避免模板上传引起的布局问题,保证前台页面的正确显示。
#change_cover input{ font-size: 0;//解决按钮展示手型 cursor: pointer;}/*解决无法点击问题*/#change_cover div:nth-...
var $image = $('#image'),avatarObj=$('input[name="avatar"]'),uploderObj=$("#avatar_u...
给input框的font-size设置成0 即可成功设置成pointer样式重新上传
解决kindeditor编辑器因为flash导致机制图片批量上传按钮看不见的问题下载文件直接覆盖原来文件链接: https://pan.baidu.com/s/1CC34nAvxEYCkWFuIx_3...