【bootstrap】bootstrap上傳檔案元件

阿新 • • 發佈：2019-01-20

引入相關bootstrap檔案連結

<link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/authorization/css/style.css">
<link href="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/css/fileinput.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/css/fileinput-rtl.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>
<link href="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/themes/explorer-fa/theme.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/js/plugins/sortable.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.7/js/fileinput.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/js/locales/fr.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/js/locales/es.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/themes/explorer-fa/theme.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/themes/fa/theme.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/js/locales/zh.min.js"></script>

編寫前臺程式碼

<html>
<#include "../common/header.ftl">

<body>
<div id="wrapper" class="toggled">
<#include  "../common/nav.ftl">
    <#--上傳檔案區域-->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <form role="form" enctype="multipart/form-data" method="POST" action="/authorization/wxCard/uploadImages">
                        <div class="container">
                            <label>圖片上傳</label>
                            <div class="file-loading">
                                <input id="file-fr" name="file" type="file" multiple>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $('#file-fr').fileinput({
        theme: 'fa',
        language: 'zh',
        uploadAsync: true,//非同步上傳
        uploadUrl: '/authorization/wxCard/uploadImages',
        allowedFileExtensions: ['jpg', 'png', 'gif','mp4'],
        maxFileSize:0,
        maxFileCount:10
    }).on("fileuploaded", function(event,data) { //非同步上傳成功結果處理
        console.log(data.response.src);
        alert("上傳成功");
        $("#userImage").val(data.response.src);
    })
</script>
</html>

後臺接收圖片，並存入本地

@PostMapping("/uploadImages")
@ResponseBody
public String uploadImages(HttpServletRequest request,MultipartFile file){
    try{
        String filename = file.getOriginalFilename();
        //上傳的路徑
        String path = "d:\\upload";
        filename = changeName(filename);
        String rappendix = "upload/" + filename;
        filename = path + "\\" + filename;
        File file1 = new File(filename);
        file.transferTo(file1);
        String str = "{\"src\":\"" + rappendix + "\"}";
        return str;
    }catch (Exception e){
        throw new AuthorizationException("上傳檔案失敗");
    }
}

效果如下:

選中兩個檔案

【bootstrap】bootstrap上傳檔案元件

引入相關bootstrap檔案連結 <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <link rel="styles

【java】刪除上傳到伺服器的臨時檔案

刪除上傳到伺服器的臨時檔案前言此篇博文主要說明此前在解析excel檔案中上傳的excel檔案進行一個處理。說明伺服器 resin伺服器程式碼操作進行的程式碼實現全在js

【12】FtpWebRequest上傳下載

style std [] lena adf spa cto fin console 下載文件 1 /// <summary> 2 /// 下載文件 3 /// </summary> 4 /// <param name

【c#】winform 上傳圖片

geb mes tap pict efi for text 選擇 amp 1、拖拽上傳圖片 1.1、後臺代碼中修改窗體屬性，添加 AllowDrop = true 1.2、給窗體添加拖拽事件，在事件列表找到拖拽雙擊即可：在 DragDrop 生成的方法中添加代碼如

【ASP】FileUpload上傳圖片並儲存資料庫

介面簡單粗糙，將就將就，程式碼複製過去應該可以直接用前臺程式碼就這點： <div class="Upload"> <asp:FileUpload ID="FileUpload" runat="server" /> &

在Vue中封裝一個上傳檔案元件

封裝一個上傳檔案的元件，如下：使用<input type='file'> 來實現檔案上傳，具體操作參照以往JS版的實現這裡主要說作為一個元件，選中檔案之後，在輸入框中顯示檔名稱，點選Submit將將檔案傳給父元件，再由父元件提價到後臺

【C#】Web上傳圖片並加上水印

前言我們經常在網上下載圖片，有很多圖片都是有水印的，就搞的很煩。今天分享一個如何給自己上傳到自己網址上的圖片加上水印。需求在自己網站上傳一張圖片，儲存在U

【網站】WordPress 上傳本地主題提示錯誤無法定位WordPress內容目錄(wp-content) 解決辦法

