文档章节

文件上传组件fileinput的使用

 萧萧风雨
发布于 2017/04/23 12:02
字数 349
阅读 57
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

70.shell的函数 数组 告警系统需求分析

20.16/20.17 shell中的函数 20.18 shell中的数组 20.19 告警系统需求分析 20.16/20.17 shell中的函数: ~1. 函数就是把一段代码整理到了一个小单元中,并给这个小单元起一个名字,当用到这段...

王鑫linux
今天
3
0
分布式框架spring-session实现session一致性使用问题

前言:项目中使用到spring-session来缓存用户信息,保证服务之间session一致性,但是获取session信息为什么不能再服务层获取? 一、spring-session实现session一致性方式 用户每一次请求都会...

WALK_MAN
今天
6
0
C++ yield()与sleep_for()

C++11 标准库提供了yield()和sleep_for()两个方法。 (1)std::this_thread::yield(): 线程调用该方法时,主动让出CPU,并且不参与CPU的本次调度,从而让其他线程有机会运行。在后续的调度周...

yepanl
今天
4
0
Java并发编程实战(chapter_3)(线程池ThreadPoolExecutor源码分析)

这个系列一直没再写,很多原因,中间经历了换工作,熟悉项目,熟悉新团队等等一系列的事情。并发课题对于Java来说是一个又重要又难的一大块,除非气定神闲、精力满满,否则我本身是不敢随便写...

心中的理想乡
今天
48
0
shell学习之获取用户的输入命令read

在运行脚本的时候,命令行参数是可以传入参数,还有就是在脚本运行过程中需要用户输入参数,比如你想要在脚本运行时问个问题,并等待运行脚本的人来回答。bash shell为此提 供了read命令。 ...

woshixin
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部