bootstrap fileinput 上传图片

 首先jsp页面引用必要的文件，说明一下本人侧重讲上传图片功能，所以引入文件只列举与上传图片相关的文件，以下分别为css和js文件

 <link rel="stylesheet" type="text/css" href="../css/plugins/webuploader/webuploader.css">    <link rel="stylesheet" type="text/css" href="../css/demo/webuploader-demo.min.css">    <link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css" />

<script src="../js/plugins/webuploader/webuploader.min.js"></script><script src="../js/demo/webuploader-demo.min.js"></script>

jsp页面的上传图片代码片段为：

<div class="row">   <div class="ibox-content form-horizontal" style="padding-bottom: 0px">     <div class="row mt20">       <div class="form-group col-sm-4 col-md-8">          <label class="col-sm-4 col-md-3 control-label" >身份证正面：</label>        <div class="col-sm-8 col-md-8">            <input id="file-1" type="file"  class="file" data-overwrite-initial="false" data-min-file-count="1">            <p class="help-block">支持jpg、jpeg、png格式，大小不超过2.0M</p>           </div>    </div></div>

js中处理上传的代码如下：

$("#file-1").fileinput({        language: 'zh',        uploadUrl: '${ctxPath}/uploadfile/upload.htm', //上传处理的路径        allowedFileExtensions : ['jpg', 'png','jpeg'],//支持的格式        overwriteInitial: true,        maxFileSize: 2000,//文件最大支持        maxFilesNum: 1,//文件数量        maxFileCount: 1,        showUpload: false, //是否展示上传按钮        dropZoneTitle: '这里上传身份证<br>可直接将图片拖入虚线框中！',        slugCallback: function(filename) {            return filename.replace('(', '_').replace(']', '_');        }    }).on("filebatchselected", function(event, files) {                      $(this).fileinput("upload");                      })                      .on("fileuploaded", function(event, data) {                         $("#file-1").attr("filename",data.response);     });

后台处理上传逻辑代码如下：

@Controller@RequestMapping("/uploadfile")public class UploadCtrl {    @RequestMapping("/upload")    @ResponseBody    public Object upload(HttpServletRequest request){        UpdateUtils UpdateUtils = new AlibabaUpdateUtils();        FileItemFactory factory = new DiskFileItemFactory();        ServletFileUpload upload = new ServletFileUpload(factory);        upload.setHeaderEncoding("UTF-8");        try {            List items = upload.parseRequest(request);            String[] filenames = new String[1];            ;            InputStream[] inputStreams = new InputStream[1];            if (null != items) {                Iterator itr = items.iterator();                int i = 0;                while (itr.hasNext()) {                    FileItem item = (FileItem) itr.next();                    if (item.isFormField()) {                        continue;                    } else if(StringUtils.isEmpty(item.getName())){                        continue;                    }else{                            // 以当前精确到秒的日期为上传的文件的文件名                            filenames[0] ="onccc" + System.currentTimeMillis();                        }                        inputStreams[0] = item.getInputStream();                    }                }                AlibabaUpdateUtils.update(filenames, inputStreams);                URL url = AlibabaUpdateUtils.geturl(filenames[0], "122", "92");                JSONObject obj = new JSONObject();                obj.put("url", url.toString());                return url.toString();            }        } catch (Exception e) {            e.printStackTrace();        }        return null;    }

工具类代码：

public class AlibabaUpdateUtils{    static String endpoint = null,accessKeyId = null,accessKeySecret = null,bucketName=null;    String keyPrefix;    public String getKeyPrefix() {        if(keyPrefix==null)            try {                keyPrefix = PropertieUtils.getProperty("aliyun.oss.key");            } catch (IOException e) {e.printStackTrace();}        return keyPrefix;    }    public void setKeyPrefix(String keyPrefix) {        this.keyPrefix = keyPrefix;    }    static{        try {            endpoint = PropertieUtils.getProperty("aliyun.oss.endpoint");            accessKeyId = PropertieUtils.getProperty("aliyun.oss.accessKeyId");            accessKeySecret = PropertieUtils.getProperty("aliyun.oss.accessKeySecret");            bucketName =  PropertieUtils.getProperty("aliyun.oss.bucketName");        } catch (IOException e) {e.printStackTrace();}    }    public List<String> update(String[] filenames, InputStream[] inputStreams) {        OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);        List<String> fileNameList = new ArrayList<String>();        for(int i =0;i<filenames.length;i++){            String fullfileName  = getKeyPrefix() +filenames[i];             ossClient.putObject(bucketName, fullfileName, inputStreams[i]);             fileNameList.add(fullfileName);        }        ossClient.shutdown();        return fileNameList;    }    public URL geturl(String filename,String w,String h) {        return geturl(filename, w, h, 10);    }public URL geturl(String filename,String w,String h,long delay) {        OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);           // 图片处理样式        if(StringUtils.isEmpty(w))            w= "100";        if(StringUtils.isEmpty(h))            h= "100";        String style = "image/resize,m_fixed,w_"+w+",h_"+h;        // 过期时间10分钟        Date expiration = new Date(new Date().getTime() + 1000 * 60 * delay );        GeneratePresignedUrlRequest req = new GeneratePresignedUrlRequest(bucketName, getKeyPrefix()+filename, HttpMethod.GET);        req.setExpiration(expiration);        req.setProcess(style);        URL signedUrl = ossClient.generatePresignedUrl(req);        ossClient.shutdown();        return signedUrl;    }    }

本项目是将图片上传到阿里云服务器，可以返回图片路径和图片名。