bootstrap-3-上传图片-列表显示
效果
导入的js和css
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<link th:href="@{/js/bootstrap-fileinput-master/css/fileinput.min.css}" rel="stylesheet"/>
<link th:href="@{/js/bootstrap-fileinput-master/themes/explorer/theme.css}" rel="stylesheet"/>
<link th:href="@{/js/bootstrap-fileinput-master/css/fileinput-rtl.min.css}" rel="stylesheet"/> <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script th:src="@{/js/bootstrap-fileinput-master/js/fileinput.min.js}"></script>
<script th:src="@{/js/bootstrap-fileinput-master/themes/explorer/theme.js}"></script>
<script th:src="@{/js/bootstrap-fileinput-master/js/locales/zh.js}"></script>
html的model
<div class="modal fade" id="loadingFildPdRecommendModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" data-backdrop='static'>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<span class="modal-title" id="myModalLabel2">上传附件</span>
</div>
<div class="modal-body">
<div class="container" style="width: 100%;">
<div class="row" >
<div class="form-group">
<div class="col-sm-12">
<input id="fild-pd-recommend" name="file" type="file" multiple="multiple" class="file-loading"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
js
$(function(){
initRecommentFile();
});
function initRecommentFile(){
$.post("/pact/findrecommentfile?pdId="+pdId, function (result) {
var data = result.rows;
file_upload_Recommend(data);
});
} //权益文件上传上传
function file_upload_Recommend(data){
var preview = [];
var previewConfig = [];
for (var i = 0; i < data.length; i++) {
preview[i]=data[i].prefFinename;
var o = {};
o.caption = data[i].prefFinename;
o.size = "762980";
o.key = data[i].idStr;
o.url = "/uact/deletefile?fileid=key&type=1012-0002";//删除地址配置
previewConfig[i] = o;
}
//初始化fileinput控件(第一次初始化)
$("#fild-pd-recommend").fileinput({
theme: "explorer",
uploadUrl: "/uact/uploadfile?type=1012-0002", //上传的地址
uploadExtraData:{pdId:pdId},
minFileCount: 0,
maxFileCount: 20,
overwriteInitial: false,
showUpload: true, //是否显示上传按钮
showCaption: true,//是否显示标题
showRemove :false,
showBrowse:true,
browseOnZoneClick:true,
autoReplace:true,//是否替换
validateInitialCount:true,
allowedFileExtensions:['jpg', 'pdf', 'xls','png'],
msgInvalidFileExtension:'上传文件类型错误"{name}".只能上传"{extensions}"类型的文件',
initialPreview: preview,
/*initialPreviewAsData: true, // defaults markup
uploadExtraData: {
img_key: "1000",
img_keywords: "happy, nature", },*/
initialPreviewConfig: previewConfig,
/*initialPreviewConfig: [
{caption: "Business 1.jpg", size: 762980, url: "/site/file-delete", key: 11},
{caption: "Business 2.jpg", size: 823782, url: "/site/file-delete", key: 13, previewAsData: false},
{caption: "PDF Sample.pdf", size: 8000, url: "/site/file-delete", key: 14, type: "pdf"},
//{caption: "Lorem Ipsum.txt", type: "text", size: 1430, url: "/site/file-delete", key: 12},
//{type: "video", size: 375000, filetype: "video/mp4", caption: "Krajee Sample.mp4", url: "/site/file-delete", key: 15},
],*/
preferIconicPreview: true, // this will force thumbnails to display icons for following file extensions
previewFileIcon:'<i class="glyphicon glyphicon-file"></i> ',
previewFileIconSettings: { // configure your icon file extensions
//'doc': '<i class="fa fa-file-word-o text-primary" ><img src="/img/excel.png"/></i>',
'xls': '<i class="fa fa-file-excel-o text-success"><img src="/img/excel.png"/></i>',
//'ppt': '<i class="fa fa-file-powerpoint-o text-danger"><img src="/img/excel.png"/></i>',
'pdf': '<i class="fa fa-file-pdf-o text-danger"><img src="/img/pdf.png"/></i>',
//'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
//'htm': '<i class="fa fa-file-code-o text-info"></i>',
//'txt': '<i class="fa fa-file-text-o text-info"><img src="/img/excel.png"/></i>',
//'mov': '<i class="fa fa-file-movie-o text-warning"></i>',
//'mp3': '<i class="fa fa-file-audio-o text-warning"></i>',
// note for these file types below no extension determination logic
// has been configured (the keys itself will be used as extensions)
'jpg': '<i class="fa fa-file-photo-o text-danger"><img src="/img/jpg.png"/></i>',
//'gif': '<i class="fa fa-file-photo-o text-muted"></i>',
'png': '<i class="fa fa-file-photo-o text-primary"><img src="/img/jpg.png"/></i>'
},
previewFileExtSettings: { // configure the logic for determining icon file extensions
'doc': function(ext) {
return ext.match(/(doc|docx)$/i);
},
'xls': function(ext) {
return ext.match(/(xls|xlsx)$/i);
},
'ppt': function(ext) {
return ext.match(/(ppt|pptx)$/i);
},
'zip': function(ext) {
return ext.match(/(zip|rar|tar|gzip|gz|7z)$/i);
},
'htm': function(ext) {
return ext.match(/(htm|html)$/i);
},
'txt': function(ext) {
return ext.match(/(txt|ini|csv|java|php|js|css)$/i);
},
'mov': function(ext) {
return ext.match(/(avi|mpg|mkv|mov|mp4|3gp|webm|wmv)$/i);
},
'mp3': function(ext) {
return ext.match(/(mp3|wav)$/i);
},
}
}).on('fileclear', function(event) {
console.log("fileclear");
}).on('filecleared', function(event) {
console.log("filecleared");
}).on('fileloaded', function(event, file, previewId, index, reader) {
console.log("fileloaded");
}).on('filereset', function(event) {
console.log("filereset");
}).on('filepreremove', function(event, id, index) {
console.log('id = ' + id + ', index = ' + index);
}).on('fileremoved', function(event, id, index) {
console.log('id = ' + id + ', index = ' + index);
}).on('filepredelete', function(event, key, jqXHR, data) {
//alert(9);
/*$.ajax({
type: "POST",
cache:false,
async : true,
dataType : "json",
url: "/uact/deletefile",
data: {fileid:key,type:'1012-0002'},
success: function(data){
console.log(data);
$('#fild-pd-recommend').fileinput('reset');
}
});*/
}).on('filedeleted', function(event, key, jqXHR, data) {
console.log('Key = ' + key);
}).on('filesuccessremove', function(event, id) {//上传成功后删除触发
alert(id);
}).on("fileuploaded", function(event, data, previewId, index) {
console.log(data);
});
}
fileinput在处理上传后删除回调时存在无法与后台匹配的id
原因为fileinput在前端删除后在回调时没有保留file的对象,导致file对象的id丢失,而生成了一个新的id
解决方案:http://blog.csdn.net/xumoqiu/article/details/53081352?locationNum=1&fps=1
列子:http://plugins.krajee.com/file-krajee-explorer-demo
bootstrap-3-上传图片-列表显示的更多相关文章
- JD-Store购物网站复盘——20170312
一.商店技术架构 1.主题 2.涉及技术点: 3.核心业务功能 4.角色 5.用户故事 二.实现步骤 专案基础设施 上传图片模块 购物车 订单 支付&寄信 专案源码 三.第三方服务应用 支付 ...
- asp.net+bootstrap上传图片+FileUpload控件文件上传下载
ps:我数据库使用的pgsql,看个人修改. 代码asp.net 的,使用了mootools框架,里面包含了bootstrap上传图片,查看预览,还加了个上传任意文件的FileUpload.(界面随便 ...
- Bootstrap上传图片
BootStrap上传需要用到Bootstrap-fileinput插件,有需要的可联系 先来看看bootstrap上传的界面 前台界面代码 <%@ page language="ja ...
- 上传图片 展示进度条 bootstrap
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Bo ...
- php ajax bootstrap多文件上传图片预览,ajax上传文件
<form enctype="multipart/form-data" id="upForm"> <label class="btn ...
- laravel5.5结合bootstrap上传插件fileinput 上传图片
引入相关js <script src="{{ asset('bootstrap-fileinput/js/fileinput.js') }}"></script& ...
- JS组件系列——Bootstrap文件上传组件:bootstrap fileinput
前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...
- springmvc4 mybatis 整合 框架源码 bootstrap
A集成代码生成器 [正反双向(单表.主表.明细表.树形表,开发利器)+快速构建表单 下载地址 ; freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本,处理类 ...
- MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件
场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条. 解决:自定义jquery控件 没有解决:非图片上传时,会有浏览样式的问题; 解决方案; 1.样式 – bootstrap 的css和 ...
- ASP.Net MVC3 图片上传详解(form.js,bootstrap)
图片上传的插件很多,但很多时候还是不能切合我们的需求,我这里给大家分享个我用一个form,file实现上传四张图片的小demo.完全是用jquery前后交互,没有用插件. 最终效果图如下: 玩过花田人 ...
随机推荐
- if-else(职责链)
var a=1,b=2,c=3,d=4; const rules = [ { match: function (a, b, c,d) { return a;}, action: function (a ...
- php通过CURL模拟get提交请求
方式一: $host = "http://jisunews.market.alicloudapi.com"; $path = "/news/get"; $met ...
- javaNIO的总结
放大1.5倍查看 使用NIO对文件进行COPY操作 public class TestNIOCopyFile { public static void main(String[] args) thro ...
- 用yield写协程实现生产者消费者
思路: yield可以使得函数阻塞,next,和send可以解阻塞,实现数据不竞争的生产者消费者模式 代码: import random #随机数,模拟生产者的制造物 def eat(): #消费者 ...
- 问题 C: Frosh Week(2018组队训练赛第十五场)(签到)
问题 C: Frosh Week 时间限制: 4 Sec 内存限制: 128 MB提交: 145 解决: 63[提交][状态][讨论版][命题人:admin] 题目描述 Professor Zac ...
- HDU 1533 Going Home (最大权完美匹配)
<题目链接> 题目大意:给你一张地图,地图上m代表人,H代表房子,现在所有人要走到房子内,且一个房子只能容纳一个人(人和房子的数量相同),人每移动一步,需要花1美元,问所有人走到房子中的最 ...
- POJ 2631 Roads in the North (模板题)(树的直径)
<题目链接> 题目大意:求一颗带权树上任意两点的最远路径长度. 解题分析: 裸的树的直径,可由树形DP和DFS.BFS求解,下面介绍的是BFS解法. 在树上跑两遍BFS即可,第一遍BFS以 ...
- Linux学习之日志管理(二十一)
Linux学习之日志管理 目录 日志管理 日志服务 rsyslogd的新特点 启动日志服务 常见日志的作用 日志文件的一般格式 rsyslogd日志服务 /etc/rsyslog.conf配置文件 服 ...
- js异步梳理:1.从浏览器的多进程到JS的单线程,理解JS运行机制
大家很早就知道JS是一门单线程的语言.但是也时不时的会看到进程这个词.首先简单区分下线程和进程的概念 1. 简单理解进程 - 进程是一个工厂,工厂有它的独立资源 - 工厂之间相互独立 - 线程是工厂中 ...
- Django 学习第十二天——Auth 系统
一.Auth系统中的表: 从表的名称我们就能看出, auth_user,auth_group,auth_permission分别 存放了用户,用户组,权限的信息表. 另外三张表就是多对多的关系表 Us ...