Bootstrap Fileinput的使用

最新推荐文章于 2023-12-25 14:17:08 发布

Z_894821194

最新推荐文章于 2023-12-25 14:17:08 发布

阅读量1.7k

点赞数

文章标签： bootstrap fileinput 插件

本文链接：https://blog.csdn.net/qq_24018243/article/details/52979785

版权

最近遇到一个要上传文件的需求，本来打算用input来写，但是试了一下感觉真是无力吐槽，所以在网上一番查找之后发现这个强大的插件，它可以对图片、文本文件、HTML文件、视频文件、音频文件、flash文件生成预览图。另外，它还可以基于AJAX上传文件，拖拽上传文件，查看上传进度，可以选择性的预览，添加或删除文件。将实施过程中的问题记录一下。

第一步：引入文件

<head>
	<meta charset="UTF-8">
	<title>Planning System</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/fileinput.min.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<link rel="stylesheet" type="text/css" href="css/pintuer.css">
	<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/canvas-to-blob.js"></script>
	<script type="text/javascript" src="js/fileinput.js"></script>
	<script src="js/fileinput.zh.js"></script>//汉化
</head>

第二部：初始化

<script type="text/javascript">
	$(function () {
		$("#inputid1").fileinput({ 
   			language: 'zh', //设置语言
		        allowedFileExtensions : ['docx'],//接收的文件后缀
		        showUpload: false, //是否显示上传按钮
		        showCaption: true,//是否显示标题
		        browseClass: "btn btn-primary", //按钮样式             
		        showPreview : true,//是否预览
			});
			$("#inputid2").fileinput({ 
   			    language: 'zh', //设置语言
		        allowedFileExtensions : ['pdf'],//接收的文件后缀
		        showUpload: false, //是否显示上传按钮
		        showCaption: true,//是否显示标题
		        browseClass: "btn btn-primary", //按钮样式             
		 <span style="white-space:pre">	</span>showPreview : true,//是否预览
		});
        });
</script>

<form class="form-horizontal" role="form" id="testform" enctype='multipart/form-data' action="add.php" method="post">
  	<div class="form-group">
        <span><label for="zj_con" class="col-sm-3 control-label">* 文件内容</label>
    	<div class="col-sm-6">
      		<input id="inputid1" name="fileword" type="file" class="file" placeholder="WORD文档">
      		<input id="inputid2" name="filepdf" type="file" class="file" placeholder="PDF文件">
    	</div>
    	</span>
  	</div>
</form>

使用截图

这种上传只支持单个文件的上传，使用post方式提交表单。如果使用多文件上传则需要在初始化中设置参数uploadUrl属性。暂时没有测试这个功能。以后有时间需要在完善一下。有兴趣的可以看一下这个链接：http://blog.csdn.net/lvshaorong/article/details/48730145 对于参数的设置和文件上传方式讲的很清楚。

参考文章：

http://blog.csdn.net/u010486495/article/details/52808568

http://www.cnblogs.com/woaitech/p/5184572.html

Z_894821194

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap Fileinput的使用

最近遇到一个要上传文件的需求，本来打算用input来写，但是试了一下感觉真是无力吐槽，所以在网上一番查找之后发现这个强大的插件，它可以对图片、文本文件、HTML文件、视频文件、音频文件、flash文件生成预览图。另外，它还可以基于AJAX上传文件，拖拽上传文件，查看上传进度，可以选择性的预览，添加或删除文件。将实施过程中的问题记录一下。第一步：引入文件 Planning System
复制链接

扫一扫