bootstrap-fileinput简单使用

主页Demo：http://plugins.krajee.com/file-input/demo

GitHub ：https://github.com/kartik-v/bootstrap-fileinput

 

1，插件使用；引入相关文件。

<!-- bootstrap  -->
    ...
<!-- fileinput css -->
<link href="<%=basePath%>/resources/lib/bootstrap-fileinput/css/fileinput.css" rel="stylesheet">
<!-- fileinput js -->
<script src="<%=basePath%>/resources/lib/bootstrap-fileinput/js/fileinput.js"></script>
<script src="<%=basePath%>/resources/lib/bootstrap-fileinput/js/zh.js"></script>

2，页面代码。

<div id="modal_fileUpload" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">我要上传</h4>
            </div>
            <div class="modal-body">
                <div class="file-loading">
                    <!-- file标签   multiple：支持多文件上传  -->
                    <input type="file" name="files" id="files" multiple />
                </div>
            </div>
        </div>
    </div>
</div>

3，初始化fileinput。

$(function() {
    $('#files').fileinput({
        language: 'zh',
        uploadUrl:getBasePath()+"/file/node/upload",
        hideThumbnailContent: true,
        minFileCount:1,
        maxFileCount:6,
        browseOnZoneClick: true,
        uploadAsync:true,
        slugCallback: function(filename) {  
           // return filename.replace('(', '_').replace(']', '_');  
            return filename;
        },
        fileActionSettings:{
     
        },
        uploadExtraData:function(previewId, index){//后台接受的额外参数
            var data = {
                nodeRef:selectedFolderNodeRef
            }
            return data;
        }
    }).on('filebatchuploadsuccess', function(event, data, previewId, index) {//同步上传成功回调函数
        //alert(JSON.stringify(data.response));
        searchRepositoryItems(); 
    }).on('filebatchuploaderror', function(event, data,msg) {//同步上传错误回调函数
        //alert(JSON.stringify(data.response));
        searchRepositoryItems(); 
    }).on('fileuploaded', function(event, data, previewId, index) {//异步上传成功回调函数
        //alert(JSON.stringify(data.response));
        searchRepositoryItems(); 
    }).on('fileerror', function(event, data, msg) {//异步上传错误回调函数
        //
    });
});

4，springMVC Controller 代码；MultipartFile 接受fileinput数据。

@RequestMapping(value="/node/upload",method=RequestMethod.POST)
    @ResponseBody
    public String upload(@CookieValue("userId") String userId,@RequestParam MultipartFile[] files,HttpServletRequest request){
        //CacheItem cacheItem = (CacheItem) CacheMap.getInstance().getCacheItem(userId);
        //Map<String, String> cookieMap  = (Map<String, String>) cacheItem.getEntity();
        JSONObject json = new JSONObject();
        try {
            for(MultipartFile file:files){
                boolean success = fileService.upload(userId, file, request.getParameter("nodeRef"));
                json.put("success", success);
            }
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
            json.put("success", false);
        }
        return json.toJSONString();
    }

5，Service上传保存文件。

public boolean upload(String userId,MultipartFile file,String nodeRef){
        boolean flag = true;
        String url ="http://"+configModel.getDomain()+":"+configModel.getPort()+"/share/proxy/alfresco/api/mobile/mobileupload.html";
        
        Map<String, String> params = new HashMap<String, String>();
        params.put("destination", nodeRef);
        params.put("contentType", "cm:content");
        params.put("thumbnailNames", "doclib");
        params.put("username", userId);
        
        HttpClient httpclient = null;  
        HttpResponse response = null;  
        MultipartEntity entity = new MultipartEntity(HttpMultipartMode.BROWSER_COMPATIBLE,null,Charset.forName("UTF-8")); 
        try {

            InputStreamBody isb = new InputStreamBody(file.getInputStream(), file.getOriginalFilename());
            entity.addPart("filedata", isb);
            
            httpclient = new DefaultHttpClient();// 看作是浏览器
            HttpPost httppost = new HttpPost(url);
            //FileBody fileBody = new FileBody(file);
            //entity.addPart("filedata", fileBody);
            if (params != null && !params.isEmpty()) {
                for (Map.Entry<String, String> entry : params.entrySet()) {
                    StringBody contentBody = new StringBody(entry.getValue(), "text/plain", Charset.forName("UTF-8"));
                    entity.addPart(entry.getKey(), contentBody);
                }
            }

            httppost.setEntity(entity);
            response = httpclient.execute(httppost);// 发送post请求
            // response.getEntity().getContent();
            int code = response.getStatusLine().getStatusCode();
            // System.out.println(response.getStatusLine());
            if (code == 200) {
                return true;
            } else {
                return false;
            }
            
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
        }
        return flag;
    }

问题处理：

1，MultipartEntity 乱码处理。

InputStreamBody fileName中文乱码 ：MultipartEntity entity = new MultipartEntity(HttpMultipartMode.BROWSER_COMPATIBLE,null,Charset.forName("UTF-8")); 

String中文乱码：StringBody contentBody = new StringBody(entry.getValue(), "text/plain", Charset.forName("UTF-8"));

 2，fileinput接受后台response返回修改提示信息方法。修改fileinput.js方法 _uploadSingle中的fnSuccess函数或_uploadBatch中的fnSuccess函数

fnSuccess = function (data, textStatus, jqXHR) {
    if(!$.parseJSON(outData.response).success){
        //
    }
};

 

参考相关：

Bootstrap FileInput中文API整理

BootStrap fileinput.js文件上传组件实例代码

SpringMVC 文件上传配置