本文介绍jQuery的一个插件uploadify，现在的版本支持两种实现。一个是flash，一个是HTML5。本文介绍的是flash版本的。
uploadify的官网
uploadify是一个jQuery插件,让程序员很容易就实现多文件的上传功能。有两种不同的版本，一个是flash，另一个是HTML5.
因为官网已经有很详细的文档，而且简单易懂，这边就不在详细介绍uploadify的API。
服务器端的代码与之前文章介绍的差不多，所以为了减少文章的篇幅，这边就不在展示服务器端的代码了。现在具体讲解前端界面的实现。
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"><h4>利用uploadify实现文件上传</h4></div>
- <div id="body">
- <div class="example">
- <div>
- <h7>example 1</h7>
- </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() {
- // 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插件，帮助开发人员快速轻松地实现一个功能强大的文件上传。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
