文档章节

文件上传组件fileinput的使用

 萧萧风雨
发布于 2017/04/23 12:02
字数 349
阅读 61
收藏 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事件,监听获得文件上传成功后,后台请求返回的数据。

© 著作权归作者所有

共有 人打赏支持
粉丝 5
博文 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
Spring Boot 写的一个图床 - file-manager

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

鹏磊
2017/12/10
324
1
webuploader java版本

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

卯金刀GG
2016/12/20
71
0

没有更多内容

加载失败,请刷新页面

加载更多

线下工坊|Blockchain Coding Day:零基础教你开发DAPP(北京)

我们的目标是通过编程学习让你更了解区块链技术。这将对区块链开发初学者一次很好的体验。这里需要强调一下,编程零基础也能学会。 我们将以小组的形式,由教练带领学员完成DAPP开发。每位学...

HiBlock
22分钟前
2
0
查看内存情况

jinfo:可以输出并修改运行时的java 进程的opts。 jps:与unix上的ps类似,用来显示本地的java进程,可以查看本地运行着几个java程序,并显示他们的进程号。 jstat:一个极强的监视VM内存工具。...

Canaan_
23分钟前
2
0
基于对象特征的推荐

(本实验选用数据为真实电商脱敏数据,仅用于学习,请勿商用) 在上一期基于协同过滤的的推荐场景中,我们介绍了如何通过PAI快速搭建一个基于协同过滤方案的推荐系统,这一节会介绍一些如何基...

阿里云官方博客
31分钟前
1
0
Ugly Number(leetcode263)

Write a program to check whether a given number is an ugly number. Ugly numbers are positive numbers whose prime factors only include 2, 3, 5. Example 1: Input: 6Output: true......

woshixin
55分钟前
2
0
深度模型从研者 眼里的 似然估计 & Hessain 海森矩阵 & Fisher Information (费雪信息)

深度模型的训练的基本依据是最小化模型拟合数据的误差。旨在不仅知其然(如何构建和训练一个深度模型),还应知其所以然(为什么这样训练,可以做哪些优化)。我们就会发现,有很多研究者,在...

刘小米_思聪
59分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部