bootstrap Fileinput插件的使用实例

本篇给大家分享一个FileInput的使用实例，也是自己开发中遇到的问题

如何使用FileInput

使用时的样式

使用FileInput只需要将相关的js，css下载引用即可，相信当大家遇到这个问题的时候已经有了bootstrap开发的知识，这些基础已经不成问题

选择文件后的样式，如果配置妥当的话，点击上传按钮进度条将会读满并显示Done

前台代码，这里有一个小小的问题 form表单的enctype属性

表单中enctype="multipart/form-data"的意思，是设置表单的MIME编码。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；只有使用了multipart/form-data，才能完整的传递文件数据，进行下面的操作.

但是我们不需要配置，否则会出现form表单提交其他数据的问题

	<div class="line line-dashed line-lg pull-in"></div>
			<div class="form-group">
		        <label class="col-sm-3 control-label">照片</label>
		        <div class="col-sm-9">
		        <input id="JSh_ZhP" type="file" class="file" name="file">
		        <input type="hidden" id="JSh_ZhP_Path" name="tbllecturer.JSh_ZhP"/>
		        <p class="help-block">支持jpg、jpeg、png、gif格式，大小不超过2.0M</p>
        	</div>

接下来就说说如何配置相应的js

默认的fileinput.js应该有一个页面加载完毕的动作，我们打开fileinput.js，果然有相应的方法。

 $(document).ready(function () {
        var $input = $('input.file[type=file]');
        if ($input.length) {
            $input.fileinput();
        }    });

接下来将它注释掉，我们自己写初始化方法，在fileinput,js里添加initFileInput方法，并自己完成加载时的方法，文件上传的一般逻辑应该是点击文件上传，将文件在后台做相应的处理后将存储的Url返回添加到form表单中，跟随form表单一起提交到数据库中。.on（）方法为fileInput上传文件后的回调方法，之后对返回的数据处理即可。

 function initFileInput(ctrlName,uploadUrl) {      
    	 var control = $('#' + ctrlName);   
    	 control.fileinput({  
    	     language: 'zh', //设置语言  
    	     uploadUrl: uploadUrl,
    	     showUpload: true, //是否显示上传按钮  
    	     showRemove:true, 
    	     showPreview : true,
    	      dropZoneEnabled: false,  
    	     showCaption: true,//是否显示标题  
    	     allowedPreviewTypes: ['image'],  
    	        allowedFileTypes: ['image'],  
    	        allowedFileExtensions:  ['jpg', 'png', 'gif'],  
    	        maxFileSize : 2000,  
    	        maxFileCount: 1,  
    	        //initialPreview: [   
    	                //预览图片的设置  
    	          //      "<img src='http://127.0.0.1:8080/NewsManageSys/plugin/umeditor1_2_2/jsp/upload/20161030/55061                  477813913474.jpg' class='file-preview-image' alt='肖像图片' title='肖像图片'>",  
    	        //],  
    	       
    	 })  }
    $(document).ready(function () {
    	var path = rootPath + "/lecturer/picture/upLoad.shtml"; 
        initFileInput("JSh_ZhP",path); 
        $("#JSh_ZhP").on("fileuploaded", function (event, data, previewId, index) {
            $("#JSh_ZhP_Path").val(data.response);
             
         });

    });

后台处理的代码，我直接将文件存在了本地并将路径返回。

	@ResponseBody
	@RequestMapping("picture/upLoad")
	public String upLoad(@RequestParam("file")CommonsMultipartFile file)
	throws Exception{
		
		String path="E:/images/"+new Date().getTime()+file.getOriginalFilename();
		File newFile = new File(path);
		file.transferTo(newFile);
		Map<String, String> map = new HashMap<String, String>();
		map.put("pathUrl", path);
		JSONArray json = JSONArray.fromObject(map);
		return path;
	}

到这里大家应该学会了fileinput的使用，如有问题请留言

bootstrap Fileinput插件的使用实例

本篇给大家分享一个FileInput的使用实例，也是自己开发中遇到的问题

如何使用FileInput

猜你喜欢