溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1.做了一天終于做出來了，在上傳成功之后，可以將路徑添加到數據庫，因為一直在煩惱如何在上傳成功之后在將路徑添加到數據庫，終于弄出來了，太開心了，不得不說bootstrap的強大，之前說ajax不能上傳文件，之后想辦法，用js寫，更改了上傳文件按鈕的樣式，但是沒想到bootstrap真的太厲害了，樣式還不錯，可以預覽，圖片，限制文件的大小，格式等等，還有進度條。
后臺的代碼在之前寫過了
這只有前臺的代碼
記得:在驗證的時候，盡量用控制臺來驗證,有的時候你的代碼寫對了，但是有可能alert不顯示
console.log("aaaa");
1.導入相應的js和樣式
<script type="text/javascript" src="jsbootstrap/locales/zh.js"></script> <script type="text/javascript" src="jsbootstrap/fileinput.min.js" ></script> <link href="css/css/fileinput.min.css" rel="external nofollow" rel="stylesheet">
2.模態框里加入，千萬要記住name的屬性和你后臺的代碼屬性有關，還有class需要是file
<input type="file" name="my" class="file" id="aaa" data-show-upload="true" data-show-caption="true"><br> <span >3.具體的文件上傳的方法</span>
在上傳成功之后還有一個ajax的方法，真是太神奇了
有些時候試試才知道，可不可以
//上傳文件
Initfileinput = function (uploadurl){
$("#aaa").fileinput({
//uploadUrl: "../fileinfo/save", // server upload action
uploadUrl:"https://localhost:8080/GD/UploadAction_execute.action",
required: true,
showBrowse: true,
browseOnZoneClick: true,
dropZoneEnabled: false,
allowedFileExtensions: ["jpg", "xlsx"],//只能選擇xls,和xlsx格式的文件提交
//maxFileSize: 0,//單位為kb，如果為0表示不限制文件大小
layoutTemplates:{ actionUpload:''},
/*上傳成功之后運行*/
fileuploaded:$("#aaa").on("fileuploaded", function (event, data, previewId, index) {
console.log("Upload success");
var a = document.getElementById('aaa').value;
console.log(a);
$.ajax({
type:"post",
async:false,
url:"https://localhost:8080/GD/UploadAction_add.action",
data:{
"filepath.path" : a
},
dataType:"json",
success:function () {
console.log("添加成功");
}
})
}),
/*上傳出錯誤處理*/
fileerror:$('#aaa').on('fileerror', function(event, data, msg) {
console.log("Upload failed")
}),
});
}
Initfileinput (); //記得加載，初始化
總結
以上所述是小編給大家介紹的BootStrap實現文件上傳并帶有進度條效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
