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的使用,如有问题请留言



阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_25073789/article/details/70670191
文章标签: bootstrap 实例 插件
个人分类: java web
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