图片上传控件及使用方法

//上传的控件 引用js和css
function initFileInput(ctrlName, uploadUrl) {
    var filenames = [];
    
    var names= $ ('#realnames').val ();
    
    var control = $('#' + ctrlName);
    control.fileinput({
        language : 'zh', // 设置语言
        uploadUrl : uploadUrl, // 上传的地址
        showUpload : true, // 是否显示上传按钮
        showCaption : true,// 是否显示标题
        showPreview : true,// 是否预览
        uploadAsync : false,// 多文件是否异步上传
        browseClass : "btn btn-primary", // 按钮样式
        elErrorContainer : "#errorBlock",
        maxFileSize : 40000000
    }).on('fileselect', function(event, numFiles, label) {
        if (numFiles > 0) {
            $('#isupload').val(1)
        }
    }).on('filecleared', function(event) {
        $('#isupload').val(0)
    }).on("filebatchuploadsuccess", function(event, data, previewId, index) {
        var backdata = data.response;
        var realnames = data.filenames;
        var tempnames = [];
        for (var i = 0; i < backdata.length; i++) {
            tempnames.push(backdata[i].name);
        }
        $('#isupload').val(0)
        $('#tempnames').val(tempnames)
        $('#realnames').val(realnames);
    }).on('filebatchuploadcomplete', function(event, files, extra) {
       $(this).fileinput('disable');
    });
    
}
function getContextPath() {
    var pathName = document.location.pathname;
    var index = pathName.substr(1).indexOf("/");
    var result = pathName.substr(0, index + 1);
    alert(result);
    return result;
}

调用

var uploadUrl = getContextPath()
                        + "/hiddenAjax!sChuanHidden";
   initFileInput('att_files', uploadUrl);

action中方法

用到的三个参数 ，前台传递过来

private List<File> files;
private String tnames;//原文件名
private String attachmentName;//临时文件名

public String sChuanHidden() {

            List<AttachVo> attachVos=new ArrayList<AttachVo>();
                if(files!=null){
                    for (int i = 0; i < files.size(); i++) {
                    AttachVo attachVo=new AttachVo();
                    SimpleDateFormat simpledateformat;
                    simpledateformat = new SimpleDateFormat("yyyyMMddHHmmss");
                    String strDate = simpledateformat.format(new Date());
                    FileOutputStream fos = null;
                    FileInputStream fis = null;
                    File file = files.get(i);   try {        
                        //利用时间戳作为临时文件名
                        String upfileName = i + "_" + strDate + ".jpg";
                        //把临时文件装入vo中
                        attachVo.setName(upfileName);
                        System.out.println("upfileName="+upfileName);
                        //文件路径
                        String imageFileName = fault_savePath() + "/" + upfileName;
                        //创建文件
                        fos = new FileOutputStream(imageFileName); 
                        System.out.println("imageFileName="+imageFileName); 
                        //把文件内容写入
                        fis = new FileInputStream(file);
                        byte[] buffer = new byte[1024];
                        int len = 0;
                        while ((len = fis.read(buffer)) != -1) {
                            fos.write(buffer, 0, len);
                        }
                    } catch (Exception e) {
                        System.out.println("文件上传失败");
                        e.printStackTrace();
                    } finally {
                        close(fos, fis);
                    }
                    attachVos.add(attachVo);
                    }
                }
                
                String jsonResult = JSONArray.fromObject(attachVos).toString();
                System.out.println("jsonResult"+jsonResult);
           
                try {
                    //把数据传递给前台
                    response.getWriter().write(jsonResult);                    
            } 
            catch (Exception e) {
                e.printStackTrace();
            }
            return null;
        }

js中利用临时文件名和原文件名组成新的文件名

var tnames = $('#tempnames').val(); // 附件临时名称
var rnames = $('#realnames').val(); // 附件名称
var tname =tnames.split(",");
var rname =rnames.split(",");
        var str=""
            alert(tname.length);
        for(var i=0;i<tname.length;i++)
            {
             
            if(i<tname.length-1){
            str+=tname[i].substring(0,tname[i].indexOf("."))+rname[i].substring(rname[i].indexOf("."),rname[i].length)+",";
            }
            else 
                {
                str+=tname[i].substring(0,tname[i].indexOf("."))+rname[i].substring(rname[i].indexOf("."),rname[i].length);
                }
            }

 

替换文件名的方法（重命名）

public void thwjm(String tnames,String remark)
    {
        //tnames 临时文件名组成的字符串 格式是  时间戳.jpg
        //remark 新文件名组成的祖父穿  格式是 时间戳.对应文件格式
        String [] tname=tnames.split(",");
        String [] remar =remark.split(",");
       if(tname.length==remar.length){
           for(int i=0;i<tname.length;i++)
            {
                try{
                    File file=new File(fault_savePath()+"/"+tname[i]);
                    file.renameTo(new File(fault_savePath()+"/"+remar[i]));
                }
                catch(Exception e)
                {
                    
                    e.printStackTrace();                   
                }
            }
       }
    }

 jsp页面

<div class="form-group draggable">
            <label class="col-sm-3 control-label">附件：</label>
            <div class="col-sm-9 ">
                <label class="block clearfix"> 
                <span  class="block input-icon input-icon-right"><input
                        id="att_files" name="files" type="file" multiple
                        class="file-loading">
                        <div id="errorBlock" class="help-block"> </div>
                        <div style="display: none;">
                            <input id="tempnames" type="text" />
                             <input id="realnames" type="text" /> 
                             <input id="isupload" type="text" value="0" />
                        </div>
            
            </span> </label></div>
        </div>