首页 > Web开发 > 详细

图片上传的那些事儿

时间:2021-05-16 00:25:13      阅读:23      评论:0      收藏:0      [点我收藏+]

框架: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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!