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

发布时间：2020-07-06 00:59:26 作者：zhbhun
来源：网络阅读：2752

本文介绍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"><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插件，帮助开发人员快速轻松地实现一个功能强大的文件上传。

附件：http://down.51cto.com/data/2362510

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

uploadify介绍

特点

uploadify的API

Struts2与uploadify的结合

相关阅读