BootStrap使用file-input插件上傳圖片的方法

更新時(shí)間：2016年09月05日 11:39:45 作者：韜shao

這篇文章主要介紹了BootStrap使用file-input插件上傳圖片的方法，bootstrap的圖片上傳框架 file-input 插件非常不錯(cuò)，下面小編通過(guò)本文介紹下這個(gè)插件的使用方法，感興趣的朋友一起看看吧

最近在寫自己的個(gè)人網(wǎng)站 ,前端使用的bootstrap框架 ,做到上傳圖片功能的時(shí)候網(wǎng)上找到一個(gè)基于bootstrap的圖片上傳框架 file-input 插件, 這個(gè)插件做的非常符合我的審美觀,所以簡(jiǎn)單記錄一下這個(gè)插件的使用方法

首先根據(jù)自己的項(xiàng)目路徑引入插件css和js文件

注意locale語(yǔ)言文件在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代碼因?yàn)槲也皇菍I(yè)前端所以前端代碼寫的很爛輕噴敲打

<!-- 模態(tài)框（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>&times; 
<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">曲調(diào)</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">關(guān)閉 
<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', //設(shè)置語(yǔ)言 
uploadUrl: uploadUrl, //上傳的地址 
allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后綴 
showUpload: true, //是否顯示上傳按鈕 
showCaption: false,//是否顯示標(biāo)題 
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是后臺(tái)給的訪問(wèn)路徑了

這里特別要注意的是這一段

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適用于傳額外參數(shù)是可以用于提交form表單的其他input框數(shù)據(jù)

uploadExtraData:{ 
type:"type", 
tune:"tune" 
}

一般的靜態(tài)數(shù)據(jù)如上圖提交后臺(tái)就可以直接接到了但是這樣寫會(huì)得不到動(dòng)態(tài)數(shù)據(jù) 數(shù)據(jù)只會(huì)在初始化的時(shí)候生成一次之后不會(huì)改變
這個(gè)問(wèn)題糾結(jié)了我不少時(shí)間最后是在git上面看外國(guó)朋友們的討論然后參考api才解決掉

這些寫好之后就可以看到效果圖了

樣式還是很不錯(cuò)的點(diǎn)擊上傳之后整個(gè)from的數(shù)據(jù)都會(huì)提交到后臺(tái)

在網(wǎng)上找的很多該插件的應(yīng)用整合的都是php 我是用java寫的這里也上一下后臺(tái)接收的代碼 springmvc框架接收數(shù)據(jù)還是很方便的

這樣就完成了數(shù)據(jù)參數(shù)和圖片參數(shù)的傳遞了然后后臺(tái)調(diào)用文件上傳的代碼存入圖片即可

該插件該有很多值得研究的用法這里只是簡(jiǎn)單的說(shuō)一下使用方式并完成動(dòng)態(tài)數(shù)據(jù)的傳輸剛剛接觸這個(gè)插件的朋友們可以稍微做一下參考。

關(guān)于BootStrap使用file-input插件上傳圖片的方法的相關(guān)知識(shí)就給大家介紹這么多，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: