web 前端常用组件【06】Upload 控件
因为有万恶的IE存在,所以当Web项目初始化并进入开发阶段时。
如果是项目经理,需要知道客户将会用什么浏览器来访问系统。
明确知道限定浏览器的情况下,你才能从容的让手下的封装必要的前端组件。
本篇文章试图从常见的上传方式和组件进行分析,仅局限与前端,至于后端需依据业务复杂度,自行拿捏实现方式,若文中有纰漏,欢迎拍砖!
1. Input type="file" 也可以性感
当然你也可以不用任何成熟的上传组件,表单提交文件,像这样:
<form action="<%=request.getContextPath()%>/uploadfile" method="POST" enctype="multipart/form-data">
yourfile: <input type="file" name="myfiles"/><br/>
<input type="submit"/>
</form>
多个文件一起提交,添加里面的 input 选项即可,但 name 名称需要一致。
当然你也可以在提交文件的时候,提交一些其他的参数数据上去,像下面这样:
<form action="<%=request.getContextPath()%>/uploadfile" method="POST" enctype="multipart/form-data">
username: <input type="text" name="username"/><br/>
password: <input type="password" name="password"/><br/>
yourfile: <input type="file" name="myfiles"/><br/>
yourfile: <input type="file" name="myfiles"/><br/>
yourfile: <input type="file" name="myfiles"/><br/>
<input type="submit"/>
</form>
注意其中的 enctype 设置为multipart/form-data。
这种上传文件的方式,优缺点显而易见,不需要使用任何第三方 js,纯天然 html 标签、走到哪用到哪、没有浏览器障碍.....
对于多变的项目需求,比如这些特性:实时上传的进度条、能拖拽文件上传、上传前压缩、MD5加密验证等.....
你需要耐着性子自己实现,有造好的轮子,你为什么不用呢?
所以说这种性感撩人的 <input type="file"> 的标签能出现的项目,定位在小型简单、客户好说话的web应用中。
2. Uploadify 双版本上传组件
这个组件想必是用的比较广泛,提供 Flash 和 HTML5 两个不同的版本,能让你避免很多浏览器兼容性的问题。
支持显示文件上传实时进度条,拖拽文件上传、多样化的参数配置、高度可定制化....能满足绝大部分项目的上传需求。
官网地址:http://www.uploadify.com/
其中 Flash 版是免费下载的,但 HTML5 版本需要掏钱,如果你需要H5 Version,请在评论区留邮箱。
使用这个组件的前提,需要先引入 Jquery:
<script type="text/javascript" src="/style/js/jquery.js"></script>
<script type="text/javascript" src="/style/js/jquery.uploadify.min.js"></script>
<style type="text/css" src="/style/js/uploadify.css"></style> <div class="updiv">
<div class="upfileAfter">
<a href="javascript:$('#upfileBtn').uploadify('upload','*')">开始上传</a>
</div>
<a href="#" id="upfileBtn">选择文件</a>
</div>
初始化组件方法(具体的参数设置和回调函数的入参请查阅官方文档):
$("#upfileBtn").uploadify({
'debug': false,// 开启调试
'auto': false,// 是否自动上传
//'simUploadLimit' : 3, //并发上传数量[falsh版不生效]
//'successTimeout': 30,// 默认值30秒,文件上传完成时等待服务器响应的时间,之后显示成功信息。
'fileObjName' : 'file',
'swf': XX+ "/style/js/uploadifynochange/uploadify.swf",
'uploader': XX + '/service/uploadFile',// 上传处理程序
'formData': {'fjzlDm': '', timeStamp: ''},
'multi': true,// 是否支持多文件上传
'width': '95px',// 浏览按钮的宽度
'height': '30px',// 浏览按钮的高度
'progressData' : 'speed', //文件进度条的样式
'buttonText': '<i class="icon icon-file icon-white"></i> 选择文件', //按钮文字
'fileSizeLimit': '10240',//上传文件大小限制
'fileTypeExts': '*.bmp;*.png;*.jpeg;*.jpg;*.gif',//可上传的文件类型
'overrideEvents': ['onDialogClose','onUploadSuccess','onUploadError'],
'onFallback': function () {
alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。");// 检测FLASH失败调用
},
'onDialogClose': function () {
alert("Dialog Close......");
},
'onUploadSuccess': function (file, data, response) {
alert("UploadSuccess......");
},
'onUploadError' : function () {
alert("Upload Error......");
}
});
网上有很多上传组件都是修改 Uploadify 的源码的某一部分,然后重新命名的。
这个组件在项目中表现确实不错,使用 Flash version 浏览器中只需要安装 Flash Player 即可。
当下浏览器中不安装 Flash Player 的确找不出几个。
但不置可否的是 Flash 效率 没有 H5 的高,兼容性和稳定性必须舍弃一部分,让两者都有相对最优解。
3. Web Uploader 百度技术团队开源力作
Webuploader 是由百度 Fex-team 团队开发,官网地址:http://fex.baidu.com/webuploader/
除了 Uploadify 的所有特性,最吸引人的特点是文件可以分片并发上传、同一组件内部决定使用 Flash 还是 H5 上传....
最后出场的一般都是压轴人物,不否认的是现在我们中项目中使用的就是 Web Uploader 组件。
不在为浏览器的兼容性而频繁更换组件调整代码,Uploader 会根据运行环境切换上传的方式,让你更省心。
<script type="text/javascript" src="/style/js/jquery.js"></script>
<script type="text/javascript" src="/style/js/webuploader.min.js"></script>
<style type="text/css" src="/style/js/webuploader.css"></style> <div id="uploader" class="wu-example">
<div id="thelist" class="uploader-list"></div>
<div class="btns" style="position: relative;display: inline-block">
<div id="picker"><i class="glyphicon glyphicon-plus"></i>点击添加文件</div>
<a href="#" id="up-all">开始上传</a>
</div>
</div>
初始化组件方法(具体的参数设置和回调函数的入参请查阅官方文档):
var uploader = WebUploader.create({
// swf文件路径
swf: '/style/js/webuploade/Uploader.swf',
// 文件接收服务端。
server: '/service/uploadFile',
auto: false,
formData: {
paramA: 'paramA'
},
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#picker'
}); $("#up-all").on("click",function(){
uploader.upload();
});
// 当有文件被添加进队列的时候
uploader.on('fileQueued', function (file) {
$("#thelist").append('<div id="' + file.id + '" class="item">' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="state">等待上传...</p>' +
'</div>');
}); // 文件上传过程中创建进度条实时显示
uploader.on('uploadProgress', function (file, percentage) {
var $li = $('#' + file.id),
$percent = $li.find('.progress .progress-bar'); // 避免重复创建
if (!$percent.length) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo($li).find('.progress-bar');
} $li.find('p.state').text('上传中');
$percent.css('width', percentage * 100 + '%');
}); uploader.on('uploadError', function (file) {
$('#' + file.id).find('p.state').text('上传出错');
}); uploader.on('uploadComplete', function (file) {
$('#' + file.id).find('.progress').fadeOut();
}); uploader.on('startUpload', function () {
uploader.option('formData', {'paramA': ''});
});
Uploadify 和 Uploader 都可以动态的添加表单参数。
个人偏向于喜欢百度的这款 Uploader,但仁者见仁智者见智,多几种选择未尝不是好事情。
还需要注意的是,在实现获取上传文件的过程中,我发现只有表单提交上去的多文件是在一次请求当中。
而 Uploadify 和 Uploader 都是点击全部上传后,多次请求后端的 Action,每次只携带一个文件。
请求次数等于你的文件上传次数,我在实现过程中是通过添加时间戳的方式解决的该问题。
也有可能是我使用的有问题,文件上传后肯定需要和具体的业务挂钩,业务问题这里就不赘述了。
web 前端常用组件【06】Upload 控件的更多相关文章
- web 前端常用组件【05】ZTree
web 项目或多或少都会有涉及到什么人员职称树,菜单树,组织机构树等. 历手三四个项目有大有小,采用的树前端都是 Ztree. 有些优秀的J2EE 框架将这些常用的组件都封装起来,作为模块化的组件提供 ...
- web 前端常用组件【04】Datetimepicker 和 Lodop
web项目中日期选择器和打印这两个功能是非常常见,将使用过的日期和打印控件,在这里总结归纳,为方便后面使用. 1.Datetimepicker a.官方API:http://www.bootcss.c ...
- web 前端常用组件【01】Pagination 分页
分页组件几乎是一般网站都会涉及到的组件,网上有很多这样的插件,自己挑来跳去选择了这一款. 官方Demo网址:http://mricle.com/JqueryPagination 功能强大,可扩展性比较 ...
- web 前端常用组件【07】弹出层 Layer
web 项目中总是需要弹出框,来让用户进行下一步的操作. 大到弹出另外一个页面,小到弹出提示.确认等. 经手几个项目,还是感觉 Layer 用起来比较的轻松,你能想到的 Layer 都能帮你做到. 感 ...
- web 前端常用组件【03】Bootstrap Multiselect
实际的项目网站中或多或少的或用到多选框,我选用的一款是 Bootstrap Multiselect. 官方文档:http://www.kuitao8.com/demo/20140224/1/boots ...
- web 前端常用组件【02】Select 下拉框
<select id="hello"></select> 关于 select 支持的属性和响应事件,可以参照:http://www.runoob.com ...
- 整理部分JS 控件 WEB前端常用的做成Jsp项目,方便今后直接用
整理部分JS 控件 WEB前端常用的做成Jsp项目,方便今后直接用 最近又没时间了,等用时间了,再加入更多的, 源码下载: http://download.csdn.net/detail/liang ...
- 基于CkEditor实现.net在线开发之路(3)常用From表单控件介绍与说明
上一章已经简单介绍了CKEditor控件可以编写C#代码,然后可以通过ajax去调用,但是要在网页上面编写所有C#后台逻辑,肯定痛苦死了,不说实现复杂的逻辑,就算实现一个简单增删改查,都会让人头痛欲裂 ...
- 基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用
在前面介绍了两篇关于我的基于MVC4+EasyUI技术的Web开发框架的随笔,本篇继续介绍其中界面部分的一些使用知识,包括控件的赋值.取值.清空,以及相关的使用. 我们知道,一般Web界面包括的界面控 ...
随机推荐
- 【转】【译】JavaScript魔法揭秘--探索当前流行框架中部分功能的处理机制
推荐语: 今天推荐一篇华为同事的同事翻译的一篇文章,推荐的主要原因是作为一个华为员工居然晚上还能写文章,由不得小钗不佩服!!! 其中的jQuery.angular.react皆是十分优秀的框架,各有特 ...
- JavaScript学习笔记7 之DOM文档对象模型
一.什么是DOMDocument Object Model 文档 -------对象 ----模型-------缩写DOM DOM是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘 ...
- Sharepoint学习笔记—其它—如何知道某个Sharepoint环境的安装类型
我们在安装sharepoint 2010时会出现三种安装类型: Standalone, Server Farm Standalone与Server Farm Complete. Standalone ...
- 每个程序员都会的 35 个 jQuery 小技巧
1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return ...
- 初学HTML 常见的标签(二) 列表标签
上次介绍了一些简单的文本标签设计, 这篇介绍列表类标签, 通过列表能写出很好看的, 多元化的网络页面. ul-li 列表标签 <ul> <li>列表1</li> & ...
- 数据仓库之启用cdc
准备工作: 先将sqlservere 代理服务启动 USE [MyDB]; GO EXECUTE sys.sp_cdc_enable_db; --启用数据库对CDC的支持 GO -- 设置别名 @ca ...
- 此实现不是 Windows 平台 FIPS 验证的加密算法的一部分的解决办法方案
最近操作系统不断地报异常或错误,可能是用得太久了,而刚好工作比较多又不想重新安装系统,但用一段时间后(一天大概有两次)系统就出现各种问题导致无法继续使用真是痛苦万分啊,今天又来了这样的错误: 此实现不 ...
- PL/SQL Developer连接本地Oracle 11g 64位数据库
转摘:http://www.cnblogs.com/ymj126/p/3712727.html 用于学习,笔记,以备后用. 1.登录PL/SQL Developer 这里省略Oracle数据库和PL/ ...
- C# Lambda表达式
C# Lambda表达式 Lambda表达式 "Lambda表达式"是一个匿名函数,是一种高效的类似于函数式编程的表达式,Lambda简化了开发中需要编写的代码量.它可以包含表达式 ...
- CentOS 7 恢复 Windows 启动项
安装Linux时一般会自动识别windows系统并添加引导项,而 CentOS 默认不支持 NTFS 分区,CentOS7采用了Grub2,与CentOS6有区别.手动引导windows分区修改配置稍 ...