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': ''});});
View Code
Uploadify 和 Uploader 都可以动态的添加表单参数。
个人偏向于喜欢百度的这款 Uploader,但仁者见仁智者见智,多几种选择未尝不是好事情。
还需要注意的是,在实现获取上传文件的过程中,我发现只有表单提交上去的多文件是在一次请求当中。
而 Uploadify 和 Uploader 都是点击全部上传后,多次请求后端的 Action,每次只携带一个文件。
请求次数等于你的文件上传次数,我在实现过程中是通过添加时间戳的方式解决的该问题。
也有可能是我使用的有问题,文件上传后肯定需要和具体的业务挂钩,业务问题这里就不赘述了。
web 前端常用组件【06】Upload 控件相关推荐
- web 前端常用组件【04】Datetimepicker 和 Lodop
1.Datetimepicker a.官方API:http://www.bootcss.com/p/bootstrap-datetimepicker/ 里面有详细的Datetimepicker介绍,包 ...
- web 前端常用组件【02】Select 下拉框
1.jQuery获取Select选择的Text和Value 语法解释: $("#select_id").change(function(){//code...}); //为Sele ...
- 十大常用web前端UI组件库,赶紧收藏
今天主要介绍web前端常用的UI库,这些网站基本都是背靠互联网大厂,值得web前端开发者收藏,当然还是要多多学习使用. Vant 一款有赞出品轻量.可靠的的移动UI组件库,目前支持 Vue2.Vue3 ...
- VCL组件之编辑控件
VCL组件之编辑控件 Note 以后将用两种方式提及组件,以组件的名称或定义组件的VCL类的名称.可以说"Label组件用于--"或说"TLabel用于--", ...
- 前端每日挑战の雨伞toggle控件
前端每日挑战の雨伞toggle控件 内容摘要 代码 内容摘要 伤心啊,写了好几天博客没人看~不过没关系,写博客的主要目的还是为了技术积累.在segmentFault上看到有前端每日专栏,觉得不错,正好 ...
- VB6.0中如何设定COM组件和ActiveX控件的CLSID值
http://ajxfxb.blog.163.com/blog/static/56675086200911181118562/ VB中如何设定COM组件和ActiveX控件的CLSID值 2009-1 ...
- 表单标签的作用、常用的表单控件
1.1 表单标签的作用 作用:将客户端的数据提交给服务器,(表单是客户与服务器交互的一种方式). 可见性:在网页上是不可见的. 1.2 form常用的属性 Form标签是表单标签的一个根标签 1.3 ...
- web day02 表格 表单及HTML常用的表单控件
一. 表格的标签及属性 table属性 Width.height 宽高(单位是像素或百分比) align 对齐 border 外边框 bgcolor 背景色 background 背景图片 Cells ...
- web前端常用框架总结
web框架 目前主流的 JavaScript 框架排名中,jQuery 和 Ext 可算是佼佼者,获得了用户的广泛好评.国内的一些框架很多也是仿照 jQuery 对 JavaScript 进行了包装, ...
最新文章
- Leetcode 198.打家劫舍 (每日一题 20210622)
- UNITY 打APK是如何确定哪些资源有用哪些无用的
- 冰豹lua驱动设置_通过编写“猜数字”游戏学习 Lua | Linux 中国
- RAC Failover三种方式
- 手机技巧:微信这个“设置”建议关闭!否则不到半年就卡爆了
- rabbitmq-路由模式-routingkey
- 关于Application.Lock和Lock(obj)
- 前端学习(3060):vue+element今日头条管理-处理展示文章封面
- python csv pandas_Python Pandas——Read_csv详解
- ACM - 第6章 数据结构基础(2)
- 从起源到未来:能自己编程和改进的超人工智能会出现吗?
- PHP:Iterator(迭代器)接口和生成器
- java8(2)函数式接口
- [Python] Marshmallow QuickStart
- 【面试】场景 智力题
- LabView学习笔记——简易入门AND初级实战项目(计算器)
- 莫烦 Python 基础
- 今日头条极速版自动寻找-阅读惊喜奖励
- 微信分享中将链接图标替换成自定义图片的实例
- python后台开发性能问题_《Python高性能编程》——2.14 确保性能分析成功的策略-阿里云开发者社区...
热门文章
- 在数据库组件中用业务规则剖析挑选数据
- 中国移动用户能不能用WCDMA网?(世界杯与通信2)
- swiftswift3.0自己封装的快速构建页面的方法
- HTML5的学习,各个标签的尝试
- swift 语言评价
- SQL to Elasticsearch java code
- (转).net webconfig使用IConfigurationSectionHandler自定section
- android屏幕分辨率详解 ldpi mdpi hdpi 程序UI自适应 《官方翻译》
- 如何改变一个地图的Zoom单位
- win设置计算机网络,Win10怎么修改网络类型,Win10网络类型怎么设置?