用bootstrap file input 上傳圖片

yunhao 發布于2019-08-26 12:08 / 3033人閱讀

項目中經常會遇到文件上傳，管理多文件上傳過程的需求。
bootstrap file input組件算是不錯的解決方案

項目Github地址：https://github.com/kartik-v/b...

除此之外還有一個官方在線文檔，提供各種示例：http://plugins.krajee.com/fil...

組件開發多年，功能強大，最簡單的集成方式卻并不復雜，首先下載源代碼：

php composer.phar require kartik-v/bootstrap-fileinput "@dev"

插件兼容bootstrap3/4
引入相關文件：

最簡單的初始化代碼如下：


$("#input-id").fileinput();

但要完成一個基本可用的狀態，還需要增加以下配置項：

$("#cover").fileinput({
    language: "zh",
    showCaption: false, // 不顯示本地文件名
    allowedFileTypes: ["image"], // 只允許上傳圖片
    allowedFileExtensions: ["jpg", "jpeg", "png", "gif"], 
    uploadUrl: "{{ url("uploads/image") }}" //上傳圖片的服務器地址
}).on("fileuploaded", function(event, data, previewId, index){
    var response = data.response;
    $("input#coverUploader").attr("required", false);
    var input = $("");
    input.attr("value", response.key);
    $("form").append(input);
});

That"s all.

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/108091.html

JavaScript精編干貨

摘要：老姚淺談怎么學鑒于時不時，有同學私信問我老姚，下同怎么學前端的問題。擼碼聽歌，全局控制。淺析用 js 解析 xml 的方法由于項目上需要解析 xml，于是各種百度，然后自己總結了下各個主流瀏覽器解析 xml 的方法，只能是很淺顯的知道他的用法，但是還沒有深層次的研究。裝 X - 建立自己的斗圖網站庫之前加過一個斗圖群，看到很多經典的表情，然后就收藏到了 QQ，迫于本屌絲開不起...

Fourierr 2019-08-21 18:46 評論0 收藏0
flask入門4-文件上傳與郵件發送

摘要：文件上傳郵件發送一原生文件上傳修改頭像提交文件上傳的視圖函數有文件上傳了拿到文件名稱圖片上傳保存的路徑使用和渲染文件上傳自定義一個文件上傳的表單類修改頭像文件不能為空該文件類型不允許上傳提交生成隨機的圖片名稱獲取圖片大小設置尺寸當前縮放文件上傳郵件發送一、原生文件上傳 form.html 修改頭像 manage.py...

vvpale 2019-07-30 16:48 評論0 收藏0
Bootstrap FileInput(文件上傳)中文API整理

摘要：默認為選擇上傳的文件數超出了允許的最大限制。在這種情況下，每一個人選擇的文件被上傳成功后，觸發事件。此事件僅在上傳和完成同步或異步批量上傳后觸發。下載地址、API和DOM地址（英語好的小伙伴可以看看）下載地址：https://github.com/kartik-v/b...API文檔：http://plugins.krajee.com/fil...D E M O：http://p...

TwIStOy 2019-08-26 13:36 評論0 收藏0
springmvc 接收上傳圖片并且存儲至本地目錄

摘要：圖片存儲的方式為存儲在虛擬目錄下并返回虛擬目錄的路徑。如果是將開發的包直接部署在服務器中，則參考配置虛擬目錄。序言：項目環境本次簡單的demo是建立在springmvc框架上的，部署環境為tomcat，前段使用的bootstrap+jquery_file_upload組件。圖片存儲的方式為存儲在虛擬目錄下并返回虛擬目錄的路徑。建議先搭配好springmvc環境再繼續參考本博客。沒有...

SimpleTriangle 2019-08-14 18:37 評論0 收藏0