让微擎模块万能表单支持普通浏览器上传文件

      发布在:后端技术      评论:0 条评论

image

最近采用的微擎模块万能表单无法在手机端普通浏览器上传图片,查看代码发现只考虑了微信下的上传,于是对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元立即购买

相关文章

要通过伪静态规则禁止上传目录 uploadfile 下的 PHP 脚本执行权限,请根据你的服务器类型(Apache 或 Nginx 或 **IIS选择以下配置方法:一、Apache 服务器(使用 .htaccess 文件)在 uploadfile 目录下创建或修改 .htaccess 文件。添加以下规则(根据 Apache 版本选择配置):Apache 2.4+ 语法:

接朋友需求,需要实现帝国cms7.5发布文章或编辑文章的时候选择图片改成直接上传图片实现方法,基于原来是直接弹窗的,找到文件e/admin/AddNews.php在前增加如下代码

如果需要使用上传功能,必须按照fileinfo扩展阿里虚拟主机的设置php函数chmod设置选择启动,参考如下

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-...

热门推荐