bootstrap fileinput 的填坑感悟              這個外掛在demo的網站地址http://plugins.krajee.com/file-preview-icons-demo；不得不承認這個外掛很強大，作為一個檔案上傳外掛做到了預覽，而且還支援國際化，但是唯一的缺點就是api爛的到極點（應該說沒有API）。         即使沒有API，也不能阻擋我使用的熱情，即時前方再多的坑也被我一一填滿。希望我這篇文章對於初學者有點幫助。廢話不多說，開始填坑之旅。         第一步開始知道需要應用的檔案：           css：<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
           <link href="${base}/style/admin/css/fileinput.min.css" rel="stylesheet" />            js:    <script type="text/javascript" src="${base}/plugin/umeditor1_2_2/third-party/jquery.min.js"></script>
           <script type="text/javascript" src="${base}/style/admin/js/fileinput.min.js"></script>
           <script type="text/javascript" src="${base}/style/admin/js/fileinput_locale_zh.js"></script>
           <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>              簡單說明下css檔案需要Bootstrap的css檔案和該外掛的css檔案，js檔案裡匯入fileinput_locale_zh.js，是為了支援中文，如果你的網站是支援國際化的，那還需要匯入各國的js（這些都可以在這個外掛的官方下載到，常見的國家都有）,jsp程式碼如下：

<div class="form-group">
			<label class="col-sm-2 control-label">圖片上傳:</label>
	    	<div class="col-sm-4">
	       		<input id="file" name="myfile" type="file" data-show-caption="true">
	       		<p class="help-block">支援jpg、jpeg、png格式，大小不超過2.0M</p>
	    	</div>
	    </div>
 

        匯入後第二步要寫js初始化這個外掛，js程式碼如下：

function initFileInput(ctrlName,uploadUrl) {    
	    var control = $('#' + ctrlName); 
	    control.fileinput({
	        language: 'zh', //設定語言
	        uploadUrl: uploadUrl,  //上傳地址
	        showUpload: false, //是否顯示上傳按鈕
	        showRemove:true,
	         dropZoneEnabled: false,
	        showCaption: true,//是否顯示標題
	        allowedPreviewTypes: ['image'],
                allowedFileTypes: ['image'],
                allowedFileExtensions:  ['jpg', 'png'],
                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='肖像圖片'>",
            //],
	        
	    }).on("filebatchselected", function(event, files) {
            $(this).fileinput("upload");
        	})
        	.on("fileuploaded", function(event, data) {
        		$("#path").attr("value",data.response);
    	});
	}
	
	$(function () {
		var path="${base}/admin/product/upload.htm";
		initFileInput("file",path);
		
	})

             這是非同步上傳的js程式碼，而且還是選擇圖片自動上傳的，當然你也可以修改這個js改為顯示上傳按鈕，點選上傳按鈕才上傳。因為該外掛的非同步上傳是ajax提交，後臺spring就按照ajax提交獲取它的提交。java程式碼如下:

       /**
	 * 
	* 方法名: upload
	* 方法作用: 檔案非同步上傳
	* 建立人：Wu Feng
	* 建立時間：2016-11-9 下午10:16:36   
	* @param @param request
	* @param @param product
	* @param @return    
	* 返回值型別： String    
	* @throws
	 */
	@ResponseBody
	@RequestMapping("/upload")
	public String upload(MultipartHttpServletRequest request,Product product) {
		//存放地址
		String path=productService.upload(request);
		return path;
	}

            將檔案上傳後，返回檔案的路徑，js程式碼：  $("#path").attr("value",data.response);將路徑返回，賦值頁面隱藏的路徑欄位。然後點選確定把資料插入進去。              如果是同步提交，需要設定該外掛配置引數uploadAsync，因為該外掛預設是非同步提交，因此把它設為false就行。js程式碼如下：

    function initFileInput(ctrlName) {    
	    var control = $('#' + ctrlName); 
	    control.fileinput({
	        language: 'zh', //設定語言
	        showUpload: false, //是否顯示上傳按鈕
	        showRemove:true,
	         dropZoneEnabled: false,
	        showCaption: true,//是否顯示標題
	        allowedPreviewTypes: ['image'],
            allowedFileTypes: ['image'],
            allowedFileExtensions:  ['jpg', 'png'],
            maxFileSize : 2000,
           	maxFileCount: 1,
          	uploadAsync: false, //同步上傳
            //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='肖像圖片'>",
            //],
	        
	    })
	}

//初始化就呼叫該方法
    $(function () {
    	initFileInput("file");
    })	

           java後臺的程式碼：

/**
	 * 
	* 方法名: save
	* 方法作用: 產品儲存
	* 建立人：Wu Feng
	* 建立時間：2016-11-9 下午07:26:08   
	* @param @param request
	* @param @param news
	* @param @return    
	* 返回值型別： String    
	* @throws
	 */
	@RequestMapping("/save")
	public String save(MultipartHttpServletRequest request,Product product) {
		//存放地址
		String path=productService.upload(request);
		product.setPath(path);
		//存入產品資訊
		productService.insert(product);
		
		return "redirect:/admin/product/add.htm";
	}

            我這裡採用的是同步提交，當用戶選擇檔案後，就只有點選確定提交，而不是點選上傳後，在點選確定提交，這樣省去了一部操作，也是極大的方便。             說到這裡，大家覺得並沒有坑，其實坑很多，比如我碰到了顯示的一直都是英文，不是因為我沒有匯入fileinput_locale_zh.js，網上一查，原來是沒有去掉class=“file”，非常感謝這個網站：點選開啟連結，第二個坑就是我不想要顯示拖拽區域，因為我喜歡簡單點，那樣我覺得太難看了，這時候你需要知道全部的配置資訊，這裡感謝這位csdn好友提供了配置資訊（很給力）。網站地址如下：點選開啟連結             是不是該結束了，並沒有，細心你的會發現，那我們編輯產品資訊的時候，需要看他上傳的產品圖片，這個也簡單，你只要在我註釋的程式碼裡寫上圖片地址就行了。附上我的勞動成品：