为了账号安全,请及时绑定邮箱和手机立即绑定

文件上传之三基于flash的文件上传

标签:
JQuery

 本文介绍jQuery的一个插件uploadify,现在的版本支持两种实现。一个是flash,一个是HTML5。本文介绍的是flash版本的。

uploadify的官网

uploadify介绍

  uploadify是一个jQuery插件,让程序员很容易就实现多文件的上传功能。有两种不同的版本,一个是flash,另一个是HTML5.

特点

  • 多文件上传

  • 拖拽(HTML5版本)

  • 可以实时的查看上传情况(百分比,上传速度等)

  • 定义上传文件的限制,如大小,数目,类型

uploadify的API

  因为官网已经有很详细的文档,而且简单易懂,这边就不在详细介绍uploadify的API。

Struts2与uploadify的结合

  服务器端的代码与之前文章介绍的差不多,所以为了减少文章的篇幅,这边就不在展示服务器端的代码了。现在具体讲解前端界面的实现。

1.下载uploadify

2.新建上传页面,引入jQuery,uploadify的js。如下所示:

<%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%> <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>File Upload</title> <link rel="stylesheet" type="text/css" href="css/uploadify.css" /> <link rel="stylesheet" type="text/css" href="css/UploadifyFileUpload.css" /> </head> <body>     <div id="head"><h3>利用uploadify实现文件上传</h3></div>     <div id="body">         <div class="example">             <div>                 <h6>example 1</h6>             </div>             <div>                 <input type="file" id="file_upload1" />             </div>         </div>     </div>     <div id="footer"></div>     <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-1.9.1.js"></script>     <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery.uploadify-3.1.js"></script>     <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/UploadifyFileUpload.js"></script> </body> </html>

2.UploadifyFileUpload.js

$(function() {     // example 1     $('#file_upload1').uploadify(             {                 'swf' : 'flash/uploadify.swf',//指定flash,在下载的uploadify里有                 'uploader' : 'jsonResultFileLoadAction', //action地址                'fileObjName' : 'file', //文件名                'buttonText' : '浏览', //按钮显示                'buttonCursor' : 'point', //按钮鼠标样式                'onUploadSuccess' : function(file, data, response) {                     alert('The file ' + file.name                             + ' was successfully uploaded with a response of '                             + response + ':' + data);                 } //上传成功后的调函数            }); });

总结:uploadify是一个非常棒的jQuery插件,帮助开发人员快速轻松地实现一个功能强大的文件上传。

 

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消