文档章节

文件上传组件fileinput的使用

 萧萧风雨
发布于 2017/04/23 12:02
字数 349
阅读 47
收藏 0
点赞 0
评论 0

1.引入相应的css,js文件。注意jquery,bootstrap,fileinput之间的版本,有些版本之间不兼容会无效果,最好使用官网例子使用的版本。

<link href="webjars/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="webjars/bootstrap-fileinput/4.3.5/css/fileinput.min.css" rel="stylesheet">
<script type="text/javascript" src="webjars/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="webjars/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="webjars/bootstrap-fileinput/4.3.5/js/fileinput.min.js"></script>
<script type="text/javascript" src="webjars/bootstrap-fileinput/4.3.5/js/locales/zh.js"></script>

2.html代码

<div class="modal fade" id="userModal">
  	<div class="modal-dialog">
  		<div class="modal-content">
  			<div class="modal-header">
  				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  				<h4 class="modal-title" id="myModalLabel">文件上传</h4>
  			</div>
  			<div class="modal-body">
  				<div class="container-fluid">
  					<label class="control-label">选择文件</label>
					<!-- multiple:表示同时可以上传多个 -->
					<input type="file" name="file" class="form-control" id="projectfile" multiple value="${deal.image}" />
	  				<hr>
  				</div>
  				<div class="alert alert-warning alert-dismissible" role="alert" id="saveMsg" style="display: none">
				  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				  <strong>提示:</strong> 请选择文件并上传文件后再保存
				</div>
  			</div>
  			<div class="modal-footer">
  				<button type="button" class="btn green" id="batchSaveUser">保存</button>
  			</div>
  		</div>
  	</div>
  </div>

3.js代码

$('#projectfile').fileinput({
        language: 'zh',
        uploadUrl: $("#contextPath").val() + "/admin/permissions/user/upload",
        allowedFileExtensions : ['xlsx', 'xls'],
        showUpload: true,
        fileActionSettings: {showUpload: false}
    });
	//文件上传后执行的方法
	$('#projectfile').on('fileuploaded', function(event, data, previewId, index) {
	    var form = data.form, files = data.files, extra = data.extra,
	        response = data.response, reader = data.reader;
	    $("#uploadFileName").val(response.fileName);
	});

可以通过fileuploaded事件,监听获得文件上传成功后,后台请求返回的数据。

© 著作权归作者所有

共有 人打赏支持
粉丝 4
博文 32
码字总数 7188
作品 0
深圳
程序员
yii2组件之多图上传插件FileInput的详细使用

作者:白狼 出处:http://www.manks.top/yii2_multiply_images.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的...

白狼栈
2016/06/23
85
0
PHP开发——yii2多图上传组件的使用

最近在使用yii2开发一个表单页面的时候,有多图上传的需求,稍微找了找这方面的组件,基本都安利fileInput这个组件,于是就尝试着使用这个库来完成后端表单页面的多图上传功能。使用的过程中...

Originalee
04/17
0
0
结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程

1、bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用,整合两者可以实现我们常规的Web...

walb呀
2017/12/04
0
0
webuploader java版本

网上一些webuploader上传的资料,有php版和java版本的,做了一下整合,现分享以下成果,可以讨论,不喜勿碰。说一下过程。 第一步:下载地址,提供官网地址 http://fex.baidu.com/webupload...

卯金刀GG
2016/12/20
71
0
Spring Boot 写的一个图床 - file-manager

开源图床: 出于自用的目的,又找不到Java写的开源的程序,然后使用开源上传组件 bootstrap-fileinput 用 Spring Boot 写了一个图床,目前支持:七牛云,阿里云 Configuration 使用的时候需要...

鹏磊
2017/12/10
324
1
bootstarp fileinput上传前压缩图片体积设置不生效

我引用了bootstarp、jquery、canvas2blob、fileinput,c2b.js在fileinput之前,顺序确定没错,如下图: 我希望在上传前,浏览器把图片体积压缩到一个适合的尺寸,使用设置了: 也就是里面的r...

