bootstrap fileinput上傳圖片前端介面例項

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/fileinput.min.css">
    <script src="js/jquery-2.1.4.min.js"></script 
>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/fileinput.min.js"></script>
    <script src="js/zh.js"></script>
</head>
<style>
    .box {
        /*width: 1524px;*/
overflow: hidden;
        color: #555;
        margin-left: 50px;
    }

    .title  
{
        padding: 10px 0 30px;
    }
</style>
<body>
<div class="box">
    <div class="container kv-main">
        <h3 class="title">風控進件</h3>
        <h4 style="padding: 10px 0;" class="list-group-item-danger">關聯汽車銷售合同編號：<span>xxxxxx</span></h4>
        <form  
enctype="multipart/form-data" style="margin-top: 20px">
            <h4>1.申請表</h4>
            <div class="form-group">
                <input id="file-01" class="file-loading" type="file">
            </div>
            <h4>2.身份證（正反面）</h4>
            <div class="form-group">
                <input id="file-02" class="file-loading" type="file" multiple data-max-file-count="2">
            </div>
            <h4>3.駕駛證</h4>
            <div class="form-group">
                <input id="file-03" class="file-loading" type="file">
            </div>
            <h4>4.工作證明</h4>
            <div class="form-group">
                <input id="file-04" class="file-loading" type="file">
            </div>
            <h4>5.徵信報告</h4>
            <div class="form-group">
                <input id="file-05" class="file-loading" type="file" multiple>
            </div>
            <h4>6.工資卡或經營走賬卡（正面）</h4>
            <div class="form-group">
                <input id="file-06" class="file-loading" type="file" multiple>
            </div>
            <h4>7.流水（多圖）</h4>
            <div class="form-group">
                <input id="file-07" class="file-loading" type="file" multiple>
            </div>
            <h4>8.房產證（多圖）</h4>
            <div class="form-group">
                <input id="file-08" class="file-loading" type="file" multiple>
            </div>
            <h4>9.結婚證（可選）</h4>
            <div class="form-group">
                <input id="file-09" class="file-loading" type="file">
            </div>
            <h4>10.擔保人身份證（正反面 可選）</h4>
            <div class="form-group">
                <input id="file-10" class="file-loading" type="file" multiple>
            </div>
            <!--<div class="du-btn">-->
                <!--<a href="javascript:;" class="btn btn-danger" role="button" style="padding: 6px 38px">儲存-->
                <!--</a>-->
                <!--<a href="javascript:;" class="btn btn-warning" role="button" style="padding: 6px 38px">-->
                    <!--取消-->
                <!--</a>-->
            <!--</div>-->
</form>
    </div>
</div>
</body>
<script>
    $(function () {
        initFileInput("file-01");
        initFileInput("file-02");
        initFileInput("file-03");
        initFileInput("file-04");
        initFileInput("file-05");
        initFileInput("file-06");
        initFileInput("file-07");
        initFileInput("file-08");
        initFileInput("file-09");
        initFileInput("file-10");
    })

    function initFileInput(ctrlName) {
        var control = $('#' + ctrlName);
        control.fileinput({
            language: 'zh', //設定語言
uploadUrl: "aa.php", //上傳的地址
allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的檔案字尾
//            maxFilesNum: 5,//上傳最大的檔案數量
            //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
uploadAsync: true, //預設非同步上傳
showUpload: true, //是否顯示上傳按鈕
showRemove: true, //顯示移除按鈕
showPreview: true, //是否顯示預覽
showCaption: false,//是否顯示標題
browseClass: "btn btn-primary", //按鈕樣式
dropZoneEnabled: false,//是否顯示拖拽區域
            //minImageWidth: 50, //圖片的最小寬度
            //minImageHeight: 50,//圖片的最小高度
            //maxImageWidth: 1000,//圖片的最大寬度
            //maxImageHeight: 1000,//圖片的最大高度
maxFileSize: 2048,//單位為kb，如果為0表示不限制檔案大小
            //minFileCount: 0,
//            maxFileCount: 3, //表示允許同時上傳的最大檔案個數
enctype: 'multipart/form-data',
            validateInitialCount: true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "選擇上傳的檔案數量({n}) 超過允許的最大數值{m}！",
            layoutTemplates:{
                actionUpload:"",   //去掉單獨上傳按鈕
//                actionDelete:"",
//                actionZoom:""
}

        }).on('filepreupload', function (event, data, previewId, index) {     //上傳中
var form = data.form, files = data.files, extra = data.extra,
                    response = data.response, reader = data.reader;
            console.log('檔案正在上傳');
        }).on("fileuploaded", function (event, data, previewId, index) {    //一個檔案上傳成功
alert(1)
            console.log('檔案上傳成功！' + data.id);

        }).on('fileerror', function (event, data, msg) {  //一個檔案上傳失敗
alert(2)
            console.log('檔案上傳失敗！' + data.id);
        })
    }
</script>
</html>

bootstrap fileinput上傳圖片前端介面例項

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <li

bootstrap-fileinput上傳完檔案後再開啟上傳檔案介面顯示取消按鈕

