錯新技術頻道小編在網上找到了基于bootstrap的圖片上傳框架的文件輸入插件，在前端使用了bootstrap框架，小編發現這個插件非常適合我們，今天錯新技術頻道小編為大家帶來BootStrap使用file-input插件上傳圖片的方法。
首先根據自己的項目路徑引入插件css和js文件
注意locale語言文件在fileinput.min.js文件之后引入
<!-- file input --> <link href="../../css/fileinput.min.css" rel="stylesheet"> <script src="../../js/fileinput.min.js"></script> <script src="../../js/locales/zh.js" type="text/javascript"></script>
然后是html代碼 因為我不是專業前端 所以前端代碼寫的很爛 輕噴敲打
<!-- 模態框（Modal） --> <span style="white-space:pre"> </span><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <span style="white-space:pre"> </span><div class="modal-dialog"> <span style="white-space:pre"> </span><div class="modal-content"> <span style="white-space:pre"> </span><div class="modal-header"> <span style="white-space:pre"> </span><button type="button" class="close" data-dismiss="modal" aria-hidden="true"> <span style="white-space:pre"> </span>× <span style="white-space:pre"> </span></button> <span style="white-space:pre"> </span><h3 class="modal-title" id="myModalLabel" align="center"> <span style="white-space:pre"> </span><b>新增曲譜信息</b> <span style="white-space:pre"> </span></h3> <span style="white-space:pre"> </span></div> <span style="white-space:pre"> </span><div class="modal-body"> <span style="white-space:pre"> </span><form id="addForm" class="bs-example bs-example-form" role="form" enctype="multipart/form-data"> <span style="white-space:pre"> </span> <div class="input-group" style="width: 566px;"> <span style="white-space:pre"> </span> <span class="input-group-addon">曲譜名稱</span> <span style="white-space:pre"> </span> <input type="text" id="scoreName" name="scoreName" class="form-control" placeholder=""> <span style="white-space:pre"> </span> </div> <span style="white-space:pre"> </span> <div class="input-group col-lg-5" style="display: inline-table; margin-top: 10px;"> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span><span class="input-group-addon">曲譜類型</span> <span style="white-space:pre"> </span> <input type="text" id="type" name="type" class="form-control"> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> </div> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <div class="input-group col-lg-5" style="display: inline-table; margin-top: 10px;margin-left: 90px;"> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span><span class="input-group-addon">曲譜難度</span> <span style="white-space:pre"> </span> <input type="text" id="difficulty" name="difficulty" class="form-control"> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> </div> <span style="white-space:pre"> </span> <div class="input-group col-lg-5" style="margin-top: 10px;"> <span style="white-space:pre"> </span> <span class="input-group-addon">曲調</span> <span style="white-space:pre"> </span> <input type="text" id="tune" name="tune" class="form-control"> <span style="white-space:pre"> </span> </div> <span style="white-space:pre"> </span> <div class="input-group" style="width: 566px; margin-top: 10px;"> <span style="white-space:pre"> </span><input id="fileup" type="file" class="file"/> <span style="white-space:pre"> </span> </div> <span style="white-space:pre"> </span></form> <span style="white-space:pre"> </span></div> <span style="white-space:pre"> </span><div class="modal-footer"> <span style="white-space:pre"> </span><button type="button" class="btn btn-default" data-dismiss="modal">關閉 <span style="white-space:pre"> </span></button> <span style="white-space:pre"> </span><!-- <span style="white-space:pre"> </span><button type="button" class="btn btn-primary" onclick="addScores()"> <span style="white-space:pre"> </span>提交 <span style="white-space:pre"> </span></button> --> <span style="white-space:pre"> </span></div> <span style="white-space:pre"> </span></div><!-- /.modal-content --> <span style="white-space:pre"> </span></div><!-- /.modal --> <span style="white-space:pre"> </span></div>
然后是js代碼 初始化file-input
//初始化fileinput控件（第一次初始化） function initFileInput(ctrlName, uploadUrl) { var control = $('#' + ctrlName); control.fileinput({ language: 'zh', //設置語言 uploadUrl: uploadUrl, //上傳的地址 allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后綴 showUpload: true, //是否顯示上傳按鈕 showCaption: false,//是否顯示標題 browseClass: "btn btn-primary", //按鈕樣式 previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", uploadAsync: false, uploadExtraData:function (previewId, index) { var obj = {}; $('#addForm').find('input').each(function() { var id = $(this).attr('id'), val = $(this).val(); obj[id] = val; }); return obj; } }); } //初始化fileinput initFileInput("fileup", http://localhost:8080/web/guita/addGuitaInfo.action);這段代碼是插件的核心了
upLoadUrl是后臺給的訪問路徑了
這里特別要注意的是這一段
uploadExtraData:function (previewId, index) { var obj = {}; $('#addForm').find('input').each(function() { var id = $(this).attr('id'), val = $(this).val(); obj[id] = val; }); return obj; }這一段代碼uploadExtraData適用于傳額外參數是 可以用于提交form表單的其他input框數據
uploadExtraData:{ type:"type", tune:"tune" }一般的靜態數據如上圖提交 后臺就可以直接接到了 但是這樣寫會得不到動態數據 數據只會在初始化的時候生成一次 之后不會改變
這個問題糾結了我不少時間 最后是在git上面看外國朋友們的討論 然后參考api才解決掉
這些寫好之后就可以看到效果圖了
樣式還是很不錯的 點擊上傳之后 整個from的數據都會提交到后臺
在網上找的很多該插件的應用整合的都是php 我是用java寫的這里也上一下后臺接收的代碼 springmvc框架接收數據還是很方便的
這樣就完成了數據參數和圖片參數的傳遞了 然后后臺調用文件上傳的代碼存入圖片即可
該插件該有很多值得研究的用法 這里只是簡單的說一下使用方式并完成動態數據的傳輸 剛剛接觸這個插件的朋友們可以稍微做一下參考。
上面就是關于BootStrap使用file-input插件上傳圖片的方法，為了幫助大家，我們收集了最齊全的專業知識，希望能對大家有幫助。
新聞熱點
疑難解答
圖片精選