ben.
2017/02/24
524
2
Vuejs jasnyBoostrap 上载 多张图片的预览效果

原版 jasnybootstrap无法进行多张图片上传后的预览,所以借鉴了一些别的方法。 HTML 项目图片

whaoran4726
2017/06/13
0
0
两种文件上传的实现-Ajax上传和form+iframe

前言 话说现在很多很多项目需要用到文件上传,自从有了HTML5之后,上传就变的超级简单了。HTML5支持多图片上传,而且支持ajax上传!而且支持上传之前图片的预览!而且支持图片拖拽上传!而且...

musishui
2016/08/25
17
0
bootstrap fileupload记录

本来是准备学习bootstrap的,想写个文件上传的demo,但是百度了半天,最终也没有找到想要的内容,现在把学习过程中的资料纪录一下,以便使用: js下载: 地址是:https://github.com/kartik...

创意顽石
2015/12/29
2.5K
0
bootstrap+fileinput插件实现可预览上传照片功能

图片.png bootstrap-fileinput.css文件:(github目前正在维护中,之后所有代码上传至我的github) bootstrap-fileinput.js: 欢迎关注!欢迎通过公众号咨询专业问题,我会尽力回复!...

祈澈姑娘
01/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Android 复制和粘贴功能

做了一回搬运工,原文地址:https://blog.csdn.net/kennethyo/article/details/76602765 Android 复制和粘贴功能,需要调用系统服务ClipboardManager来实现。 ClipboardManager mClipboardM...

她叫我小渝
25分钟前
0
0
拦截SQLSERVER的SSL加密通道替换传输过程中的用户名密码实现运维审计(一)

工作准备 •一台SQLSERVER 2005/SQLSERVER 2008服务 •SQLSERVER jdbc驱动程序 •Java开发环境eclipse + jdk1.8 •java反编译工具JD-Core 反编译JDBC分析SQLSERVER客户端与服务器通信原理 SQ...

紅顏為君笑
42分钟前
4
0
jQuery零基础入门——(六)修改DOM结构

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 在《零基础入门JavaScript》的时...

JandenMa
59分钟前
0
0
linux mint 1.9 qq 安装

转: https://www.jianshu.com/p/cdc3d03c144d 1. 下载 qq 轻聊版,可在百度搜索后下载 QQ7.9Light.exe 2. 去wine的官网(https://wiki.winehq.org/Ubuntu) 安装 wine . 提醒网页可以切换成中...

Canaan_
今天
0
0
PHP后台运行命令并管理运行程序

php后台运行命令并管理后台运行程序 class ProcessModel{ private $pid; private $command; private $resultToFile = ''; public function __construct($cl=false){......

colin_86
今天
1
0
数据结构与算法4

在此程序中,HighArray类中的find()方法用数据项的值作为参数传递,它的返回值决定是否找到此数据项。 insert()方法向数组下一个空位置放置一个新的数据项。一个名为nElems的字段跟踪记录着...

沉迷于编程的小菜菜
今天
1
1
fiddler安装和基本使用以及代理设置

项目需求 由于开发过程中客户端和服务器数据交互非常频繁,有时候服务端需要知道客户端调用接口传了哪些参数过来,这个时候就需要一个工具可以监听这些接口请求参数,已经接口的响应的数据,这种...

银装素裹
今天
0
0
Python分析《我不是药神》豆瓣评论

读取 Mongo 中的短评数据,进行中文分词 对分词结果取 Top50 生成词云 生成词云效果 看来网上关于 我不是药神 vs 达拉斯 的争论很热啊。关于词频统计就这些,代码中也会完成一些其它的分析任...

猫咪编程
今天
0
0
虚拟机怎么安装vmware tools

https://blog.csdn.net/tjcwt2011/article/details/72638977

AndyZhouX
昨天
1
0
There is no session with id[xxx]

参考网页 https://blog.csdn.net/caimengyuan/article/details/52526765 报错 2018-07-19 23:04:35,330 [http-nio-1008-exec-8] DEBUG [org.apache.shiro.web.servlet.SimpleCookie] - Found......

karma123
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部