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

在手机端或者微信端的论坛或者报名等界面需要上传头像或者多张图片信息等。这个时候就需要用到手机端的上传图片功能，现在微信端也可以使用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)

}

})

})

};

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