图片来自头条图片库
本人新手程序猿，第一次做微信开发，望各位大牛指导。现在开始，也没什么说的直接上代码
js部分
<title>图片上传</title>
<link rel=”stylesheet” href=””/>
<script type=”text/javascript” src=”${contextPath}/js2/jquery/jquery-1.7.2.min.js”></script>
<script type=”text/javascript” src=”${contextPath}/js2/jquery/ajaxfileupload.js”></script>
<script>
$(function(){
document.body.setAttribute(‘ontouchstart’, ”);
var u = navigator.userAgent;
if (u.indexOf(‘Android’) > -1 || u.indexOf(‘Linux’) > -1) {//安卓手机
jQuery(“#uploaderInput”).attr(“capture”,”camera”);
}
var tmpl = ‘<li class=”weui-uploader__file” des=”#des#” style=”background-image:url(#url#)”></li>’,
$gallery = $(“#gallery”), $galleryImg = $(“#galleryImg”),
$uploaderInput = $(“#uploaderInput”),
$uploaderFiles = $(“#uploaderFiles”)
;
$(“#uploaderInput”).live(“change”, function(e){
jQuery(“#loadingToast”).css(“display”,”block”);
jQuery.ajaxFileUpload({
type:’post’,
url: “${contextPath}/file/uploadFile”,
data:{AID:jQuery(“#id”).val()},
secureuri: false, //一般设置为false
fileElementId:”uploaderInput”, // 上传文件的id、name属性名
dataType: “json”, //返回值类型，一般设置为json、application/json
success: function(data){
if(data.success){
var id=data.ids.split(“,”);
var src=data.srcs.split(“,”);
for(var i=0;i<id.length-1;i++){
$uploaderFiles.append($(tmpl.replace(‘#url#’, src[i]).replace(“#des#”,id[i])));
jQuery(“#loadingToast”).css(“display”,”none”);
}
}
}
});
});
$uploaderFiles.on(“click”, “li”, function(){
$galleryImg.attr(“style”, this.getAttribute(“style”));
$galleryImg.parent().find(“a”).attr(“id”,this.getAttribute(“des”));
$gallery.fadeIn(100);
});
$gallery.on(“click”, function(){
$gallery.fadeOut(100);
});
});
function delImg(t){
var id=jQuery(t).attr(“id”);
jQuery.ajax({
type: ‘post’,
url: ‘${contextPath}/mobile/active/delImg’,
data: {ID:id},
dataType: ‘json’,
success: function(data){
if(data.success){
jQuery(“#uploaderFiles”).find(“[des='”+id+”‘]”).remove();
}else{
alert(data.msg);
}
},
});
}
function save(){
var id=jQuery(“#id”).val();
var content=jQuery(“#content”).val();
if(content==””||content==null){
alert(“内容还没有填！”);
}else{
jQuery.ajax({
type: ‘post’,
url: ‘${contextPath}/mobile/active/saveContent’,
data: {ID:id,CONTENT:content},
dataType: ‘json’,
success: function(data){
if(data.success){
alert(data.msg);
}else{
alert(data.msg);
}
},
});
}
}
</script>
html部分
<div class=”page”>
<div class=”page__bd”>
<div class=”weui-gallery” id=”gallery”>
<span class=”weui-gallery__img” id=”galleryImg”></span>
<div class=”weui-gallery__opr”>
<a href=”javascript:void(0)” onClick=”delImg(this)” class=”weui-gallery__del”>
<i class=”weui-icon-delete weui-icon_gallery-delete” ></i>
</a>
</div>
</div>
<div class=”weui-cells weui-cells_form”>
<div class=”weui-cell”>
<div class=”weui-cell__bd”>
<div class=”weui-uploader”>
<div class=”weui-uploader__hd”>
<p class=”weui-uploader__title”>图片上传</p>
</div>
<div class=”weui-uploader__bd”>
<ul class=”weui-uploader__files” id=”uploaderFiles”>
<#list imgList as img>
<li class=”weui-uploader__file” des=”${(img.id)!}”
style=”background-image:url(${(img.src)!})”></li>
</#list>
</ul>
<div class=”weui-uploader__input-box”>
<input id=”uploaderInput” class=”weui-uploader__input”
name=”uploaderInput” type=”file” accept=”image/*” multiple=”multiple”
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class=”weui-cells__title”>内容</div>
<div class=”weui-cells weui-cells_form”>
<div class=”weui-cell”>
<div class=”weui-cell__bd”>
<textarea class=”weui-textarea” id=”content” name=”content”
placeholder=”请输入文本” rows=”3″>${(content)!}</textarea>
<input type=”hidden” id=”id” name=”ID” value=”${(AID)!}”/>
</div>
</div>
<div class=”page__bd page__bd_spacing”>
<a href=”javascript:void(0);” onClick=”save()” class=”weui-btn weui-btn_warn”>保存</a>
</div>
</div>
<!– loading toast –>
<div id=”loadingToast” style=”display:none;”>
<div class=”weui-mask_transparent”></div>
<div class=”weui-toast”>
<i class=”weui-loading weui-icon_toast”></i>
<p class=”weui-toast__content”>图片上传中</p>
</div>
</div>
后端的话根据自己所用的框架写，我用的是jFinal框架自带的
String url = “/upload/txFile/”;
List<UploadFile> upfilelist = this.getFiles();
String realPath = this.getRequest().getRealPath(“/”);
String ids=””;
String srcs=””;
Map<String,Object> jsonMap = new HashMap<String,Object>();
if(upfilelist != null && upfilelist.isEmpty() == false){
for(int i=0;i<upfilelist.size();i++){
File file = upfilelist.get(i).getFile();
String filedataFileName = upfilelist.get(i).getOriginalFileName();
String filetype = filedataFileName.substring(filedataFileName.lastIndexOf(“.”)+1).toLowerCase();
String uid = System.currentTimeMillis() + “”;
java.io.File f = new File(realPath + url + uid+”.”+filetype);
if(f.exists())f.delete();
file.renameTo(f);
ImgCompress imgCom = new ImgCompress(realPath+url +f.getName(),realPath+url+f.getName());
imgCom.resizeFix(1200, 1200);
ActiveImage p=new ActiveImage();
p.set(“id”, uid);
p.set(“src”, url + f.getName());
p.set(“active_id”, this.getPara(“AID”));
p.set(“create_date”, new Date());
p.set(“type”, filetype);
p.set(“width”, imgCom.getWidth());
p.set(“height”, imgCom.getHeight());
if(p.save()){
ids+=uid+”,”;
srcs+=url + f.getName()+”,”;
}
}
jsonMap.put(“success”, true);
jsonMap.put(“ids”, ids);
jsonMap.put(“srcs”, srcs);
}else{
jsonMap.put(“error”,1);
jsonMap.put(“message”,”上传文件失败。”);
}
this.renderText(new Gson().toJson(jsonMap).toString(),”text/html”);
上传的时候做了压缩处理，就这些吧，有什么问题或指教的地方欢迎留言讨论。
