框架: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); }