【前言】前幾日給一學弟搭建blog時，遇到了主題無法安裝的問題，現在寫下解決方案以備不時之需。 1. 找到根目錄下的wp-config.php 檔案；在檔案末尾寫入以下內容 if(is

【java】批量上傳圖片並回顯功能

一、前言在電商的網站中，圖片上傳功能必不可少，小編在最近的專案中就有遇到了一個批量上傳圖片並且要回顯的功能。可以說這是一個很常見的功能了，已經爛大街了，但是小編還是要認真的分析一下，以便

【Android】AndroidStudio上傳程式碼到SVN及從SVN中檢出程式碼

最近開發新專案,需要進行版本控制,以前沒有在AndroidStudio使用過SVN,查找了一些資料,現在簡單整理一下,做一個備忘,也希望讓讀者朋友們少走一點彎路. 首先記錄一下將程式碼上傳到SVN伺服器倉庫,步驟如下: 一. 選擇忽略檔案按

Vue開發——封裝上傳檔案元件

使用elementui的 el-upload外掛實現圖片上傳元件每個專案存在一定的特殊性，所以資料的處理會不同 pictureupload.vue:<template> <div

Bootstrap之fileinput檔案上傳控制元件

前言~ 前段時間做專案用到了bootstrap裡中的檔案上傳控制元件，對此特定寫這篇文章，講述一下bootstrap的檔案上傳空間的使用方法。我們進入正題吧！首先bootstrap是基於jquery的，因此要匯入

檔案上傳控制元件bootstrap-fileinput的使用

一、準備1、外掛下載地址：https://github.com/kartik-v/bootstrap-fileinput/ 下載後的壓縮包解壓資料夾內容如下：　　 js：外掛核心js程式碼，引用fileinput.min.js/fileinput.js即可，預設外掛語言為英文，如需要中文需要引用

基於bootstrap的檔案上傳控制元件-bootstrap-fileinput

github地址：https://github.com/kartik-v/bootstrap-fileinput 官網：http://plugins.krajee.com/file-input 1.

BootStrap增強型的多檔案上傳控制元件BootStrap-FileInput

基於BootStrap專案需求一款多檔案上傳控制元件,通過篩選分析發現了BootStrap-FileInput這款控制元件(開源),能滿足大多數檔案上傳需求,簡單寫一下使用方法和遇到的坑！！專案的前後臺基本上就是使用很典型的元件 BootStrap + Spring

【input】檔案上傳控制元件隱藏和前端型別限制

1. 如何隱藏檔案上傳控制元件使用 CSS3 的 opacity 屬性設定透明度為 0（隱藏），詳情參看說明並使用絕對定位 position：absolute 其父標籤使用相對定位 position:relative <a href

【Linux】CentOS Linux 7.4系統上傳檔案失敗:sftp put: failed to upload d:/0data/test.txt Failure

CentOS Linux 7.4系統上傳檔案失敗場景：使用SecureCRT軟體下sftp長傳一個幾十M的檔案上傳失敗，報錯如下：sftp put: failed to upload d:/0data/test.txt Failure 解決：一開始以為是CRT軟體的問題，但使用Xs

AJAX和from-上傳檔案示例【django專案】

專案簡述本Django專案為測試例項專案，用於學習測試。分別用三種Django檔案上傳方式(form方式、jQuery+jQuery.ajax方式、原生JS+原生ajax方式)做上傳功能示例檔案檔案釋義 form_upload.htmlform上傳檔案靜態頁面 jquery_ajax_upl

【上傳檔案】基於阿里雲的視訊點播VOD、物件儲存OSS實現音視訊圖片等檔案上傳

一、效果演示 a.測試介面初始化 b.點選【上傳視訊】 c.點選【開始上傳】 d.點選【上傳音訊】選擇音訊之後點選【開始上傳】 c.點選【上傳圖片】，注意圖片上傳為單按鈕，選擇檔案之後自動完成上傳 d.點選【確定】來獲取以上幾個上傳檔案成功之後

【springboot】5、SpingBoot檔案上傳、多檔案上傳、檔案下載(斷點續傳)

檔案上傳 SpringBoot的檔案上傳相對比較簡單，檔案資訊都包含在MultipartFile物件中，只要從中獲取檔案資訊即可不煽情，直接上程式碼吧，這個部分出門右拐“百度一下”一大堆 /** * 單檔案上傳 * * @param name 攜帶的其他文字表單(可以

【bootstrap】bootstrap上傳檔案元件

相關推薦