在手机端或者微信端的论坛或者报名等界面需要上传头像或者多张图片信息等。这个时候就需要用到手机端的上传图片功能,现在微信端也可以使用input file功能了。多图上传使用的都是ajax方式。ajax返回的是标准的json格式,json包括三个字段 error(为0正确上传成功) msg(正确或者错误的提示信息) info(正确的时候返回图片的地址信息)ajax图片上传依赖于jquery。示例demo图片如下,直接上代码。请理解后使用。谢谢。

手机Wap微信端上传单图和上传多图的DEMO

.input-file{opacity:0;width:100px;height:100px;}

.upload-loading { position: absolute; z-index: 4; left: 0; top: 0; bottom: 0; right: 0; filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#3FFFFFFF', endColorstr='#3FFFFFFF');background:rgba(255,255,255,0.25); border-radius: 0.1rem;}

.upload-loading i { display: block; width: 100%; height: 5%; margin: 93% 0 2% 0; background: #4FC0E8; animation: optionLoading 0.5s ease-in-out; -webkit-animation:optionLoading 1s ease-in-out;}

发表新帖子

添加缩略图:300px宽 x 300px高为佳

作品原图:点击左侧图标上传多张作品原图

$(function() {

$('#file_logo').ajaxUploadImage({

url: "/comm/upload-img-zepto",

//start: function(e) { e.parent().after('

success: function(e, json) {

if (json.error != '0') { alert(json.msg); return false; }

$('#img_logo').val(json.info);

$('.img_logo').html('');

e.parent().siblings(".upload-loading").remove();

}

});

$('#file_banner').ajaxUploadImage({

url: "/comm/upload-img-zepto",

//start: function(e) { e.parent().after('

success: function(e, json) {

if(json.error != '0') { alert(json.msg); return false; }

var old_banner = $('#img_banner').val();

if(old_banner){

var new_banner = old_banner +','+json.info;

}else{

var new_banner = json.info;

}

$('#img_banner').val(new_banner);

$('.img_banner').append('');

e.parent().siblings(".upload-loading").remove();

}

});

});

$.fn.ajaxUploadImage = function(e) {

var t = {

url: "",

data: {},

start: function() {},

success: function() {}

};

var e = $.extend({}, t, e);

var a;

function n() {

if (a === null || a === undefined) {

alert("请选择您要上传的文件!");

return false

}

return true

}

return this.each(function() {

$(this).on("change", function() {

var t = $(this);

e.start.call("start", t);

a = t.prop("files")[0];

if (!n) return false;

try {

var r = new XMLHttpRequest;

r.open("post", e.url, true);

r.setRequestHeader("X-Requested-With", "XMLHttpRequest");

r.onreadystatechange = function() {

if (r.readyState == 4) {

returnDate = $.parseJSON(r.responseText);

e.success.call("success", t, returnDate)

}

};

var i = new FormData;

for (k in e.data) {

i.append(k, e.data[k])

}

i.append(t.attr("name"), a);

result = r.send(i)

} catch (o) {

console.log(o);

alert(o)

}

})

})

};

你现在的气质里,藏着你走过的路、读过的书和爱过的人。

php微信手机端上传图片,手机Wap微信端上传单图和上传多图的DEMO相关推荐

  1. 企业微信手机端可以退出吗?会影响电脑端企业微信吗?

    现在很多企业选择企业微信作为移动办公软件,企业微信打破了传统办公软件的地域限制,可以在手机端和电脑端进行登录,随时可以进行工作事宜. 前言 现在很多企业选择企业微信作为移动办公软件,企业微信打破了传统 ...

  2. php手机网站底部导航代码,jQuery微信手机端底部弹出导航菜单列表代码

    jQuery微信手机端底部弹出导航菜单列表代码 jQuery微信手机端底部弹出导航菜单列表代码是一款网页底部点击按钮弹出浮动的图标菜单列表的手机特效. js代码 function showList() ...

  3. OBS如何配置推流到RTMP流媒体服务直播视频文件直播桌面操作让微信手机端电脑浏览器无插件直播观看

    OBS如何配置推流到RTMP流媒体服务直播视频文件直播桌面操作让微信手机端电脑浏览器无插件直播观看 1.下载安装OBS 1.1.官网下载 1.2.应用搜索下载 2.下载安装RTMP流媒体服务 3.获得 ...

  4. php 九宫格验证码,PHP+Ajax微信手机端九宫格抽奖实例

    PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现.支持可以设置中奖概率等. 奖品列表 - Ajax抽奖 $.post("ajax. ...

  5. 仿微信手机端支付页面代码可改余额

    介绍: 高仿的微信手机端支付页面代码可改余额,就自己看看装个样子,别去骗人啊,哈哈哈哈,穷人只能这样玩玩 网盘下载地址: http://kekewl.org/uGEBzURdmBF0 图片:

  6. 手机端实现手机键盘搜索

    <!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name=&q ...

  7. 移动端/手机端 完成图片旋转 压缩 剪裁 上传

    本篇文章主要介绍移动端/手机端图片的旋转.压缩.剪裁.上传 这个功能的实现已经好了几次方案流程了,对最终的方案流程进行简述 实现功能的主要方法/思想 1.图片的选取主要是通过input实现 2.图片的 ...

  8. phpcms v9电脑pc站+手机wap移动端双模板共用数据库数据同步可同步生成静态文件

    phpcms v9电脑pc站+手机wap移动端双模板共用数据库数据同步可同步生成静态文件,并且电脑站和手机站网址页面一一对应,非插件,程序二次开发版. 详情如下: 1.phpcms v9电脑版+手机版 ...

  9. python操作微信手机端下载_【python】自动化连接和操作手机微信

    1. 环境配置 JDK Android SDK Appium MuMu 1.1. JDK 1.1.1. 下载安装 去华为云镜像下载JDK,我下载的版本是:jdk-8u181-windows-x64.e ...

最新文章

  1. 上传图片,多图上传,预览功能,js原生无依赖
  2. java.lang.UnsatisfiedLinkError
  3. 指针增量和数组的关系,指针偏移的补充,(重要面试),gdp调试,将数组中的n个元素逆序存放
  4. initrd.img解压和压缩
  5. java集合的某项相加_java8实现list集合中按照某一个值相加求和,平均值等操作代码...
  6. os.environ['TF_CPP_MIN_LOG_LEVEL'] = '2' 无效
  7. oracle两表,有什么方法对Oracle两张表的数据比较呢?
  8. jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果
  9. WPF ImageButton
  10. 【工具类】使用ffmpeg下载视频
  11. LintCode 842: Origami
  12. php获取qq音乐的api类,QQ音乐api接口梳理
  13. 2.3.1 浮点数的表示
  14. shell脚本中 EOF的意思
  15. 台式机显示屏作为笔记本显示屏的设置
  16. uniapp nvue运用map组件实现地图标注以及检索周边地址
  17. 关于@Autowired属性飘红
  18. uint与int区别
  19. Docker私有仓库搭建笔记(四)
  20. 火狐浏览器模拟微信浏览器教程

热门文章

  1. 关于solidity解析abi方法,入参和结果字节码
  2. 给discuz x增加后台菜单管理功能
  3. 开发webgl应用时,cesium快速定位相机角度、相机位置的方法
  4. 区块链工程师薪资竟然被AI吊打?最新出炉的《2018区块链招聘分析报告》,释放了哪些重要信号?...
  5. 重磅!L4级自动驾驶硬件方案来啦!
  6. Java与es8实战之二:Springboot集成es8的Java Client
  7. 量子笔记:单比特量子门、泡利矩阵
  8. CSS——字体图标、平面转换、缩放
  9. 关于Microsoft Edge 浏览器无法使用selenium调用问题
  10. 软考证书可积分落户、评职称、抵扣个税等,快来考一个吧!