fileinput

＝＝＝＝＝＝＝＝＝＝＝＝＝ boostrap-fileinput 使用总结: ＝＝＝＝＝＝＝＝＝
1.引入css文件：
<link rel="stylesheet" href="${ctx}/resources/lib/bootstrap/css/fileinput.min.css"/>
2.引入js文件：
<script src="${ctx}/resources/lib/jquery/js/jquery-3.1.1.min.js"></script>
<script src="${ctx}/resources/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="${ctx}/resources/lib/bootstrap/js/fileinput.min.js"></script>
<script src="${ctx}/resources/lib/bootstrap/js/locales/zh.js"></script>
<script src="${ctx}/resources/lib/bootstrap/js/plugins/piexif.js"></script>
3.加入html元素：
<input id="imageScriptFile" name="imageScriptFile" type="file" multiple>
如果是只读，则设置readonly;如果是单个文件，则去掉multiple 属性
4.初始化说明：
4.1.初始化上传控件的样式
$(#fileInputId).fileinput(file_config)
4.1.删除文件有2个事件(区别)：
//删除新上传的文件
$(#fileInputId).on("filesuccessremove", function (event, previewId) {})
//删除回显的文件,默认采用POST方式提交
$(#fileInputId).on('filedeleted', function (event, key, json, params) {})
5.文件参考：
fileinput.jsp + fileinput.java

 

fileinput.jsp如下：

  1 <script type="text/javascript">
  2 
  3     var file_count = 0;//用于统计上传的文件数量
  4     var scriptArr = new Array();//用于反选文件
  5     var delete_fileIds = new Array();//用于存储删除的文件id集合
  6     $(function () {
  7         initArray();//初始化反选的文件列表
  8         initFileInput("imageScriptFile", "/imageEvaluateScript/upload.do", scriptArr, 10);
  9     });
 10 
 11     function initFileInput(ctrlName, uploadUrl, initValue, fileCount) {
 12         var control = $('#' + ctrlName)
 13         var file_config = {
 14             language: 'zh', //设置语言
 15             // uploadUrl: 'http://127.0.0.1/testDemo/fileupload/upload.action', //上传的地址，不设置则采用表单提交
 16             uploadUrl: CONTEXT_PATH + uploadUrl, //上传的地址
 17             allowedFileExtensions: [], //接收的文件后缀，如['jpg', 'png', 'gif']
 18             uploadAsync: false, //默认异步上传
 19             showUpload: false, //是否显示上传按钮
 20             showRemove: false, //显示移除按钮
 21             showCaption: true, //是否显示标题
 22             showPreview: true, //是否显示预览
 23             dropZoneEnabled: true, //是否显示拖拽区域
 24             overwriteInitial: false,
 25             // initialPreview: [initValue],//用于初始化文件列表
 26             maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
 27             minFileCount: 1,
 28             maxFileCount: fileCount, //表示允许同时上传的最大文件个数
 29             enctype: 'multipart/form-data',
 30             browseClass: 'btn btn-primary', //按钮样式: btn-default、btn-primary、btn-danger、btn-info、btn-warning
 31             previewFileIcon: '<i class=\'glyphicon glyphicon-king\'></i>',
 32             uploadExtraData: function () {//上传参数
 33                 return {'name': $("#name").val(), "versionNum": $("#versionNum").val()};
 34             },
 35             //配置下面，才会触发删除事件（filedeleted）
 36             /*  initialPreviewConfig: [{
 37                   caption: 'desert.jpg',// 展示的图片名称                 
 38                   width: '120px',// 图片高度                
 39                   url: "",// 预展示图片的删除调取路径    
 40                   key: 0,// 可修改 场景2中会用的      
 41                   extra: {id: 0} //调用删除路径所传参数     
 42               }],*/
 43         }
 44 
 45         var _initialPreview = [];
 46         var _initialPreviewConfig = [];
 47         initValue.forEach(function (it, index) {
 48             _initialPreview.push(it.url) //[initValue]
 49             _initialPreviewConfig.push({
 50                 url: CONTEXT_PATH + "/image/delete/oldfile.do",//必需有，否则不能触发 删除事件（filedeleted）
 51                 key: it.fileName,
 52                 extra: {id: it.id, fileKey: it.fileKey, fileName: it.fileName}//配置删除事件的参数（filedeleted）
 53             })
 54         })
 55         file_config.initialPreview = _initialPreview
 56         file_config.initialPreviewConfig = _initialPreviewConfig
 57         if (ctrlName == 'imageScriptFile') {
 58             file_config.allowedFileExtensions.push('sh');//设置上传的文件类型
 59         }
 60 
 61         //初始化上传控件的样式
 62         control.fileinput(file_config)
 63 
 64         control.on('fileuploaded', function (event, data, previewId, index) {
 65             if (data.response.flag) {
 66                 var fileKey = data.response.fileKey;//这个fileKey用于删除的时候，后台删除临时文件
 67                 // var json = jQuery.parseJSON(data.response.result)
 68                 $("#" + previewId).attr("data-fileKey", fileKey);
 69                 if (ctrlName == 'imageScriptFile') {
 70                     file_count_script++;
 71                     $("#imageSubmitBtn").removeAttr("disabled");
 72                 }
 73             } else {
 74                 dialogCollection.dialogWarns({
 75                     text: "上传错误，请删除后，重新上传"
 76                 });
 77                 return false;
 78             }
 79         })
 80         //删除新上传的文件
 81         control.on("filesuccessremove", function (event, previewId) {
 82             var fileKey = $("#" + previewId).attr("data-fileKey");
 83             $.ajax({
 84                 url: CONTEXT_PATH + "/image/delete/newfile.do",
 85                 data: {fileName: ctrlName + "s", fileKey: fileKey},
 86                 type: "POST",
 87                 success: function () {
 88                     if (ctrlName == 'imageScriptFile') {
 89                         file_count_script--;
 90                     }
 91                 }
 92             });
 93         })
 94         //删除回显的文件
 95         control.on('filedeleted', function (event, key, json, params) {
 96             //主要用到key和params2个参数，其中KEY在上面定义，而PARAMS是定义删除事件中的参数，JSON为上传对象
 97             console.log('Key = ', key);
 98             console.log('params = ', params);
 99             if (params.fileName == "imageScriptFiles") {
100                 script_delete_ids.push(params.id)
101                 file_count_script--;
102             }
103         });
104 
105 
106     }
107 
108     function initArray() {
109         <c:forEach items="${response.scriptFileList}" var="item" varStatus="status" >
110         scriptArr.push({
111             url: "<div class='file-preview-text'>" +
112                 "<h3><i class='glyphicon glyphicon-file'></i></h3>" +
113                 "${item.fileName}" + "</div>",
114             id: Number("${item.id}"),
115             fileKey: "${item.fileKey}",
116             fileName: "imageScriptFiles"
117         });
118         file_count_script++;
119         </c:forEach>
120     }
121 </script>

View Code

 

fileinput.java:

 1 删除代码如下：
 2 
 3     //因为在提交的时候才删除，记录删除的ID，这里不做操作
 4     @RequestMapping(value = "/delete/oldfile.do", method = {RequestMethod.POST})
 5     @ResponseBody
 6     public Map deleteOldFileResponse() {
 7         Map map = new HashMap<>();
 8         map.put("flag", true);
 9         map.put("message", "删除成功");
10         return map;
11     }
12 
13     @RequestMapping(value = "/delete/newfile.do", method = {RequestMethod.POST})
14     @ResponseBody
15     public Map deleteNewFileResponse(HttpSession session, String fileName, String fileKey) {
16         Map map = new HashMap<>();
17         map.put("flag", true);
18         map.put("message", "删除成功");
19         List<FileCacheInfo> list;//fileName imageScriptFiles imageAdditionFiles
20         Object obj = session.getAttribute(fileName);
21         if (obj == null) {
22             map.put("flag", false);
23             map.put("message", "删除失败，评测文件不存在");
24             return map;
25         } else {
26             list = (List<FileCacheInfo>) obj;
27             for (FileCacheInfo fileCacheInfo : list) {
28                 if (fileCacheInfo.getKey().equals(fileKey)) {
29                     list.remove(fileCacheInfo);
30                     session.setAttribute(fileName,list);
31                     return map;
32                 }
33             }
34         }
35         return map;
36     }
37 
38 
39     @RequestMapping(value = "/upload.do", method = {RequestMethod.POST})
40    // @ResourcePermissions(name = "上传镜像脚本文件", value = "uploadImageEvaluateScript")
41     @ResponseBody
42     @DontWrap
43     public Map uploadScript(HttpServletRequest request){
44         HttpSession session = request.getSession();
45         MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request;
46         MultipartFile file = multipartHttpServletRequest.getFile("imageScriptFile");
47         if (file == null) {
48             throw new ToffException("请选择文件");
49         }
50         FileCacheInfo fileCacheInfo;
51         Map map = new HashMap<String,Object>();
52         String fileCompleteName = file.getOriginalFilename();
53         String fileName = fileCompleteName.substring(0, fileCompleteName.lastIndexOf("."));
54         String fileExt = fileCompleteName.substring(fileCompleteName.lastIndexOf(".") + 1);
55         List<FileCacheInfo> list;
56         Object obj = session.getAttribute("imageScriptFiles");
57         if (obj == null) {
58             list = new ArrayList<>();
59         } else {
60             list = (List<FileCacheInfo>) obj;
61         }
62         try {
63             fileCacheInfo = imageEvaluateScriptService.getFileCacheInfo(null,  fileName, fileExt, file.getInputStream(), file.getSize());
64         } catch (IOException e) {
65             map.put("error", "上传失败");
66             map.put("flag", false);
67             e.printStackTrace();
68             return map;
69         }
70         FileCacheInfo tempFile = fileCacheService.saveTempFile(fileCacheInfo, null);
71         list.add(tempFile);
72         session.setAttribute("imageScriptFiles", list);
73         map.put("flag", true);
74         map.put("fileKey", tempFile.getKey());
75         return map;
76     }

View Code

 

转载于:https://www.cnblogs.com/dwb91/p/9762558.html