本文介绍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 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