?本文介绍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"?src="js/jquery-1.9.1.js"></script>?
- ????<script?type="text/javascript"?src="js/jquery.uploadify-3.1.js"></script>?
- ????<script?type="text/javascript"?src="js/UploadifyFileUpload.js"></script>?
- </body>?
- </html>?
2.UploadifyFileUpload.js
- $(function()?{?
- ?????
- ????$('#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插件,帮助开发人员快速轻松地实现一个功能强大的文件上传。