配置參數 ring 字段 pub edit ng- apt led false

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代碼如下： [html] view plain copy

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

導入後第二步要寫js初始化這個插件，js代碼如下： [javascript] view plain copy

1. function initFileInput(ctrlName,uploadUrl) {
2. var control = $(‘#‘ + ctrlName);
3. control.fileinput({
4. language: ‘zh‘, //設置語言
5. uploadUrl: uploadUrl, //上傳地址
6. showUpload: false, //是否顯示上傳按鈕
7. showRemove:true,
8. dropZoneEnabled: false,
9. showCaption: true,//是否顯示標題
10. allowedPreviewTypes: [‘image‘],
11. allowedFileTypes: [‘image‘],
12. allowedFileExtensions: [‘jpg‘, ‘png‘],
13. maxFileSize : 2000,
14. maxFileCount: 1,
15. //initialPreview: [
16. //預覽圖片的設置
17. // "<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=‘肖像圖片‘>",
18. //],
20. }).on("filebatchselected", function(event, files) {
21. $(this).fileinput("upload");
22. })
23. .on("fileuploaded", function(event, data) {
24. $("#path").attr("value",data.response);
25. });
26. }
28. $(function () {
29. var path="${base}/admin/product/upload.htm";
30. initFileInput("file",path);
32. })

這是異步上傳的js代碼，而且還是選擇圖片自動上傳的，當然你也可以修改這個js改為顯示上傳按鈕，點擊上傳按鈕才上傳。因為該插件的異步上傳是ajax提交，後臺spring就按照ajax提交獲取它的提交。java代碼如下: [java] view plain copy

1. /**
2. *
3. * 方法名: upload
4. * 方法作用: 文件異步上傳
5. * 創建人：Wu Feng
6. * 創建時間：2016-11-9 下午10:16:36
7. * @param @param request
8. * @param @param product
9. * @param @return
10. * 返回值類型： String
11. * @throws
12. */
13. @ResponseBody
14. @RequestMapping("/upload")
15. public String upload(MultipartHttpServletRequest request,Product product) {
16. //存放地址
17. String path=productService.upload(request);
18. return path;
19. }

將文件上傳後，返回文件的路徑，js代碼： $("#path").attr("value",data.response);將路徑返回，賦值頁面隱藏的路徑字段。然後點擊確定把數據插入進去。 如果是同步提交，需要設置該插件配置參數uploadAsync，因為該插件默認是異步提交，因此把它設為false就行。js代碼如下： [javascript] view plain copy

1. function initFileInput(ctrlName) {
2. var control = $(‘#‘ + ctrlName);
3. control.fileinput({
4. language: ‘zh‘, //設置語言
5. showUpload: false, //是否顯示上傳按鈕
6. showRemove:true,
7. dropZoneEnabled: false,
8. showCaption: true,//是否顯示標題
9. allowedPreviewTypes: [‘image‘],
10. allowedFileTypes: [‘image‘],
11. allowedFileExtensions: [‘jpg‘, ‘png‘],
12. maxFileSize : 2000,
13. maxFileCount: 1,
14. uploadAsync: false, //同步上傳
15. //initialPreview: [
16. //預覽圖片的設置
17. // "<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=‘肖像圖片‘>",
18. //],
20. })

[javascript] view plain copy

1. //初始化就調用該方法
2. $(function () {
3. initFileInput("file");
4. })

java後臺的代碼： [java] view plain copy

1. /**
2. *
3. * 方法名: save
4. * 方法作用: 產品保存
5. * 創建人：Wu Feng
6. * 創建時間：2016-11-9 下午07:26:08
7. * @param @param request
8. * @param @param news
9. * @param @return
10. * 返回值類型： String
11. * @throws
12. */
13. @RequestMapping("/save")
14. public String save(MultipartHttpServletRequest request,Product product) {
15. //存放地址
16. String path=productService.upload(request);
17. product.setPath(path);
18. //存入產品信息
19. productService.insert(product);
21. return "redirect:/admin/product/add.htm";
22. }

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

轉：http://blog.csdn.net/u012157999/article/details/53150845

---

bootstrap-fileinput 不顯示中文問題

我引入了本地js文件，但是還是不顯示中文，求教，在線等

<script src="//cdn.bootcss.com/bootstrap-fileinput/4.3.5/js/fileinput.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.3.5/js/locales/zh.min.js"></script>

function initFileInput() {
    var projectfileoptions = {
        language : ‘zh‘
    }
    $("#input-id").fileinput(projectfileoptions);
}

解決方法：

已經解決了，原因是我的html是寫成這樣<input type="file" class="file">，結果去掉這個class就OK了，真是太坑了

bootstrap fileinput插件使用感悟