加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-15 18:13:35 所属栏目:百科 来源:网络整理
导读:?本文介绍jQuery的一个插件uploadify,现在的版本支持两种实现。一个是flash,一个是HTML5。本文介绍的是flash版本的。 uploadify的官网 uploadify介绍 ? uploadify是一个jQuery插件,让程序员很容易就实现多文件的上传功能。有两种不同的版本,一个是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插件,帮助开发人员快速轻松地实现一个功能强大的文件上传。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读