首頁 > web前端 > js教程 > 主體

BootStrap實作上傳檔案時顯示進度

PHPz
發布: 2018-10-15 15:57:36
原創
2431 人瀏覽過

這次帶給大家BootStrap實作上傳檔案時顯示進度,BootStrap實作上傳檔案時顯示進度的注意事項有哪些,以下就是實戰案例,一起來看一下。

【相關影片推薦:Bootstrap教學

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 style="font-family: Arial, Verdana, sans-serif;">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 (); //记得加载,初始化
登入後複製

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

建議閱讀:

JS操作瀏覽器開啟關閉

JS操作前端快取

js怎麼封裝Canvas成外掛

#

以上是BootStrap實作上傳檔案時顯示進度的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!