Flash基础入门:基于flash的文件上传
小标 2018-07-12 来源 : 阅读 81 评论 0

摘要:本文主要向大家介绍了Flash基础入门:基于flash的文件上传,通过具体的内容向大家展现,希望对大家学习Flash基础入门有所帮助。

本文主要向大家介绍了Flash基础入门:基于flash的文件上传,通过具体的内容向大家展现,希望对大家学习Flash基础入门有所帮助。

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

uploadify的官网

uploadify介绍

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

特点

· 多文件上传

· 拖拽(HTML5版本)

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

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

uploadify的API

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

Struts2与uploadify的结合

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

1.下载uploadify

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

1. <%@ page language="java" contentType="text/html; charset=UTF-8" 

2.     pageEncoding="UTF-8"%> 

3. <!DOCTYPE> 

4. <html> 

5. <head> 

6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

7. <title>File Upload</title> 

8. <link rel="stylesheet" type="text/css" href="css/uploadify.css" /> 

9. <link rel="stylesheet" type="text/css" href="css/UploadifyFileUpload.css" /> 

10. </head> 

11. <body> 

12.     <div id="head"><h3>利用uploadify实现文件上传</h3></div> 

13.     <div id="body"> 

14.         <div class="example"> 

15.             <div> 

16.                 <h6>example 1</h6> 

17.             </div> 

18.             <div> 

19.                 <input type="file" id="file_upload1" /> 

20.             </div> 

21.         </div> 

22.     </div> 

23.     <div id="footer"></div> 

24.     <script type="text/javascript" src="js/jquery-1.9.1.js"></script> 

25.     <script type="text/javascript" src="js/jquery.uploadify-3.1.js"></script> 

26.     <script type="text/javascript" src="js/UploadifyFileUpload.js"></script> 

27. </body> 

28. </html> 

2.UploadifyFileUpload.js

1. $(function() { 

2.     // example 1 

3.     $('#file_upload1').uploadify( 

4.             { 

5.                 'swf' : 'flash/uploadify.swf',//指定flash,在下载的uploadify里有 

6.                 'uploader' : 'jsonResultFileLoadAction', //action地址

7.                 'fileObjName' : 'file', //文件名

8.                 'buttonText' : '浏览', //按钮显示

9.                 'buttonCursor' : 'point', //按钮鼠标样式

10.                 'onUploadSuccess' : function(file, data, response) { 

11.                     alert('The file ' + file.name 

12.                             + ' was successfully uploaded with a response of ' 

13.                             + response + ':' + data); 

14.                 } //上传成功后的调函数

15.             }); 

16. }); 

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

 

以上就介绍了Flash的相关知识,希望对Flash有兴趣的朋友有所帮助。了解更多内容,请关注职坐标常用软件Flash频道!

本文由 @小标 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论
X
免费获取海同IT培训资料
验证码手机号,获得海同独家IT培训资料
获取验证码
提交

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号