Bootstrap File Input是一款基於bootstrap框架的html5上傳檔案外掛，具體展示效果如下：使用時常見配置如下： $(".multipleFileUpload").fileinput({ &n

bootstrap-fileinput上傳檔案的外掛使用總結----編輯已成功上傳過的圖片

這裡所講述的是：編輯已成功上傳過的圖片參考：Initial Preview Data http://plugins.krajee.com/file-preview-management-demo下面標記紅色的部<!-- PREVIEW DATA

bootstrap-3-上傳圖片-列表顯示

all oca 地址 .post locale setting jee owb log 效果導入的js和css  <link rel="stylesheet" href="htt

微信小程序上傳圖片(前端+PHP後端)

ebs name inf upload quest spa 列表技術 ima 一、wxml文件 <text>上傳圖片</text> <view> <button bindtap="uploadimg">點擊選擇上傳圖&l

Layui上傳圖片帶介面

layui.use('upload', function () { var upload = layui.upload; upload.render({ elem: '#LAY_avatarUpload' , url: setter.apiDomain + '

扒一扒使用boostrap-fileinput上傳外掛遇到的坑，Bootstrap-fileinput上傳外掛的使用詳解

轉自 https://blog.csdn.net/zlb_lover/article/details/76548772 由於公司專案的需求，需要實現動植物名錄的新增，包括姓名等資訊和圖片等，需要使用bootstrap-fileinput的上傳外掛，在提交新增介面

springmvc上傳圖片通用介面

這裡介紹一下工作中做上傳圖片的體會，工作中是將選擇圖片之後非同步上傳到伺服器，返回一個在伺服器儲存的圖片路徑，然後賦值到一個隱藏域裡，提交表單的時候，再去執行存資料庫的操作。個人感覺這種上傳圖片的方式要比把表單資料和圖片一起提交要好一點。直接來看程式碼，這裡只展示controller層

用封裝好的okHttp3上傳圖片到介面

首先 ok的兩個依賴: //okhttp compile 'com.squareup.okhttp3:okhttp:3.6.0' compile 'com.squareup.okio:okio:1.11.0'

C# HttpClient Post 引數同時上傳檔案上傳圖片呼叫介面

// 呼叫介面上傳檔案 using (var client = new HttpClient()) { using (var multipartFormDataContent = new MultipartFormDataContent()) { var val

Bootstrap-fileinput上傳外掛的使用詳解

由於公司專案的需求，需要實現動植物名錄的新增，包括姓名等資訊和圖片等，需要使用bootstrap-fileinput的上傳外掛，在提交新增介面表單資料的同時上傳一張或者多張圖片，並將上傳的圖片儲存到本地磁碟中(本文是f:盤的目錄下)，在在實現的時候，不適用bootstrap-

扒一扒使用boostrap-fileinput上傳外掛遇到的坑，Bootstrap-fileinput上傳外掛的使用詳解，

上傳圖片——前端部分

html部分： <div id="head_img"> <a class="file" onclick="imgFileClick()"> <img id="head_imgurl" src="">

php 應用 bootstrap-fileinput 上傳檔案外掛操作的方法

//先載入外掛所需要的 js 、css 檔案 <link href="css/fileinput.css" rel="stylesheet" type="text/css" /&g

laravel裡面一個上傳圖片的介面，並建立軟連結，訪問圖片

我們同時上傳的還有暱稱，圖片是儲存在resource表裡面，，對應在userProfile有關聯id; 利用laravel自帶上傳很方便，，但是不能直接訪問，，所以需要建立軟連結：PHP artisan storage:link 執行該條命令會在public裡面生成儲存圖

前端上傳圖片,後臺向介面推送

final String remote_url = “URL”;// 第三方伺服器請求地址 CloseableHttpClient httpClient = HttpClients.createDefault(); String result = “”; tr

bootstrap fileinput 元件整合SpringMVC上傳圖片到本地磁碟

整合前的準備步驟 1.搭建好基礎框架，本文用的是SSM(Spring+SpringMVC+Mybatis)，這裡的過程就不在本文中講了，之前我做個一個demo(ssm整合+使用者模組)，可以參考這個搭建好。搭建後的效果圖圖1. 圖2.

bootstrap fileinput之手機圖片上傳顯示旋轉問題

最近因為專案需要用到了bootstrap fileinput的外掛，在使用蘋果手機上傳圖片預覽時，發現圖片方向和手機本地儲存方向不一致問題。後來通過查詢資料瞭解圖片具有EXIF(Exchangeable Image File Format)旋轉屬性標識，fileinput對

web前端 ajax請求上傳圖片數據類型處理

div stat log sta 直接文件類型 part ucc -a form: function (url, paras, files, success) {//上傳的文件類型是MultipartFile[]//如果把需要的參數直接傳入，則會請求錯誤//設置請求參數

基於bootstrap的上傳插件fileinput實現ajax異步上傳功能(支持多文件上傳預覽拖拽)

允許 jquery pac locale 錯誤信息部分 src alt date 首先需要導入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte

bootstrap fileinput上傳圖片前端介面例項

相關推薦