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;
    }
    }

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