框架:jquery+jfinal
前台代码:
<span class=‘label‘>营业执照照片:</span> <div style=‘display:inline-block;vertical-align:top;‘> <label class=upload for=file>上传</label> <span class=‘pName‘></span> <span class=msg></span> <input name=license_photo style=‘display:none;‘ /> <input id=file name=file type=file accept=‘.jpg,.png‘ style=‘visibility: hidden‘ /> <div class=image_preview> <span class=‘add_span‘> <span class=‘add_img‘></span> <span class=‘add_msg‘>请上传您的营业执照照片(*.png/*.jpg/*.jpeg)</span> </span> <span class=image_small><img id=‘photo‘ /></span> </div> </div>
$("#file").on(‘change‘,function(e){
// 获取文件列表对象
var files = e.target.files || e.dataTransfer.files;
if(files.length<1)return;
var file = files[0]; //一次只上传一个文件
var name = file.name;
//TODO:检查扩展名;//因为微信浏览器中 file标签不能使用 accept=‘.jpg,.png‘
var reader=new FileReader();
reader.readAsDataURL(file)
reader.onload=function(e){
//var dom= addImage(this.result);
var dom = "photo";
$("#"+dom).attr("src",this.result);
var img = new Image();
img.dom = dom;
img.onload=function(){
$("[name=license_photo]").siblings(".msg").text("");
$("#"+dom).attr("image_width",this.width);
$("#"+dom).attr("image_height",this.height);
$(".add_span").hide();
$("#"+dom).show();
$(".pName").text(name);
uploadImage(dom);
}
img.src=this.result;
}
});
function uploadImage(dom){
//var form = new FormData(document.getElementById("#form"));
$("#"+dom).addClass("pending");
var image_width = $("#"+dom).attr("image_width");
var image_height = $("#"+dom).attr("image_height");
var form =new FormData();
form.append("file",$("#file")[0].files[0]);
form.append("image_width",image_width);
form.append("image_height",image_height);
$("#error").html("正在上传...");
$.ajax({
url: $CONFIG.APP_PATH + "user/upload",
type: ‘POST‘,
cache: false,
data: form,
processData: false,
contentType: false,
success:function (r){
if(r.code!=0){
alert(r.message);
return;
}
$("[name=license_photo]").val(r.data);
}
}); //ajax
return false;
};
后台代码:
//上传图片 public void upload(){ //TODO: 存储位置包含月份:201905 String fileTypes= PropKit.get("upload.types","png,gif,jpg,jpeg"); String savePath = PropKit.get("upload.path",""); String viewPath ="/upload"; if(StringTool.isEmpty(savePath)) { savePath= this.getRequest().getServletContext().getRealPath("/upload"); } //this.getFile(); UploadFile uf = this.getFile("file"); if(uf==null){ this.renderJson(1, "请选择上传的图片",null); } File f = uf.getFile(); String fileName = f.getName(); String ext = FilenameUtils.getExtension(fileName); if(ext==null)ext="x"; else ext= ext.toLowerCase(); if( ! ArrayUtils.contains(fileTypes.split(","), ext)){ this.renderJson(1, fileName+",文件类型错误,仅支持jpg,png,gif",null); log.info(fileName+",文件类型错误,仅支持jpg,png,gif"); return; } String now = StringTool.now(); Record r = new Record(); r.set("origin_name", fileName); r.set("file_type", ext); r.set("file_size",(int) f.length()); r.set("create_time", now); Db.save("ib_file", r); int id = r.getLong("id").intValue(); String today = StringTool.date(new Date()); savePath = savePath + File.separator + today; viewPath = viewPath +"/" +today; fileName = "ib"+id+"."+ext; String sql="update ib_file set name=? where id="+id; Db.update(sql,viewPath+"/"+fileName); String saveName = savePath +File.separator+fileName; new File(savePath).mkdirs(); new File(saveName).delete();//try delete old file uf.getFile().renameTo(new File(saveName)); try { String thumb="ib"+id+"_360."+ext; Thumbnails.of(new File(saveName)).size(360,360).toFile(new File(savePath +File.separator+thumb)); thumb="ib"+id+"_180."+ext; Thumbnails.of(new File(saveName)).size(180,180).toFile(new File(savePath +File.separator+thumb)); } catch (IOException e) { e.printStackTrace(); } //NOTE: use data to store file name this.renderJson(0,"",viewPath+"/"+fileName); }
原文:https://www.cnblogs.com/asa-/p/14772780.html