精华内容
参与话题
问答
  • fileinput

    2018-10-09 20:19:00
    ============= boostrap-fileinput 使用总结: =========1.引入css文件: <link rel="stylesheet" href="${ctx}/resources/lib/bootstrap/css/fileinput.min.css"/>2.引入js文件: <...

    ============= 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

    展开全文
  • FileInput

    2018-08-05 15:28:36
    $(function(){ initImageList(); initCS1File1Img(); initCS1File2Img(); initCS1File3Img(); initCS1File4Img(); initCS1File5Img(); syncBaseinfoImg(); clickradio();...var Image1List =...
    $(function(){
    	initImageList();
    	initCS1File1Img();
    	initCS1File2Img();
    	initCS1File3Img();
    	initCS1File4Img();
    	initCS1File5Img();
    	syncBaseinfoImg();
    	clickradio();
    });
    
    //定义回显图片数组
    var Image1List = [];
    var Image2List = [];
    var Image3List = [];
    var Image4List = [];
    var Image5List = [];
    
    /**
     * 初始化回显图片数组
     */
    function initImageList(){
    	if ($("#downUrl").val()) {
    		Image1List.push(getImageByDownUrl($("#downUrl").val()));
    //		$("#initCS1File1").fileinput("refresh",{initialPreview: Image1List});
    	}
    	if ($("#downUrl2").val()) {
    		Image2List.push(getImageByDownUrl($("#downUrl2").val()));
    //		$("#initCS1File2").fileinput("refresh",{initialPreview: Image2List});
    	}
    	if ($("#downUrl3").val()) {
    		Image3List.push(getImageByDownUrl($("#downUrl3").val()));
    //		$("#initCS1File3").fileinput("refresh",{initialPreview: Image3List});
    	}
    	if ($("#downUrl4").val()) {
    		Image4List.push(getImageByDownUrl($("#downUrl4").val()));
    //		$("#initCS1File4").fileinput("refresh",{initialPreview: Image4List});
    	}
    	if ($("#downUrl5").val()) {
    		Image5List.push(getImageByDownUrl($("#downUrl5").val()));
    //		$("#initCS1File5").fileinput("refresh",{initialPreview: Image5List});
    	}
    }
    
    /**
     * 根据下载路径获取回显图片数组中的图片
     */
    function getImageByDownUrl(downUrl){
    	url = boot + '/common/downloadfilebyDownUrl.do?downUrl=' + downUrl;
    	return '<img src="'+url+'" class="col-sm-12 kv-preview-data file-preview-image" style="width:200px">';
    }
    
    function initCS1File1Img() {
    	$("#initCS1File1").fileinput({
    		uploadUrl: boot + '/common/upload.do',
    		maxFileCount: 1,
    		maxFileSize: 100000,
    		autoReplace: true,
    		showClose: false,	//右上角小×
    		showRemove: false,
    		initialPreview: Image1List,	//回显图片
    		layoutTemplates:{
    			footer: '<div class="file-thumbnail-footer">\n' +
    			'	<div class="file-footer-caption" title="{caption}"></div>\n' +
    			'	{progress} {actions}\n' +
    			'</div>',
    			actions: '<div class="file-actions">\n' +
    			'	<div class="file-footer-buttons">\n' +
    			'		{delete} {zoom} {other}' +
    			'	</div>\n' +
    			'	{drag}\n' +
    			'	<div class="file-upload-indicator" title="{indicatorTitle}">{indicator}</div>\n' +
    			'	<div class="clearfix"></div>\n' +
    			'</div>',
    		},
    		initialPreviewConfig:[{url:boot+'/common/deleteImage.do',key: $("#image1Id").val()}],	//原图片点击删除图标后的请求路径 参数为附件id
    	}).on("fileclear",function(event, data, msg){	//点击右上角小×或者Remove删除前
    	}).on("filecleared",function(event, data, msg){	//点击右上角小×或者Remove删除后
    	}).on('filepredelete', function(event, key, jqXHR, data) {	//原图片点击删除图标前
    	}).on("filepreajax",function(previewId, index){	//点击Upload上传图片前
    	}).on("filebatchselected", function(event, files) {	//选择文件后处理事件
    		//var oldCout = Image1List.length;	//原图数量
    		//var currentCount = $("#initCS1File1").fileinput('getFilesCount');	//当前数量
    		//var newCount = $("#initCS1File1").fileinput('getFileStack').length;	//新图数量
    		//debugger
    	}).on('filedeleted', function(vKey, jqXHR, extraData){	//原图片点击删除图标后
    		clearImgId($("#image1Id").val());	//删除数据库中图片id的引用
    		$("#image1Id").val("");	//删除图片id
    		$("#downUrl").val("");	//删除图片downUrl
    	}).on('filepreremove', function(event, id, index) {	//重新选择图片点击删除图标
    		if ($("#downUrl").val()) {	//如果原来有图片则还原回原来的图片
    			//先获取图片然后刷新,否则刷新时可能图片还未成功获取
    			var img = getImageByDownUrl($("#downUrl").val());
    			setTimeout(function(){
    				$("#initCS1File1").fileinput("refresh",{initialPreview: img});
    			},1000);
    		}
    	}).on('fileuploaded', function (event, data, id, index) {	//点击Upload上传图片后
    		//图片上传后点击删除图标无法真正将图片删除,因此上传后将删除图标隐藏
    		$("#initCS1File1").fileinput("refresh",{layoutTemplates:{
    			footer: '<div class="file-thumbnail-footer">\n' +
    			'	<div class="file-footer-caption" title="{caption}"></div>\n' +
    			'	{progress} {actions}\n' +
    			'</div>',
    			actions: '<div class="file-actions">\n' +
    			'	<div class="file-footer-buttons">\n' +
    			'		{zoom} {other}' +
    			'	</div>\n' +
    			'	{drag}\n' +
    			'	<div class="file-upload-indicator" title="{indicatorTitle}">{indicator}</div>\n' +
    			'	<div class="clearfix"></div>\n' +
    			'</div>',
    		}});
    		var oldImgId = $("#image1Id").val();
    		var newImgId = data.response.id;
    		$("#image1Id").val(newImgId);	//更新图片id
    		updateImgId(oldImgId,newImgId);	//更新数据库中图片id的引用
    		deleteImageByid(oldImgId);	//'最后'删除原图片
    	});
    }
    
    function initCS1File2Img() {
    	$("#initCS1File2").fileinput({
    		uploadUrl: boot + '/common/upload.do',
    		maxFileCount: 1,
    		maxFileSize: 100000,
    		autoReplace: true,
    		showClose: false,
    		showRemove: false,
    		initialPreview: Image2List,
    		layoutTemplates:{
    			footer: '<div class="file-thumbnail-footer">\n' +
    			'	<div class="file-footer-caption" title="{caption}"></div>\n' +
    			'	{progress} {actions}\n' +
    			'</div>',
    			actions: '<div class="file-actions">\n' +
    			'	<div class="file-footer-buttons">\n' +
    			'		{delete} {zoom} {other}' +
    			'	</div>\n' +
    			'	{drag}\n' +
    			'	<div class="file-upload-indicator" title="{indicatorTitle}">{indicator}</div>\n' +
    			'	<div class="clearfix"></div>\n' +
    			'</div>',
    		},
    		initialPreviewConfig:[{url:boot+'/common/deleteImage.do',key: $("#image2Id").val()}],
    	}).on('filedeleted', function(vKey, jqXHR, extraData){
    		clearImgId($("#image2Id").val());
    		$("#image2Id").val("");
    		$("#downUrl2").val("");
    	}).on('filepreremove', function(event, id, index) {
    		if ($("#downUrl2").val()) {
    			var img = getImageByDownUrl($("#downUrl2").val());
    			setTimeout(function(){
    				$("#initCS1File2").fileinput("refresh",{initialPreview: img});
    			},1000);
    		}
    	}).on('fileuploaded', function (event, data, id, index) {
    		$("#initCS1File2").fileinput("refresh",{layoutTemplates:{
    			footer: '<div class="file-thumbnail-footer">\n' +
    			'	<div class="file-footer-caption" title="{caption}"></div>\n' +
    			'	{progress} {actions}\n' +
    			'</div>',
    			actions: '<div class="file-actions">\n' +
    			'	<div class="file-footer-buttons">\n' +
    			'		{zoom} {other}' +
    			'	</div>\n' +
    			'	{drag}\n' +
    			'	<div class="file-upload-indicator" title="{indicatorTitle}">{indicator}</div>\n' +
    			'	<div class="clearfix"></div>\n' +
    			'</div>',
    		}});
    		var oldImgId = $("#image2Id").val();
    		var newImgId = data.response.id;
    		$("#image2Id").val(newImgId);
    		updateImgId(oldImgId,newImgId);
    		deleteImageByid(oldImgId);
    	});
    }
    
    function initCS1File3Img() {
    	$("#initCS1File3").fileinput({
    		uploadUrl: boot + '/common/upload.do',
    		maxFileCount: 1,
    		maxFileSize: 100000,
    		autoReplace: true,
    		showClose: false,
    		showRemove: false,
    		initialPreview: Image3List,
    		layoutTemplates:{
    			footer: '<div class="file-thumbnail-footer">\n' +
    			'	<div class="file-footer-caption" title="{caption}"></div>\n' +
    			'	{progress} {actions}\n' +
    			'</div>',
    			actions: '<div class="file-actions">\n' +
    			'	<div class="file-footer-buttons">\n' +
    			'		{delete} {zoom} {other}' +
    			'	</div>\n' +
    			'	{drag}\n' +
    			'	<div class="file-upload-indicator" title="{indicatorTitle}">{indicator}</div>\n' +
    			'	<div class="clearfix"></div>\n' +
    			'</div>',
    		},
    		initialPreviewConfig:[{url:boot+'/common/deleteImage.do',key: $("#image3Id").val()}],
    	}).on('filedeleted', function(vKey, jqXHR, extraData){
    		clearImgId($("#image3Id").val());
    		$("#image3Id").val("");
    		$("#downUrl3").val("");
    	}).on('filepreremove', function(event, id, index) {
    		if ($("#downUrl3").val()) {
    			var img = getImageByDownUrl($("#downUrl3").val());
    			setTimeout(function(){
    				$("#initCS1File3").fileinput("refresh",{initialPreview: img});
    			},1000);
    		}
    	}).on('fileuploaded', function (event, data, id, index) {
    		$("#initCS1File3").fileinput("refresh",{layoutTemplates:{
    			footer: '<div class="file-thumbnail-footer">\n' +
    			'	<div class="file-footer-caption" title="{caption}"></div>\n' +
    			'	{progress} {actions}\n' +
    			'</div>',
    			actions: '<div class="file-actions">\n' +
    			'	<div class="file-footer-buttons">\n' +
    			'		{zoom} {other}' +
    			'	</div>\n' +
    			'	{drag}\n' +
    			'	<div class="file-upload-indicator" title="{indicatorTitle}">{indicator}</div>\n' +
    			'	<div class="clearfix"></div>\n' +
    			'</div>',
    		}});
    		var oldImgId = $("#image3Id").val();
    		var newImgId = data.response.id;
    		$("#image3Id").val(newImgId);
    		updateImgId(oldImgId,newImgId);
    		deleteImageByid(oldImgId);
    	});
    }
    
    function initCS1File4Img() {
    	$("#initCS1File4").fileinput({
    		uploadUrl: boot + '/common/upload.do',
    		maxFileCount: 1,
    		maxFileSize: 100000,
    		autoReplace: true,
    		showClose: false,
    		showRemove: false,
    		initialPreview: Image4List,
    		layoutTemplates:{
    			footer: '<div class="file-thumbnail-footer">\n' +
    			'	<div class="file-footer-caption" title="{caption}"></div>\n' +
    			'	{progress} {actions}\n' +
    			'</div>',
    			actions: '<div class="file-actions">\n' +
    			'	<div class="file-footer-buttons">\n' +
    			'		{delete} {zoom} {other}' +
    			'	</div>\n' +
    			'	{drag}\n' +
    			'	<div class="file-upload-indicator" title="{indicatorTitle}">{indicator}</div>\n' +
    			'	<div class="clearfix"></div>\n' +
    			'</div>',
    		},
    		initialPreviewConfig:[{url:boot+'/common/deleteImage.do',key: $("#image4Id").val()}],
    	}).on('filedeleted', function(vKey, jqXHR, extraData){
    		clearImgId($("#image4Id").val());
    		$("#image4Id").val("");
    		$("#downUrl4").val("");
    	}).on('filepreremove', function(event, id, index) {
    		if ($("#downUrl4").val()) {
    			var img = getImageByDownUrl($("#downUrl4").val());
    			setTimeout(function(){
    				$("#initCS1File4").fileinput("refresh",{initialPreview: img});
    			},1000);
    		}
    	}).on('fileuploaded', function (event, data, id, index) {
    		$("#initCS1File4").fileinput("refresh",{layoutTemplates:{
    			footer: '<div class="file-thumbnail-footer">\n' +
    			'	<div class="file-footer-caption" title="{caption}"></div>\n' +
    			'	{progress} {actions}\n' +
    			'</div>',
    			actions: '<div class="file-actions">\n' +
    			'	<div class="file-footer-buttons">\n' +
    			'		{zoom} {other}' +
    			'	</div>\n' +
    			'	{drag}\n' +
    			'	<div class="file-upload-indicator" title="{indicatorTitle}">{indicator}</div>\n' +
    			'	<div class="clearfix"></div>\n' +
    			'</div>',
    		}});
    		var oldImgId = $("#image4Id").val();
    		var newImgId = data.response.id;
    		$("#image4Id").val(newImgId);
    		updateImgId(oldImgId,newImgId);
    		deleteImageByid(oldImgId);
    	});
    }
    
    function initCS1File5Img() {
    	$("#initCS1File5").fileinput({
    		uploadUrl: boot + '/common/upload.do',
    		maxFileCount: 1,
    		maxFileSize: 100000,
    		autoReplace: true,
    		showClose: false,
    		showRemove: false,
    		initialPreview: Image5List,
    		layoutTemplates:{
    			footer: '<div class="file-thumbnail-footer">\n' +
    			'	<div class="file-footer-caption" title="{caption}"></div>\n' +
    			'	{progress} {actions}\n' +
    			'</div>',
    			actions: '<div class="file-actions">\n' +
    			'	<div class="file-footer-buttons">\n' +
    			'		{delete} {zoom} {other}' +
    			'	</div>\n' +
    			'	{drag}\n' +
    			'	<div class="file-upload-indicator" title="{indicatorTitle}">{indicator}</div>\n' +
    			'	<div class="clearfix"></div>\n' +
    			'</div>',
    		},
    		initialPreviewConfig:[{url:boot+'/common/deleteImage.do',key: $("#image5Id").val()}],
    	}).on('filedeleted', function(vKey, jqXHR, extraData){
    		clearImgId($("#image5Id").val());
    		$("#image5Id").val("");
    		$("#downUrl5").val("");
    	}).on('filepreremove', function(event, id, index) {
    		if ($("#downUrl5").val()) {
    			var img = getImageByDownUrl($("#downUrl5").val());
    			setTimeout(function(){
    				$("#initCS1File5").fileinput("refresh",{initialPreview: img});
    			},1000);
    		}
    	}).on('fileuploaded', function (event, data, id, index) {
    		$("#initCS1File5").fileinput("refresh",{layoutTemplates:{
    			footer: '<div class="file-thumbnail-footer">\n' +
    			'	<div class="file-footer-caption" title="{caption}"></div>\n' +
    			'	{progress} {actions}\n' +
    			'</div>',
    			actions: '<div class="file-actions">\n' +
    			'	<div class="file-footer-buttons">\n' +
    			'		{zoom} {other}' +
    			'	</div>\n' +
    			'	{drag}\n' +
    			'	<div class="file-upload-indicator" title="{indicatorTitle}">{indicator}</div>\n' +
    			'	<div class="clearfix"></div>\n' +
    			'</div>',
    		}});
    		var oldImgId = $("#image5Id").val();
    		var newImgId = data.response.id;
    		$("#image5Id").val(newImgId);
    		updateImgId(oldImgId,newImgId);
    		deleteImageByid(oldImgId);
    	});
    }
    
    /**
     * 将名义值对应的图片映射到baseinfo
     */
    function syncBaseinfoImg(){
    	var cchm=$("#cchLength").val();
    	var cscch1height=$("#cscch1height").val();
    	var cscch2height=$("#cscch2height").val();
    	var cscch3height=$("#cscch3height").val();
    	var cscch4height=$("#cscch4height").val();
    	var cscch5height=$("#cscch5height").val();
    	if(parseFloat(cscch1height)==parseFloat(cchm)&&$("#downUrl").val()){
    		$("#crossSectionImg").attr("src",boot + '/common/downloadfilebyDownUrl.do?downUrl=' + $("#downUrl").val());
    		$("#imgDiv").css('display','block');
    	}else if(parseFloat(cscch2height)==parseFloat(cchm)&&$("#downUrl2").val()){
    		$("#crossSectionImg").attr("src",boot + '/common/downloadfilebyDownUrl.do?downUrl=' + $("#downUrl2").val());
    		$("#imgDiv").css('display','block');
    	}else if(parseFloat(cscch3height)==parseFloat(cchm)&&$("#downUrl3").val()){
    		$("#crossSectionImg").attr("src",boot + '/common/downloadfilebyDownUrl.do?downUrl=' + $("#downUrl3").val());
    		$("#imgDiv").css('display','block');
    	}else if(parseFloat(cscch4height)==parseFloat(cchm)&&$("#downUrl4").val()){
    		$("#crossSectionImg").attr("src",boot + '/common/downloadfilebyDownUrl.do?downUrl=' + $("#downUrl4").val());
    		$("#imgDiv").css('display','block');
    	}else if(parseFloat(cscch5height)==parseFloat(cchm)&&$("#downUrl5").val()){
    		$("#crossSectionImg").attr("src",boot + '/common/downloadfilebyDownUrl.do?downUrl=' + $("#downUrl5").val());
    		$("#imgDiv").css('display','block');
    	}else {
    		$("#imgDiv").css('display','none');
    	}
    }
    
    /**
     * 设定单选框点击事件
     */
    function clickradio(){
    	$(":radio").click(function(){
    		for(var i=1;i<6;i++){
    			if($("input[name='cscch"+i+".conclusion']:checked").val()=="1"){
    				$("#baseInfocch"+i+"Conclusion_cs1").val("OK");
    				$("#baseInfocch"+i+"Conclusion_cs1").css("color","green");
    			}else if($("input[name='cscch"+i+".conclusion']:checked").val()=="2"){
    				$("#baseInfocch"+i+"Conclusion_cs1").val("NG");
    				$("#baseInfocch"+i+"Conclusion_cs1").css("color","red");
    			}
    		}
    	})
    }
    
    /**
     * 保存截面积数据
     */
    function saveCrossSection1(){
    	$.ajax({
    		url: boot + "/crossSection/saveCrossSection1",
    		data: formUrl($("#crossSectionForm").serialize()),
    		type: "post",
    		async:false,
    		success: function (result) {
    			if (result.success) {
    				//window.location.reload();
    				//helper.alertDialog(result.message, "success");
    			} else {
    				helper.alertDialog(result.message, "danger");
    			}
    		}
    	});
    }
    
    /*
     * 当原图片被删除时将数据表中对该图片id的引用设置为null
     */
    function clearImgId(imgId){
    	$.ajax({
    		url: boot + "/crossSection/clearImgId",
    		data: {imgId:imgId},
    		type: "post",
    		async:false,
    		success: function (result) {
    			if (result.success) {
    				//window.location.reload();
    				//helper.alertDialog(result.message, "success");
    			} else {
    				//helper.alertDialog(result.message, "danger");
    			}
    		}
    	});
    }
    
    /*
     * 更新数据库中图片id的引用
     */
    function updateImgId(oldImgId,newImgId){
    	$.ajax({
    		url: boot + "/crossSection/updateImgId",
    		data: {oldImgId:oldImgId,newImgId:newImgId},
    		type: "post",
    		async:false,
    		success: function (result) {
    			if (result.success) {
    				//window.location.reload();
    				//helper.alertDialog(result.message, "success");
    			} else {
    				//helper.alertDialog(result.message, "danger");
    			}
    		}
    	});
    }
    
    /**
     * 根据图片id删除附件表中的记录
     */
    function deleteImageByid(id){
    	$.ajax({
    		url: boot + "/common/deleteImage.do",
    		data:{key:id},
    		type:"get",
    		success:function(result){
    		}
    	});
    }

     

    展开全文
  • fileInput

    2017-08-09 10:32:00
    fileInput language 字符串, 用于插件的语言配置, 使插件能够为您的区域设置显示消息 (必须为该语言设置 ISO 代码)。您可以在同一页上有多个语言小部件。语言代码的区域设置 JS 文件必须...

    language

    字符串, 用于插件的语言配置, 使插件能够为您的区域设置显示消息 (必须为该语言设置 ISO 代码)。您可以在同一页上有多个语言小部件。语言代码的区域设置 JS 文件必须按照 "翻译" 一节中所述定义。文件必须在 fileinput 之后加载。

    theme

    字符串, 用于插件的主题 (如果未设置, 将默认为内置主题)。使用发布 v4.3.2, fileinput 插件支持高级主题, 并能够在同一页面上为多个小部件提供单独的主题。为此, 请按照下列简单步骤操作:

    加载您需要的主题 JS 文件 (如 aathemes/fa/jsaa 字体真棒主题)。必须在 fileinput. js 之后加载主题文件。

    将插件中的主题属性设置为所需的主题, 并在上面的主题配置 JS 文件 (如 "fa") 中设置。


    该插件将从 JS 文件中自动读取主题名称的主题配置, 从 fileinputThemes ["<theme-name>"] (例如, 通过 fileinputThemes ["<theme-name>")。

    该插件还会自动将 CSS 选择器主题-<theme-name> 置于文件输入容器中, 以便您可以重写您的样式。这些主题的 CSS 可以由社区提交的主题/THEME_NAME 文件夹的回购。


    如果需要, 您可以另外加载任何主题特定的 CSS 文件。

     

    required 布尔值, 在上载 (用于 ajax) 或提交表单之前, 是否必须选择文件 (对于 non-ajax)。如果设置为 true, 并且在上载之前未选择文件, 则将显示 msgFilerequired 中设置的错误消息。默认为 false。
    检查所需的验证演示, 了解有关如何使用此属性的详细信息。

    rtl

    布尔值, 是否以右向左 (RTL) 模式定位小部件。要查看 rtl 方向, 您必须将其设置为 true, 并且还必须在 css/fileinput 后加载 css/fileinput-rtl. css 文件, 用于 rtl 样式的页面。默认为 false。

    查看 RTL 使用演示, 了解有关如何使用此属性的详细信息。

    hiddenThumbnailContent

    布尔值, 是否隐藏缩略图中的预览内容 (图像、pdf 内容、文本内容等)。默认为 false。如果设置为 true, 则只显示 "缩略图页脚" 版式模板中定义的文件名和文件大小。
    检查 Glyphicon 主题替代演示, 了解有关如何使用此属性的详细信息。

    showCaption

    布尔值, 是否显示文件标题。默认为 true。

    showPreview

     

    showRemove

    布尔值, 是否显示文件删除/清除按钮。默认为 true。

    showUpload

    布尔值, 是否显示文件上传按钮。默认为 true。当未指定 uploadUrl 时, 这将默认为 non-ajax 方案的 "表单提交" 按钮。对于 ajax 上载方案, 这将使用 uploadUrl 作为链接。

    showCancel

     

    showClose

     

    showUploadedThumbs

     

    showBrowse

     

    browseOnZoneClick

     

    autoReplace

     

    autoOrientImage

     

    captionClass

     

    previewClass

     

    mainClass

     

    frameClass

     

    purifyHtml

     

    fileSizeGetter

    布尔值, 根据字节参数生成人友好文件大小的回调。如果未设置, 将默认为以下回调:

    initialPreview

    字符串 |数组中要显示的初始预览内容。您可以通过最小的 HTML 标记来显示您的图像、文本或文件。如果设置为字符串, 则如果没有分隔符, 则在初始预览中显示单个文件。可以设置分隔符 (在 initialDelimiter 中定义) 以在初始预览中显示多个文件。如果设置为数组, 它将将数组中的所有文件显示为初始预览 (对于多个文件上载方案很有用)。

    根据插件样式主题, 将需要添加以下 CSS 类以显示每个文件类型:


    图像文件: 包括 CSS 类文件-预览-图像
    文本文件: 包括 CSS 类文件-预览-文本
    其他文件: 包括 CSS 类文件-预览-其他

    如何为初始预览设置各种文件的示例:

    initialPreviewCount

    int, 将添加到 "预览" 中选定的文件计数的初始预览项的计数。这在显示正确的标题时适用, whenoverwriteInitial 设置为 false。

    initialPreviewDelimiter

    字符串, 用于将初始预览内容拆分为单个文件缩略图的分隔符 (仅适用于将 initialPreview 作为字符串而不是数组传递)。默认值为 * $。

    initialPreviewAsData

    布尔值, 是否将初始预览内容集解析为数据而不是原始标记。默认为 false 以向后兼容 (在 v4.3.2 之前)

    initialPreviewFileType

    字符串, 在 previewSettings 中的键中配置的文件模板类型之一。这对于标识用于显示特定文件内容的模板很有用。默认为图像。

    initialPreviewConfig

    数组, 用于为每个 initialPreview 项设置重要属性的配置 (作为 initialPreview 的一部分设置)。数组中的每个元素都应是由以下键组成的对象/关联数组:

    类型: 字符串, 在 previewSettings 中的键内配置的文件模板类型之一。这将覆盖 initialPreviewFileType 设置。这对于标识用于显示特定文件内容的模板很有用。

    文件: 字符串, 文件 mime 类型来标识内容。适用于某些文件模板, 如音频或视频 (例如 video/mp4)。

    大小: 浮动, 以字节为单位的文件大小, 将使用 "大小" 布局模板显示。如果未设置或无法将其解析为浮点数字, 则将显示一个空字符串。

    previewAsData: 布尔值, 是否将此预览内容分析为数据输入而不是原始标记源。这将覆盖 initialPreviewAsData 设置。

    标题: 字符串, 为每个初始预览项内容显示的标题或文件名。

    宽度: 字符串, 显示图像/内容的 CSS 宽度。

    url: 字符串, 用于在初始预览中通过 AJAX post 响应删除图像/内容的 url。如果未设置, 将默认为 deleteUrl。

    键: 字符串 |对象, 将作为数据通过 AJAX POST 传递给 url 的密钥。

    frameClass: 字符串, 为文件的缩略图框架设置的附加框架 css 类。

    frameAttr: 对象, 缩略图框架的 HTML 属性设置 (设置为键: 值对)。

    额外: 对象 |函数, 将作为数据传递到初始预览的额外数据删除 url/AJAX 服务器通过 POST 调用。如果未设置, 将默认为 deleteExtraData。


    initialPreviewConfig 的一个示例配置 (对于以前设置的 initialPreviewContent) 可以是:

     

     

    请注意, initialPreview 和 initialPreviewConfig 也可以在不呈现整个标记但只是传递数据的情况下更容易地设置。为此, initialPreviewAsData 属性必须设置为 true, 并且预览将使用初始预览类型的模板呈现。在 theinitialPreviewConfig 中, 类型键将标识传递的数据的预览文件类型。

    例如, 可以通过以下方式将初始预览设置为数据:

     

     

    ajax 删除操作将通过 POST 将以下数据发送到服务器:

    key: 在 initialPreviewConfig 中设置为设置键 ['key']

    extra:额外的数据通过 initialPreviewConfig [' extra '] 或 deleteExtraData, 如果前者没有设置。

     

    initialPreviewShowDelete

    bool, 是否将为使用 initialPreview 创建的每个缩略图显示 "删除" 按钮。

    removeFromPreviewOnError

    bool, 是否应从错误预览中删除文件缩略图。默认为 false。

    previewThumbTags

    数组, 这将是缩略图模板中使用的标记列表, 在呈现缩略图时将在缩略图标记中动态替换。例如:

    initialPreviewThumbTags

    数组, 这是特定于初始预览内容的 previewThumbTags 的扩展, 但将配置为与每个初始预览缩略图对应的对象数组。通过 initialPreview 设置的初始预览缩略图将读取此配置以替换标记。扩展示例:

     

     

    deleteExtraData

    对象 |函数将作为数据传递到初始预览删除 url/AJAX 服务器通过 POST 调用的额外数据。这将被 initialPreviewConfig [额外 '] 属性覆盖。此属性仅适用于初始预览中的 ajax 删除, 以及为 initialPreviewConfig ["url"] 或 deleteUrl 设置了值。

    可以将其设置为对象 (键和值的关联数组) 或函数回调。作为一个对象, 可以将其设置为例如:

     

    作为函数回调, 它可以设置为例如:

     

    注意

    ajax 删除操作将通过 POST 将以下数据发送到服务器:

    密钥: 在 initialPreviewConfig 中设置为设置键 [' 键 ']



    任何其他作为键传递的额外数据: 值对通过 initialPreviewConfig ["额外"] 或 deleteExtraData, 如果前者没有设置。

     

     

     

     

     

     

    deleteUrl

    字符串, 用于在初始预览中通过 AJAX post 响应删除图像/内容的 URL。这将被 initialPreviewConfig [' url '] 属性覆盖。

    initialCaption

    字符串, 将显示初始预览标题文本。如果没有在此处设置值, 并且 initialPreview 设置为 true, 则默认为 "{预览-文件-计数} 文件", 其中 {预览文件计数} 是在 initialPreview 中传递的文件的计数。

    overwriteInitial

    布尔值, 无论您希望改写初始预览内容还是设置标题。这默认为 true, 即在上载新文件或清除文件时, 将覆盖任何 initialPreview 内容集。将其设置为 false 将有助于在数据库中显示保存的图像或文件, 特别是在使用多文件上载功能时尤其有用。

    layoutTemplates

    对象用于呈现布局的每个部分的模板配置。您可以设置以下模板来控制小部件布局:

    main1: 用于呈现带有标题的小部件的模板。

    main2: 用于呈现无标题的小部件的模板。

    预览: 用于呈现预览的模板。

    fileIcon: 在标题文本前呈现的图标。

    大小: 用于在缩略图中显示文件大小的模板。应使用标记 {sizeText} 来呈现大小数据。

    标题: 用于呈现标题的模板。

    模式: 用于呈现模式的模板 (用于文件内容预览缩放)。

    进度: 上载过程中进度条的模板 (对于批处理/成批上载以及在每个异步/单次上载的预览缩略图内)。在每个缩略图中显示的上载进度栏将被包装在具有 "文件-拇指-进度" CSS 类的容器内。将自动分析和替换以下标记:

    {百分比}: 将替换为上载进度百分比。

    页脚: 每个文件预览缩略图的页脚部分的模板。将自动分析和替换以下标记:

    {操作}: 将替换为操作模板的输出。

    操作: 要在缩略图页脚中显示的文件操作按钮的模板。将自动分析和替换以下标记:

    {上载}: 将替换为 actionUpload 模板的输出。

    {delete}: 将替换为 actionDelete 模板的输出。

    actionDelete: 缩略图页脚中的 "文件删除操作" 按钮的模板。将自动分析和替换以下标记:

    {removeClass}: "删除" 按钮的 css 类。将替换为在 fileActionSettings 中设置的 removeClass。

    {removeIcon}: "删除" 按钮的图标。将替换为在 fileActionSettings 中设置的 removeIcon。

    {removeTitle}: "删除" 按钮悬停时显示的标题。将替换为在 fileActionSettings 中设置的 removeTitle。

    {dataUrl}: 用于删除 initialPreview 内容的文件缩略图的 URL。将替换为 initialPreviewConfig 中的 url 集。

    {数据}: 将通过 POST 传递到 AJAX 调用的上述 URL 的密钥 (附加数据)。将替换为 initialPreviewConfig 中的密钥集。
    actionUpload: 缩略图页脚中的 "文件上载操作" 按钮的模板。

    {uploadClass}: "上载" 按钮的 css 类。将替换为在 fileActionSettings 中设置的 uploadClass。

    {uploadIcon}: "上载" 按钮的图标。将替换为在 fileActionSettings 中设置的 uploadIcon。

    {uploadTitle}: 在 "上载" 按钮上悬停时显示的标题。将替换为在 fileActionSettings 中设置的 uploadTitle。

     

     

    main1 和 main2 模板将自动解析以下替换标记:

    {class}: 在 mainClass 属性中设置的 CSS 类。

    {关闭}: 将替换为关闭 (交叉) 图标 (默认情况下在预览窗口的右上)。要控制此标记的布局模板 layoutTemplates. 关闭。

    {预览}: 由 previewTemplate 分析的内容, 只有在 showPreview 为真时才会显示。

    {标题}: 由 captionTemplate 分析的内容, 只有在 showCaption 为真时才会显示。

    {size}: 由 layoutTemplates 大小分析的内容。

    {删除}: 文件删除/清除按钮, 仅当 showRemove 为真时才显示。

    {上载}: 文件上载按钮, 仅当 showUpload 为真时才显示。

    {取消}: 将在 ajax 上载过程中显示的文件上载取消按钮以中止 ajax 上载。

    {浏览}: 主文件浏览按钮以选择要输入的文件。

    进度模板将自动分析以下替换标记:

    {class}: 在 progressClass 或 progressCompleteClass 属性中设置的 CSS 类 (取决于进度百分比)。

    预览和标题模板可以理解以下将被替换的特殊标记:

    {class}: 在 mainClass、captionClass 或 previewClass 属性中设置的 CSS 类。

    layoutTemplates 如果未设置, 将默认为:

     

    下面的模板将用于呈现用于上载、删除、取消和浏览的主按钮。

    btnDefault: 用于上载、删除和取消按钮的模板。

    btnLink: 与 ajax 一起使用时的上传按钮模板 (即设置 uploadUrl 时)。

    btnBrowse: "浏览" 按钮的模板。

    以下标记将被解析, 并在上面的按钮模板中自动替换:

    {类型}: HTML 按钮类型, 默认为按钮的大多数按钮和提交的基于表单的上传。

    {标题}: 按钮悬停时显示的标题。

    {css}: 按钮的 css 类。这是从 uploadClass 或 removeClass 或 cancelClass 或 browseClass 的设置派生的。

    {状态}: 按钮的禁用状态 (如果可用) (否则将为空)。

    {图标}: 由 uploadIcon 或 removeIcon 或 cancelIcon 或 browseIcon 标识的按钮图标。

    {标签}: 由 uploadLabel 或 removeLabel 或 cancelLabel 或 browseLabel 标识的按钮标签。

    {href}: 仅适用于 ajax 上载的上载按钮, 并将替换为 uploadUrl 属性。

     

     

    previewTemplates

    对象用于呈现每个预览文件类型的模板配置。识别以下文件类型:

    图像: 图像文件的预览模板。

    文本: 文本文件的预览模板。

    html: html 文件的预览模板。

    视频: 视频文件的预览模板 (由 HTML 5 视频标签支持)。

    音频: 音频文件的预览模板 (由 HTML 5 音频标签支持)。

    闪存: flash 文件的预览模板 (当前支持 webkit 浏览器)。

    对象: 所有其他文件的预览模板-默认情况下视为对象。要禁用此行为, 请配置 allowedPreviewTypes 属性。

    泛型: 此模板仅用于呈现直接作为原始格式传递的 initialPreview 标记内容。

    下列标记将在每个模板中进行分析和替换:

    {rtl}: 当 rtl 设置为 true 时, 将设置为 kv rtl css 类, 否则将为空字符串。

    {previewId}: 将替换为预览框架容器的生成标识符。

    {模板}: 将替换为文件模板类型 (如图像、文本等)

    {data}: 将替换为每个预览类型的数据源。

    {宽度}: 将替换为 previewSettings 中设置的文件类型的宽度。

    {高度}: 将替换为 previewSettings 中设置的文件类型的高度。

    {标题}: 将替换为文件名。

    {类型}: 将替换为文件类型。

    {内容}: 此操作仅适用于泛型模板。它将替换为 initialPreview 中设置的原始 HTML 标记。上述所有标记都不会为泛型模板进行分析。

    {对话}: 当前仅适用于文本文件预览。将用 JS 代码替换为启动模式对话框。

    {zoomTitle}: 当前仅适用于文本文件预览。这将被替换为 msgZoomTitle 属性。这是在 "缩放" 按钮悬停时显示的标题 (单击时将显示文本文件)。

    {zoomInd}: 当前仅适用于文本文件预览。这将被替换为 zoomIndicator 属性。这是在 "缩放" 按钮悬停时显示的标题 (单击时将显示文本文件)。
    {标题}: 当前仅适用于文本文件预览。这表示模式对话框标题标题。这将被替换为 msgZoomModalHeading 属性。


    如前所述, 如果您来自早期版本 (在 v2.4.0 之前), 则所有预览模板都已组合成一个属性, 而不是图像、文本等单独的模板。

     

     

     

    上述模板中使用的常量值如下所示:

    在:

    {previewFileIcon}: 对应于 previewFileIcon 属性。



    {previewFileIconClass}: 对应于 previewFileIconClass 属性。
     
     

    previewZoomSettings

    对象, 对显示在缩放模式预览中的内容的 HTML 属性的配置。配置类似于 previewSettings, 但是您可以在此属性中设置其他 HTML 属性, 使其超出宽度和高度。此属性将覆盖 previewSettings 中的配置。您可以设置 HTML 样式属性所支持的所有 CSS 样式属性。默认为每个文件类型的以下配置:

    previewZoomButtonIcons

    对象, 在详细预览中显示各种缩放控制按钮的图标。可以设置以下按钮:

    上一个: 按钮在模式预览中导航到以前的文件内容

    下一步: 按钮导航到模式预览中的下一个文件内容

    toggleheader: 按钮切换显示和滑动/在模态头

    全屏: 按钮切换放大预览到全屏显示

    无国界: 按钮切换预览到一个无边框的最大化状态 (仅与全屏按钮的区别在于它不将浏览器设置为本机全屏模式)

    关闭: 关闭模式缩放预览对话框的按钮

    previewZoomButtonIcons 默认为以下配置:

    previewZoomButtonClasses

    对象, 要为详细预览中的缩放控件按钮设置的 CSS 类。可以设置以下按钮:

    上一个: 按钮在模式预览中导航到以前的文件内容

    下一步: 按钮导航到模式预览中的下一个文件内容

    toggleheader: 按钮切换显示和滑动/在模态头

    全屏: 按钮切换放大预览到全屏显示

    无国界: 按钮切换预览到一个无边框的最大化状态 (仅与全屏按钮的区别在于它不将浏览器设置为本机全屏模式)

    关闭: 关闭模式缩放预览对话框的按钮

    previewZoomButtonClasses 默认为以下配置:

    preferIconicPreview

    布尔值, 是否使用 previewFileIconSettings andpreviewFileExtSettings 的配置强制预览区域中的文件缩略图的标志性预览。默认为 false。如果设置为 true, 它将尝试强制图标文件缩略图预览 (如果可能)。

    preferIconicZoomPreview

    布尔值, 是否在详细的缩放预览区域中强制使用 previewFileIconSettings 和 previewFileExtSettings 的配置对文件缩略图进行标志性预览。默认为 false。如果设置为 true, 它将尝试强制对详细的缩放内容进行标志性预览 (如果可能)。

    previewZoomButtonTitles

    对象, 在详细预览中为缩放控件按钮设置的标题。可以设置以下按钮:

    上一个: 按钮在模式预览中导航到以前的文件内容

    下一步: 按钮导航到模式预览中的下一个文件内容

    toggleheader: 按钮切换显示和滑动/在模态头

    全屏: 按钮切换放大预览到全屏显示

    无国界: 按钮切换预览到一个无边框的最大化状态 (仅与全屏按钮的区别在于它不将浏览器设置为本机全屏模式)

    关闭: 关闭模式缩放预览对话框的按钮

    previewZoomButtonClasses 默认为以下配置:

     

    allowedFileTypes

    数组的允许文件类型的列表上载。默认设置为 null, 这意味着插件支持所有用于上载的文件类型。如果找到无效的文件类型, 则会引发 msgInvalidFileType 中设置的验证错误消息。fileTypeSettings 中设置的下列类型可用于安装。

    allowedFileExtensions

    数组允许上载的文件扩展名列表。默认设置为 null, 这意味着插件支持上载的所有文件扩展名。如果找到无效的文件扩展名, 则会引发 msgInvalidFileExtension 中设置的验证错误消息。此设置的一个示例可以是:

    你需要小心, 以防你设置 allowedFileTypes 和 allowedFileExtensions。在这种情况下, allowedFileTypes 属性首先被验证, 并且通常在 allowedFileExtensions 设置之前 (并且后一种验证可能被跳过)。

    allowedPreviewTypes

    数组的小部件的允许预览类型列表。默认情况下, 此选项支持预览的所有文件类型。默认情况下, 插件将每个文件视为一个对象, 如果它与以前的任何类型都不匹配。若要禁用此行为, 可以从 allowedPreviewTypes 列表中移除对象, 或通过 allowedPreviewMimeTypes 对其进行微调. 若要禁用所有文件类型的内容预览并将 previewIcon 显示为缩略图, 请将其设置为 null、空或 false。

    默认设置如下:

      1. ['image', 'html', 'text', 'video', 'audio', 'flash', 'object']

    allowedPreviewMimeTypes

    阵列允许预览的 mime 类型列表。默认情况下, 此设置为 null, 这意味着允许所有可能的 mime 类型。此设置与 allowedPreviewTypes 结合使用, 仅筛选允许预览的所需文件类型。如果需要, 您可以检查此列表中允许的 mime 类型。

    defaultPreviewContent

    字符串, 则在清除文件或清除输入时, 默认情况下在预览窗口中显示的默认内容/标记。这对于在上载到覆盖之前显示默认用户配置文件图片或配置文件图像的用例非常有用。这与 initialPreview 在意义上有点不同, initialPreview 内容将始终显示, 除非它是根据 overwriteInitial 删除或覆盖。另一方面, defaultPreviewContent 只会在初始化或清除预览时显示。在其他时间, 当文件被选中时, 这将被暂时覆盖, 直到选定的文件被清除。

    此属性可用于在预览窗口中显示默认用户配置文件图片 (或保存的图片), 除非用户选择图片。查看头像上传演示示例详细信息

    customLayoutTags

    对象将在布局模板中替换的其他自定义标记的列表。这应该是键的关联数组对象: 值对, 其中:

    键: 字符串, 是要替换的标记, 建议将其括在大括号中。

    值: 字符串 | 函数, 是将替换上面的标记键的值。可以将其设置为字符串或回调函数。

    customPreviewTags

    对象将在预览模板中替换的其他自定义标记的列表。这应该是键的关联数组对象: 值对, 其中:
    键: 字符串, 是要替换的标记, 建议将其括在大括号中。

    值: 字符串 | 函数, 是将替换上面的标记键的值。可以将其设置为字符串或回调函数。

    previewSettings

    对象用于呈现每个预览文件类型的格式设置 (宽度和高度)。默认设置如下:

    fileTypeSettings

    对象设置, 以便在选择要上载的文件时验证和标识每个文件类型。这是一个回调列表, 它接受文件 mime 类型和文件名作为参数。默认设置如下:

    previewFileIcon

    字符串, 当检测到不可读的预览文件类型时, 将在每个预览文件缩略图中显示的图标。默认为 <i class="glyphicon glyphicon-file"> </i> &nbsp;。

    previewFileIconClass

    字符串, 将应用于预览文件图标容器的 CSS 类。默认为文件-其他图标。

    previewFileIconSettings

    对象每个文件扩展名 (类型) 的预览图标标记设置。您需要将其设置为 key: 值对, 其中密钥对应于文件扩展名 (如 doc、docx、xls 等), 并且该值对应于要呈现的图标的标记。如果未设置此值, 或者此处未设置文件扩展名, 则预览将默认为 previewFileIcon。请注意, 显示图标而不是文件内容是通过 allowedPreviewTypes 和 allowedPreviewMimeTypes 控制的

    您可以设置 previewFileIconSettings, 如下所示:

    previewFileExtSettings

     

    buttonLabelClass

     

    browseLabel

     

    browseIcon

     

    browseClass

     

    removeLabel

     

    removeIcon

     

    removeClass

     

    removeTitle

     

    uploadLabel

     

    uploadIcon

     

    uploadClass

     

    uploadTitle

     

    uploadUrl

     

    uploadAsync

     

    uploadExtraData

     

    zoomModalHeight

     

    minImageHeight

     

    maxImageHeight

     

    minImageWidth

     

    maxImageWidth

     

    resizeImage

     

    resizePreference

     
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
    posted on 2017-08-09 10:32 明净 阅读(...) 评论(...) 编辑 收藏

    转载于:https://www.cnblogs.com/mingjing/p/7323880.html

    展开全文
  • bootstrap-fileinput An enhanced HTML 5 file input for Bootstrap 3.x and 4.x with file preview for various files, offers multiple selection, resumable chunk uploads, and more. The plugin...
  • Bootstrap FileInput中文API整理

    万次阅读 多人点赞 2017-04-09 22:20:40
    Bootstrap FileInput中文API整理 这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档,方便自己今后使用,也希望能给大家带来帮助,如...

    Bootstrap FileInput中文API整理

    这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档,方便自己今后使用,也希望能给大家带来帮助,如有错误,希望大家积极指正。

    一、    引入文件

    <link href="../css/bootstrap.min.css"rel="stylesheet">

    <link href="../css/fileinput.css" media="all"rel="stylesheet" type="text/css" />

    <scriptsrc="../js/jquery-2.0.3.min.js"></script>

    <script src="../js/fileinput.js"type="text/javascript"></script>

    <script src="../js/bootstrap.min.js"type="text/javascript"></script>

    下载地址:https://github.com/kartik-v/bootstrap-fileinput

    二、    初始化设置:

    $("#uploadfile").fileinput({

                    language: 'zh', //设置语言

                    uploadUrl:"http://127.0.0.1/testDemo/fileupload/upload.do", //上传的地址

                   allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀

                   //uploadExtraData:{"id": 1, "fileName":'123.mp3'},

                    uploadAsync: true, //默认异步上传

                    showUpload:true, //是否显示上传按钮

                    showRemove :true, //显示移除按钮

                    showPreview :true, //是否显示预览

                    showCaption:false,//是否显示标题

                    browseClass:"btn btn-primary", //按钮样式    

                   dropZoneEnabled: false,//是否显示拖拽区域

                   //minImageWidth: 50, //图片的最小宽度

                   //minImageHeight: 50,//图片的最小高度

                   //maxImageWidth: 1000,//图片的最大宽度

                   //maxImageHeight: 1000,//图片的最大高度

                    //maxFileSize:0,//单位为kb,如果为0表示不限制文件大小

                   //minFileCount: 0,

                    maxFileCount:10, //表示允许同时上传的最大文件个数

                    enctype:'multipart/form-data',

                   validateInitialCount:true,

                    previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",

                   msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",

               }).on("fileuploaded", function (event, data, previewId, index){

                     

    });

    三、    Options 说明:

    属性名

    属性类型

    描述说明

    默认值

    language

    String                       

    多语言设置,使用时需提前引入\locales文件夹下对应的语言文件,中文zh,引入语言文件必须放在fileinput.js之后

    'en'

    showCaption

    Boolean

    是否显示被选文件的简介

    true

    showBrowse

    Boolean

    是否显示浏览按钮

    true

    showPreview

    Boolean

    是否显示预览区域

    true

    showRemove

    Boolean

    是否显示移除按钮

    true,

    showUpload

    Boolean

    是否显示上传按钮

    true,

    showCancel

    Boolean

    是否显示取消按钮

    true,

    showClose:

    Boolean

    是否显示关闭按钮

    true

    showUploadedThumbs

    Boolean

     

    true

    browseOnZoneClick

    Boolean

     

    false

    autoReplace

    Boolean

    是否自动替换当前图片,设置为true时,再次选择文件, 会将当前的文件替换掉。

    false

    generateFileId

    Object

     

    null

    previewClass

    String

    添加预览按钮的类属性

    ‘’

    captionClass

    String

     

    ‘’

    frameClass

    String

     

    'krajee-default'

    mainClass

    String

     

    'file-caption-main'

    mainTemplate

    Object

     

    null

    purifyHtml

    Boolean

     

    true

    fileSizeGetter

    Object

     

    null

    initialCaption

    String

     

    ''

    initialPreview

    Array/Object

     

    []

    initialPreviewDelimiter

    String

     

    '*$$*'

    initialPreviewAsData

    Boolean

     

    false

    initialPreviewFileType

    String

     

    'image'

    initialPreviewConfig

    Array/Object

     

    []

    initialPreviewThumbTags

    Array/Object

     

    []

    previewThumbTags

    Object

     

    {}

    initialPreviewShowDelete

    Boolean

     

    true

    removeFromPreviewOnError

    Boolean

     

    false

    deleteUrl

    String

    删除图片时的请求路径

    ''

    deleteExtraData

    Object

    删除图片时额外传入的参数

    {}

    overwriteInitial

    Boolean

     

    true

    previewZoomButtonIcons

    Object

     

    {

    prev: '<i class="glyphicon glyphicon-triangle-left"></i>',

      next: '<i class="glyphicon glyphicon-triangle-right"></i>',

      toggleheader: '<i class="glyphicon glyphicon-resize-vertical"></i>',

      fullscreen: '<i class="glyphicon glyphicon-fullscreen"></i>',

      borderless: '<i class="glyphicon glyphicon-resize-full"></i>',

      close: '<i class="glyphicon glyphicon-remove"></i>'

    },

    previewZoomButtonClasses

    Object

     

    {

      prev: 'btn btn-navigate',

      next: 'btn btn-navigate',

      toggleheader: 'btn btn-default btn-header-toggle',

      fullscreen: 'btn btn-default',

      borderless: 'btn btn-default',

      close: 'btn btn-default'

    },

    preferIconicPreview

    Boolrean

     

    false

    preferIconicZoomPreview

    Boolrean

     

    false

    allowedPreviewTypes

    undefined

     

    undefined

    allowedPreviewMimeTypes

    Object

     

    null

    allowedFileTypes

    Object

    接收的文件后缀,如['jpg', 'gif', 'png'],不填将不限制上传文件后缀类型

    null

    allowedFileExtensions

    Object

     

    null

    defaultPreviewContent

    Object

     

    null

    customLayoutTags

    Object

     

    {}

    customPreviewTags

    Object

     

    {}

    previewFileIcon

    String

     

    '<i class="glyphicon glyphicon-file"></i>'

    previewFileIconClass

    String

     

    'file-other-icon'

    previewFileIconSettings

    Object

     

    {}

    previewFileExtSettings

    Object

     

    {}

    buttonLabelClass

    String

     

    'hidden-xs'

    browseIcon

    String

     

    '<i class="glyphicon glyphicon-folder-open"></i>&nbsp;'

    browseClass

    String

     

    'btn btn-primary'

    removeIcon

    String

     

    '<i class="glyphicon glyphicon-trash"></i>'

    removeClass

    String

     

    'btn btn-default'

    cancelIcon

    String

     

    '<i class="glyphicon glyphicon-ban-circle"></i>'

    cancelClass

    String

     

    'btn btn-default'

    uploadIcon

    String

     

    '<i class="glyphicon glyphicon-upload"></i>'

    uploadClass

    String

     

    'btn btn-default'

    uploadUrl

    String

    上传文件路径

    null

    uploadAsync

    boolean

    是否为异步上传

    true

    uploadExtraData

     

    上传文件时额外传递的参数设置

    {}

    zoomModalHeight

    number

     

    480

    minImageWidth

    String

    图片的最小宽度

    null

    minImageHeight

    String

    图片的最小高度

    null

    maxImageWidth

    String

    图片的最大宽度

    null

    maxImageHeight

    String

    图片的最大高度

    null

    resizeImage

    boolean

     

    false

    resizePreference

    String

     

    'width'

    resizeQuality

    number

     

    0.92

    resizeDefaultImageType

    String

     

    'image/jpeg'

    minFileSize

    number

    单位为kb,上传文件的最小大小值

    0

    maxFileSize

    number

    单位为kb,如果为0表示不限制文件大小

    0

    resizeDefaultImageType

    number

     

    25600(25MB)

    minFileCount

    number

    表示同时最小上传的文件个数

    0

    maxFileCount

    number

    表示允许同时上传的最大文件个数

    0

    validateInitialCount

    boolean

     

    false

    msgValidationErrorClass

    String

     

    'text-danger'

    msgValidationErrorIcon

    String

     

    '<i class="glyphicon glyphicon-exclamation-sign"></i> '

    msgErrorClass

    String

     

    'file-error-message'

    progressThumbClass

    String

     

    "progress-bar progress-bar-success progress-bar-striped active"

    rogressClass

    String

     

    "progress-bar progress-bar-success progress-bar-striped active"

    progressCompleteClass

    String

     

    "progress-bar progress-bar-success"

    progressErrorClass

    String

     

    "progress-bar progress-bar-danger"

    progressUploadThreshold

    number

     

    99

    previewFileType

    String

    预览文件类型,内置['image', 'html', 'text', 'video', 'audio', 'flash', 'object',‘other‘]等格式

    'image'

    elCaptionContainer

    String

     

    null

    elCaptionText

    String

    设置标题栏提示信息

    null

    elPreviewContainer

    String

     

    null

    elPreviewImage

    String

     

    null

    elPreviewStatus

    String

     

    null

    elErrorContainer

    String

     

    null

    errorCloseButton

    String

     

    '<span class="close kv-error-close">&times;</span>'

    slugCallback

    function

    选择后未上传前 回调方法

    null

    dropZoneEnabled

    boolean

    是否显示拖拽区域

    true

    dropZoneTitleClass

    String

    拖拽区域类属性设置

    'file-drop-zone-title'

    fileActionSettings

    Object

    设置预览图片的显示样式

    {

        showRemove: true,

        showUpload: false,

        showZoom: true,

        showDrag: true,

        removeIcon: '<i class="glyphicon glyphicon-trash text-danger"></i>',

        removeClass: 'btn btn-xs btn-default',

        removeTitle: 'Remove file',

        uploadIcon: '<i class="glyphicon glyphicon-upload text-info"></i>',

        uploadClass: 'btn btn-xs btn-default',

        uploadTitle: 'Upload file',

        zoomIcon: '<i class="glyphicon glyphicon-zoom-in"></i>',

        zoomClass: 'btn btn-xs btn-default',

        zoomTitle: 'View Details',

        dragIcon: '<i class="glyphicon glyphicon-menu-hamburger"></i>',

        dragClass: 'text-info',

        dragTitle: 'Move / Rearrange',

        dragSettings: {},

        indicatorNew: '<i class="glyphicon glyphicon-hand-down text-warning"></i>',

        indicatorSuccess: '<i class="glyphicon glyphicon-ok-sign text-success"></i>',

        indicatorError: '<i class="glyphicon glyphicon-exclamation-sign text-danger"></i>',

        indicatorLoading: '<i class="glyphicon glyphicon-hand-up text-muted"></i>',

        indicatorNewTitle: 'Not uploaded yet',

        indicatorSuccessTitle: 'Uploaded',

        indicatorErrorTitle: 'Upload Error',

        indicatorLoadingTitle: 'Uploading ...'

    }

    otherActionButtons

    String

     

    ''

    textEncoding

    String

    编码设置

    'UTF-8'

    ajaxSettings

    Object

     

    {}

    ajaxDeleteSettings

    Object

     

    {}

    showAjaxErrorDetails

    boolean

     

    true

     

    四、    提示说明设置:

    属性名

    默认值

    中文

    fileSingle

    file

    文件

    filePlural

    files

    个文件

    browseLabel

    Browse &hellip

    选择 &hellip;

    removeLabel

    Remove

    移除

    removeTitle

    Clear selected files

    清除选中文件

    cancelLabel

    Cancel

    取消

    cancelTitle

    Abort ongoing upload

    取消进行中的上传

    uploadLabel

    Upload

    上传

    uploadTitle

    Upload selected files

    上传选中文件

    msgNo

    No

    没有

    msgNoFilesSelected

    No files selected

    “”

    msgCancelled

    Cancelled

    取消

    msgZoomModalHeading

    Detailed Preview

    详细预览

    msgSizeTooSmall

    File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.

    File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.

    msgSizeTooLarge

    File "{name}" (<b>{size} KB</b>) exceeds maximum allowed upload size of <b>{maxSize} KB</b>.

    文件 "{name}" (<b>{size} KB</b>) 超过了允许大小 <b>{maxSize} KB</b>.

    msgFilesTooLess

    You must select at least <b>{n}</b> {files} to upload.

    你必须选择最少 <b>{n}</b> {files} 来上传.

    msgFilesTooMany

    Number of files selected for upload <b>({n})</b> exceeds maximum allowed limit of <b>{m}</b>.

    选择的上传文件个数 <b>({n})</b> 超出最大文件的限制个数 <b>{m}</b>.

    msgFileNotFound

    File "{name}" not found!

    文件 "{name}" 未找到!

    msgFileSecured

    Security restrictions prevent reading the file "{name}".

    安全限制,为了防止读取文件 "{name}".

    msgFileNotReadable

    File "{name}" is not readable.

    文件 "{name}" 不可读.

    msgFilePreviewAborted

    File preview aborted for "{name}".

    取消 "{name}" 的预览.

    msgFilePreviewError

    An error occurred while reading the file "{name}".

    读取 "{name}" 时出现了一个错误.

    msgInvalidFileName

    Invalid or unsupported characters in file name "{name}".

    Invalid or unsupported characters in file name "{name}".

    msgInvalidFileType

    Invalid type for file "{name}". Only "{types}" files are supported.

    不正确的类型 "{name}". 只支持 "{types}" 类型的文件.

    msgInvalidFileExtension

    Invalid extension for file "{name}". Only "{extensions}" files are supported.

    不正确的文件扩展名 "{name}". 只支持 "{extensions}" 的文件扩展名.

    msgFileTypes

    {

                'image': 'image',

                'html': 'HTML',

                'text': 'text',

                'video': 'video',

                'audio': 'audio',

                'flash': 'flash',

                'pdf': 'PDF',

                'object': 'object'

            },

    {

                'image': 'image',

                'html': 'HTML',

                'text': 'text',

                'video': 'video',

                'audio': 'audio',

                'flash': 'flash',

                'pdf': 'PDF',

                'object': 'object'

            },

    msgUploadAborted

    The file upload was aborted

    该文件上传被中止

    msgUploadThreshold

    Processing...

    Processing...

    msgUploadBegin

    Initializing...

    Initializing...

    msgUploadEnd

    Done

    Done

    msgUploadEmpty

    No valid data available for upload.

    No valid data available for upload.

    msgValidationError

    Validation Error

    验证错误

    msgLoading

    Loading file {index} of {files} &hellip;

    加载第 {index} 文件 共 {files} &hellip;

    msgProgress

    Loading file {index} of {files} - {name} - {percent}% completed.

    加载第 {index} 文件 共 {files} - {name} - {percent}% 完成.

    msgSelected

    {n} {files} selected

    {n} {files} 选中

    msgFoldersNotAllowed

    Drag & drop files only! {n} folder(s) dropped were skipped.

    只支持拖拽文件! 跳过 {n} 拖拽的文件夹.

    msgImageWidthSmall

    Width of image file "{name}" must be at least {size} px.

    宽度的图像文件的"{name}"的必须是至少{size}像素.

    msgImageHeightSmall

    Height of image file "{name}" must be at least {size} px.

    图像文件的"{name}"的高度必须至少为{size}像素.

    msgImageWidthLarge

    Width of image file "{name}" cannot exceed {size} px.

    宽度的图像文件"{name}"不能超过{size}像素.

    msgImageHeightLarge

    Height of image file "{name}" cannot exceed {size} px.

    图像文件"{name}"的高度不能超过{size}像素.

    msgImageResizeError

    Could not get the image dimensions to resize.

    无法获取的图像尺寸调整。

    msgImageResizeException

    Error while resizing the image.<pre>{errors}</pre>

    错误而调整图像大小。<pre>{errors}</pre>

    msgAjaxError

    Something went wrong with the {operation} operation. Please try again later!

    Something went wrong with the {operation} operation. Please try again later!

    msgAjaxProgressError

    {operation} failed

    {operation} failed

    ajaxOperations

    {

                deleteThumb: 'file delete',

                uploadThumb: 'file upload',

                uploadBatch: 'batch file upload',

                uploadExtra: 'form data upload'

            },

    {

                deleteThumb: 'file delete',

                uploadThumb: 'file upload',

                uploadBatch: 'batch file upload',

                uploadExtra: 'form data upload'

            },

    dropZoneTitle

    Drag & drop files here &hellip;

    拖拽文件到这里 &hellip;<br>支持多文件同时上传

    dropZoneClickTitle

    <br>(or click to select {files})

    <br>(或点击{files}按钮选择文件)

    previewZoomButtonTitles

    {

                prev: 'View previous file',

                next: 'View next file',

                toggleheader: 'Toggle header',

                fullscreen: 'Toggle full screen',

                borderless: 'Toggle borderless mode',

                close: 'Close detailed preview'

            }

    {

                prev: '预览上一个文件',

                next: '预览下一个文件',

                toggleheader: '缩放',

                fullscreen: '全屏',

                borderless: '无边界模式',

                close: '关闭当前预览'

            }

    fileActionSettings

     

    {     removeTitle: '删除文件',

                uploadTitle: '上传文件',

                zoomTitle: '查看详情',

                dragTitle: '移动 / 重置',

                indicatorNewTitle: '没有上传',

                indicatorSuccessTitle: '上传',

                indicatorErrorTitle: '上传错误',

                indicatorLoadingTitle: '上传 ...'

            },

     

     

     

    五、    Method说明:

     

    方法名

    参数

    描述

    fileerror

     

    异步上传错误结果处理

    $('#uploadfile').on('fileerror', function(event, data, msg) {

       

    });

    fileuploaded

     

    异步上传成功结果处理

    $("#uploadfile").on("fileuploaded", function (event, data, previewId, index) {

      

    })

    filebatchuploaderror

     

    批量上传错误结果处理

    $('#uploadfile').on('filebatchuploaderror', function(event, data, msg) {

         

    });

    filebatchuploadsuccess

     

    批量上传成功结果处理

    $('#uploadfile').on('filepreupload', function(event, data, previewId, index) {

           

    });

    filebatchselected

     

    选择文件后处理事件

    $("#fileinput").on("filebatchselected", function(event, files) {

    });

    upload

     

    文件上传方法

    $("#fileinput").fileinput("upload");

    fileuploaded

     

    上传成功后处理方法

    $("#fileinput").on("fileuploaded", function(event, data, previewId, index) {

    });

    filereset

     

     

    fileclear

     

    点击浏览框右上角X 清空文件前响应事件

    $("#fileinput").on("fileclear",function(event, data, msg){

    });

    filecleared

     

    点击浏览框右上角X 清空文件后响应事件

    $("#fileinput").on("filecleared",function(event, data, msg){

    });

    fileimageuploaded

     

    在预览框中图片已经完全加载完毕后回调的事件

     

    六、    常见错误:

     (1)   当点击上传后,报错,提示你必须选择最少X个文件上传。

    错误原因:html中input标签元素属性:data-min-file-count="2" 设置为X个文件,限制上传文件数。

    展开全文
  • $input.fileinput({ uploadUrl: "upload.php", uploadAsync: false, showUpload: false, showRemove: false, minFileCount: 1, maxFileCount: 5, overwriteInitial: false, uploadExtraData: function() { return...
  • BootstrapFileInput

    2016-09-10 15:48:19
    SpringMVC 使用BootstrapFileInput 实现图片上传及预览功能
  • <p>I integrated <a href="http://jasny.github.io/bootstrap/javascript/#fileinput" rel="nofollow">Jasny Fileinput</a> Widget into my existing form. When I select new file, It will display two button: ...
  • 本篇介绍如何使用bootstrap fileinput.js,file input插件功能如此强大,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,最好用的文件上传组件。 文件夹结构 版本都是3.x &...
  • <div><h3>FOLLOW THESE INSTRUCTIONS CAREFULLY <p><em>ISSUES THAT DO NOT CONTAIN NECESSARY INFORMATION MAY BE CLOSED, IMMEDIATELY</em></p> <p>The issue tracker is NOT the place for general support....
  • 最近时间空余,总结了一些关于bootstrap fileinput组件的一些常见用法,特此分享到软件开发网平台,供大家参考,同时也方便以后的查找。本文写的不好还请见谅。 一、效果展示 1、原始的input type=’file’,简直...
  • bootstrap-fileinput是基于bootstrap的上传控件,此控件网上有很多例子。我照着例子做后发现请求无法提交到后台,反复测试后发现,不能禁止预览(showPreview要设置为true),禁止预览后fileuploaded则无法响应(实际...
  • $("#projectfile").fileinput('refresh', { initialPreview: preList, initialPreviewConfig: initPreviewConfig }); 后台 spring @RequestMapping(value = "/deleteAssetsImage.html", method ...
  • Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅。另外附上一段调用方发和servlet...
  • 经过一番查找,功夫不负有心人,还是被博主找到了这个组件:bootstrap fileinput。在此记录下,就算做个学习笔记,也给需要使用的朋友提供点方便。 Bootstrap组件系列文章: Bootstrap实现带暂停功能的轮播组件(推荐...
  • <pre><code>import fileinput for line in fileinput.input(): process(line) </code></pre> <p>That lets your program work like<code>grep, ie. it can read either from a files specified from the commald ...
  • 因为fileinput()方法调用了两次,一次在fileinput.js里面最后几行,还有一次就是你自己写的$(this).fileinput()。在fileinput.js里的是没有设置allowedFileTypes 、allowedFileExtensions 值的。 有两种方法可以改:...
  • fileinput.css

    2018-07-25 09:08:37
    fileinput.min.css,fileinput.min.css,fileinput.min.css,
  • 关于bootstrap-fileinput

    万次阅读 热门讨论 2016-04-08 10:44:38
    最近搞了一个很简单的项目,里面需要文件上传。当然文件上传也是很简单的,不过做出成品之后发现,卧槽,火狐和谷歌两个浏览器显示的内容不一致。...百度了一下,发现bootstrap fileinput这个组件不错。 bootstrap-
  • <p>Add a fix_file_input_label function to renderers.py to add a new line after the label for FileInput widget. <p><a href="https://i.imgur.com/NOZuRkp.jpg">Rendering after the fix</a> </p><p>该提问...
  • fileinput.js

    2018-07-25 09:07:31
    fileinput.js自己修改过,用的时候看一看。
  • <p>how can i show and delete previously uploaded files with the great bootstrap-fileinput plugin from krajee, my code is: <p>html:</p> <pre><code><script> $("#images").fileinput({ uploadAsync...
  • 使用Bootstrap fileinput 插件 进行图片上传,图片保存都很顺利,只是通过uploadExtraData传递的参数,后台接收不到。望指点: 前后端代码如下: ``` ``` js: ``` $("#uploadImage").fileinput({...
  • fileinput locales zh

    2019-01-05 14:25:50
    bootstrapfileinput 文件上传 图片上传 英文转中文的js
  • 本文实例为大家分享了文件上传控件bootstrap fileinput的使用方法,供大家参考,具体内容如下 github地址:https://github.com/kartik-v/bootstrap-fileinput 官网:http://plugins.krajee.com/file-input 1.下载...
  • <pre><code>$('#input-id').fileinput({ language: 'en', uploadUrl: 'upload?path=/', maxFileCount: 5, // allowedFileExtensions : ['any'], }); </code></pre> <p>it's the variable <code>path = '/'...
  • Bootstrap FileInput Demo

    2017-06-06 14:35:56
    很漂亮的一个文件上传组件
  • input type="file" id="fileInput" name="fileInput" style="visibility: hidden"/> <input type="button" value="submit" id="ajaxSubmit" hidden /> </form> </code></pre> <p>And in (document....
  • 现用form表单和ajax做的文件上传,无奈样式是在太难看,看见bootstrap中的fileinput插件做的文件上传控件好看很多,但是又不知道如何用fileinput调用ajax,请大牛解答 $('#import').click(function() { // $('#...

空空如也

1 2 3 4 5 ... 20
收藏数 2,544
精华内容 1,017
关键字:

fileinput