天天看点

web 前端常用组件【06】Upload 控件

    当然你也可以不用任何成熟的上传组件,表单提交文件,像这样:

    多个文件一起提交,添加里面的 input 选项即可,但 name 名称需要一致。

    当然你也可以在提交文件的时候,提交一些其他的参数数据上去,像下面这样:

web 前端常用组件【06】Upload 控件
web 前端常用组件【06】Upload 控件

    注意其中的 enctype 设置为multipart/form-data。

    这种上传文件的方式,优缺点显而易见,不需要使用任何第三方 js,纯天然 html 标签、走到哪用到哪、没有浏览器障碍.....

    对于多变的项目需求,比如这些特性:实时上传的进度条、能拖拽文件上传、上传前压缩、MD5加密验证等.....

    你需要耐着性子自己实现,有造好的轮子,你为什么不用呢?

    所以说这种性感撩人的 <input type="file">  的标签能出现的项目,定位在小型简单、客户好说话的web应用中。

    这个组件想必是用的比较广泛,提供 Flash 和 HTML5 两个不同的版本,能让你避免很多浏览器兼容性的问题。

    支持显示文件上传实时进度条,拖拽文件上传、多样化的参数配置、高度可定制化....能满足绝大部分项目的上传需求。

    其中 Flash 版是免费下载的,但 HTML5 版本需要掏钱,如果你需要H5  Version,请在评论区留邮箱。

    使用这个组件的前提,需要先引入 Jquery:

web 前端常用组件【06】Upload 控件
web 前端常用组件【06】Upload 控件

     初始化组件方法(具体的参数设置和回调函数的入参请查阅官方文档):

web 前端常用组件【06】Upload 控件
web 前端常用组件【06】Upload 控件

   网上有很多上传组件都是修改 Uploadify 的源码的某一部分,然后重新命名的。

   这个组件在项目中表现确实不错,使用 Flash version 浏览器中只需要安装 Flash Player 即可。

   当下浏览器中不安装 Flash Player 的确找不出几个。

   但不置可否的是 Flash 效率 没有 H5 的高,兼容性和稳定性必须舍弃一部分,让两者都有相对最优解。

   除了 Uploadify 的所有特性,最吸引人的特点是文件可以分片并发上传、同一组件内部决定使用 Flash 还是 H5 上传....

   最后出场的一般都是压轴人物,不否认的是现在我们中项目中使用的就是 Web Uploader 组件。

   不在为浏览器的兼容性而频繁更换组件调整代码,Uploader 会根据运行环境切换上传的方式,让你更省心。

web 前端常用组件【06】Upload 控件
web 前端常用组件【06】Upload 控件

     初始化组件方法(具体的参数设置和回调函数的入参请查阅官方文档):

web 前端常用组件【06】Upload 控件

 View Code

    Uploadify 和 Uploader 都可以动态的添加表单参数。

    个人偏向于喜欢百度的这款 Uploader,但仁者见仁智者见智,多几种选择未尝不是好事情。

    还需要注意的是,在实现获取上传文件的过程中,我发现只有表单提交上去的多文件是在一次请求当中。

    而 Uploadify 和 Uploader 都是点击全部上传后,多次请求后端的 Action,每次只携带一个文件。

    请求次数等于你的文件上传次数,我在实现过程中是通过添加时间戳的方式解决的该问题。

    也有可能是我使用的有问题,文件上传后肯定需要和具体的业务挂钩,业务问题这里就不赘述了。

本文转自Orson博客园博客,原文链接:http://www.cnblogs.com/java-class/p/4553711.html,如需转载请自行联系原作者

继续阅读