方法：加上这句：'scriptAccess'   : 'always',  // domain或always,生产环境建议使用域名

参考：

1:连接 http://www.uploadify.com/forum/#/discussion/2346/improvements-for-jquery-ui/p1

View Code 
if (jQuery) {
    (function($) {

        $.extend($.fn, {

            uploadify : function(p) {

                $(this).each(function() {

                    set = $.extend({
                        'id'             : $(this).attr('id'), /* The ID of the object being Uploadified */
                        'uploader'       : 'uploadify.swf',    /* The path to the uploadify swf file */
                        'script'         : 'uploadify.php',    /* The path to the uploadify backend upload script */
                        'expressInstall' : null,          /* The path to the express install swf file */
                        'folder'         : '',            /* The path to the upload folder */
                        'height'         : 30,            /* The height of the flash button */
                        'width'          : 110,           /* The width of the flash button */
                        'wmode'          : 'opaque',      /* The wmode of the flash file */
                        'scriptAccess'   : 'sameDomain',  /* Set to \"always\" to allow script access across domains */
                        'fileDataName'   : 'Filedata',    /* The name of the file collection object in the backend upload script */
                        'method'         : 'POST',        /* The method for sending variables to the backend upload script */
                        'queueSizeLimit' : 2,             /* The maximum size of the file queue */
                        'simUploadLimit' : 1,             /* The number of simultaneous uploads allowed */
                        'queueID'        : false,         /* The optional ID of the queue container */
                        'displayData'    : 'percentage',  /* Set to \"speed\" to show the upload speed in the default queue item */
                        'onInit'         : function() {}, /* Function to run when uploadify is initialized */
                        'onSelect'       : function() {}, /* Function to run when a file is selected */
                        'onQueueFull'    : function() {}, /* Function to run when the queue reaches capacity */
                        'onCheck'        : function() {}, /* Function to run when script checks for duplicate files on the server */
                        'onCancel'       : function() {}, /* Function to run when an item is cleared from the queue */
                        'onError'        : function() {}, /* Function to run when an upload item returns an error */
                        'onProgress'     : function() {}, /* Function to run each time the upload progress is updated */
                        'onComplete'     : function() {}, /* Function to run when an upload is completed */
                        'onAllComplete'  : function() {}  /* Functino to run when all uploads are completed */
                    }, p);

                    var pagePath = location.pathname;
                        pagePath = pagePath.split('/');
                        pagePath.pop();
                        pagePath = pagePath.join('/') + '/';

                    var data = {};
                        data.uploadifyID = set.id;
                        data.pagepath = pagePath;

                    var ocs = {
                        'buttonclass'   : 'uploadify-button ui-corner-all',
                        'buttonicon'    : 'icons icon-import',
                        'buttondefault' : 'ui-state-default',
                        'buttonhover'   : 'ui-state-hover',
                        'filename'      : 'filename',
                        'iconcancel'    : 'ui-icon ui-icon-circle-close',
                        'item'          : 'item ui-widget-content',
                        'itemcancel'    : 'cancel',
                        'percentage'    : 'percentage',
                        'progress'      : 'ui-progressbar-value',
                        'progresslabel' : 'ui-progressbar-label',
                        'progressbar'   : 'ui-progressbar',
                        'uploadify'     : 'uploadify'
                    };
                    
                    var str = {
                        'cancel'       : 'Abbrechen',
                        'completed'    : 'Fertig',
                        'filereplace'  : 'Die Datei {file} existiert schon.\nSoll die Datei erstezt werden?',
                        'error'        : 'Fehler',
                        'remove'       : 'Entfernen',
                        'upload'       : '\u00DCbertragen',
                        'uploadfile'   : 'Datei \u00FCbertragen',
                        'uploadfiles'  : 'Dateien \u00FCbertragen',
                        'maxfiles'     : 'Sie k\u00F6nnen maximal {num} Dateien auf gleichzeitig \u00FCbertragen.'
                    };

                    if (set.buttonImg) {
                        data.buttonImg = escape(set.buttonImg);
                    }
                    if (set.buttonText) {
                        data.buttonText = escape(set.buttonText);
                    }
                    if (set.rollover) {
                        data.rollover = true;
                    }
                    data.script = set.script;
                    data.folder = escape(set.folder);

                    if (set.scriptData) {
                        var scriptDataString = '';
                        for (var name in set.scriptData) {
                            scriptDataString += '&' + name + '=' + set.scriptData[name];
                        }
                        data.scriptData = escape(scriptDataString.substr(1));
                    }
                    if (set.cssButton) {
                        set.wmode = 'transparent';
                    }
                    data.width  = set.width;
                    data.height = set.height;
                    data.wmode  = set.wmode;
                    data.method = set.method;
                    data.queueSizeLimit = set.queueSizeLimit;
                    data.simUploadLimit = set.simUploadLimit;
                    if (set.hideButton || set.cssButton) {
                        data.hideButton = true;
                    }
                    if (set.fileDesc) {
                        data.fileDesc = set.fileDesc;
                    }
                    if (set.fileExt) {
                        data.fileExt = set.fileExt;
                    }
                    if (set.multi) {
                        data.multi = true;
                    }
                    if (set.auto) {
                        data.auto = true;
                    }
                    if (set.sizeLimit) {
                        data.sizeLimit = set.sizeLimit;
                    }
                    if (set.checkScript) {
                        data.checkScript = set.checkScript;
                    }
                    if (set.fileDataName) {
                        data.fileDataName = set.fileDataName;
                    }
                    if (set.queueID) {
                        data.queueID = set.queueID;
                    }

                    if (set.onInit() !== false) {
                        var idx = $(this).attr('id');
                        $(this).css('display', 'none');
                        $(this).after('<div id=\"' + idx + '_uploader\"><\/div>');
                        swfobject.embedSWF(set.uploader, set.id + '_uploader',
                            set.width, set.height,
                            '9.0.24', set.expressInstall,
                            data, { 'quality' : 'high', 'wmode' : set.wmode, 'allowScriptAccess' : set.scriptAccess }
                        );
                        if (set.queueID == false) {
                            $('#' + idx + '_uploader').after('<div id=\"' + idx + '_queue\"><\/div>');
                        }
                        if (set.cssButton) {
                            $(this).after('<span id=\"' + idx + '_cssbutton\" class=\"' + ocs.buttonclass + ' ' + ocs.buttondefault + '\"><span class=\"' + ocs.buttonicon + '\"></span>' + ( (data.multi) ? str.uploadfiles : str.uploadfile ) + '</span>');
                            var tmp = $('#' + idx + '_cssbutton').offset();
                            $('#' + idx + '_uploader').css({
                                'display'  : 'block',
                                'position' : 'absolute',
                                'left'     : tmp.left + 'px',
                                'top'      : tmp.top  + 'px',
                                'width'    : $('#' + idx + '_cssbutton').outerWidth(),
                                'height'   : $('#' + idx + '_cssbutton').outerHeight()
                            }).hover(
                                function() {
                                    $('#' + idx + '_cssbutton').removeClass(ocs.buttondefault).addClass(ocs.buttonhover);
                                },
                                function() {
                                    $('#' + idx + '_cssbutton').removeClass(ocs.buttonhover).addClass(ocs.buttondefault);
                                }
                            );
                        }
                        idx = null; tmp = null;
                    }

                    if (typeof(set.onOpen) == 'function') {
                        $(this).bind('uploadifyOpen', set.onOpen);
                    }

                    $(this).bind('uploadifySelect', { 'action' : set.onSelect, 'queueID' : set.queueID }, function(e, i, f) {
                        if (e.data.action(e, i, f) !== false) {
                            var b = (Math.round(f.size / 1024 * 100) * .01), n = f.name, u = 'KB', x = $(this).attr('id'), q = '#' + x + '_queue';
                            if (b > 1000) {
                                b = Math.round((b *.001 * 100) * .01);
                                u = 'MB';
                            }
                            var p = b.toString().split('.');
                            if (p.length > 1) {
                                b = p[0] + '.' + p[1].substr(0,2);
                            } else {
                                b = p[0];
                            }
                            if (f.name.length > 20) {
                                n = f.name.substr(0, 20) + '...';
                            }
                            if (e.data.queueID) {
                                q = '#' + e.data.queueID;
                            }
                            $(q).append(
                                '<div class=\"' + ocs.item + '\" id=\"' + x + i + '\">'
                              + '<div class=\"' + ocs.itemcancel + '\" id=\"' + x + i + '_cancel\" title=\"' + str.remove + '\"><span class=\"' + ocs.iconcancel + '\">' + str.remove + '<\/span><\/div>'
                              + '<div class=\"' + ocs.progressbar + '\" id=\"' + x + i + '_progressbar\"><\/div>'
                              + '<\/div>'
                            ).attr({ 'className' : ocs.uploadify });
                            $('#' + x + i + '_cancel').click(function() {
                                $('#' + x).uploadifyCancel(i);
                            }).hover(
                                function() {
                                    $(this).addClass('ui-state-hover');
                                },
                                function () {
                                    $(this).removeClass('ui-state-hover');
                                }
                            );
                            $('#' + x + i + '_progressbar').progressbar({ value: 0 });
                            $('#' + x + i + '_progressbar').css({ 'width' : ($('#' + x + i).width() - 30) + 'px' });
                            $('#' + x + i + '_progressbar').append('<div class=\"' + ocs.progresslabel + '\"><span class=\"' + ocs.filename + '\" id=\"' + x + i + '_file\">' + n + ' (' + b + u + ')<\/span><span class=\"' + ocs.percentage + '\" id=\"' + x + i + '_percentage\"><\/span><\/div>');
                            $('#' + x + i + '_progressbar .' + ocs.progresslabel).css({ 'width' : $('#' + x + i + '_progressbar').innerWidth() + 'px' });
                        }
                    });
                    if (typeof(set.onSelectOnce) == 'function') {
                        $(this).bind('uploadifySelectOnce', set.onSelectOnce);
                    }
                    $(this).bind('uploadifyQueueFull', { 'action' : set.onQueueFull }, function(e, l) {
                        if (e.data.action(e, l) !== false) {
                            var m  = str.maxfiles;
                            m = m.replace(/{num}/, l);
                            alert(m);
                        }
                    });
                    $(this).bind('uploadifyCheckExist', { 'action' : set.onCheck }, function(e, c, o, f, s) {
                        var postData = new Object();
                            postData = o;
                            postData.folder = pagePath + f;
                        if (s) {
                            for (var ID in o) {
                                var singleFileID = ID;
                            }
                        }
                        $.post(c, postData, function(data) {
                            for (var k in data) {
                                if (e.data.action(e, c, o, f, s) !== false) {
                                    var m = str.filereplace;
                                    m = m.replace(/{file}/, data[k]);
                                    var r = confirm(m);
                                    if (!r) {
                                        document.getElementById($(e.target).attr('id') + '_uploader').cancelFileUpload(k, true,true);
                                    }
                                }
                            }
                            if (s) {
                                document.getElementById($(e.target).attr('id') + '_uploader').startFileUpload(singleFileID, true);
                            } else {
                                document.getElementById($(e.target).attr('id') + '_uploader').startFileUpload(null, true);
                            }
                        }, 'json');
                    });
                    $(this).bind('uploadifyCancel', { 'action' : set.onCancel }, function(e, i, f, data, c) {
                        if (e.data.action(e, i, f, data, c) !== false) {
                            var s = (c == true) ? 0 : 250;
                            $('#' + $(this).attr('id') + i).fadeOut(s, function() { $(this).remove() });
                        }
                    });
                    if (typeof(set.onClearQueue) == 'function') {
                        $(this).bind('uploadifyClearQueue', set.onClearQueue);
                    }
                    var errorArray = [];
                    $(this).bind('uploadifyError', { 'action' : set.onError }, function(e, i, f, o) {
                        if (e.data.action(e, i, f, o) !== false) {
                            var fileArray = new Array(i, f, o);
                            errorArray.push(fileArray);
                            $('#' + $(this).attr('id') + i + '_percentage').text(str.error);
                        }
                    });
                    $(this).bind('uploadifyProgress', { 'action' : set.onProgress, 'toDisplay' : set.displayData }, function(e, i, f, data) {
                        if (e.data.action(e, i, f, data) !== false) {
                            $('#' + $(this).attr('id') + i + '_progressbar').progressbar('option', 'value', data.percentage); /* .css('width', data.percentage + '%'); */
                            if (e.data.toDisplay == 'percentage') {
                                displayData = data.percentage + '%';
                            }
                            if (e.data.toDisplay == 'speed') {
                                displayData = data.speed + 'KB/s';
                            }
                            if (e.data.toDisplay == null) {
                                displayData = ' ';
                            }
                            $('#' + $(this).attr('id') + i + '_percentage').text(displayData);
                        }
                    });
                    $(this).bind('uploadifyComplete', { 'action' : set.onComplete }, function(e, i, f, r, data) {
                        if (e.data.action(e, i, f, unescape(r), data) !== false) {
                            $('#' + $(this).attr('id') + i + '_percentage').text(str.completed);
                            $('#' + $(this).attr('id') + i).fadeOut(250, function() { $(this).remove()});
                        }
                    });
                    if (typeof(set.onAllComplete) == 'function') {
                        $(this).bind('uploadifyAllComplete', { 'action' : set.onAllComplete }, function(e, o) {
                            if (e.data.action(e, o) !== false) {
                                errorArray = [];
                            }
                        });
                    }
                });
            },

            uploadifySettings : function(n, v, o) {
                var rv = false;
                $(this).each(function() {
                    if (n == 'scriptData' &amp;&amp; v !== null) {
                        if (o) {
                            var scriptData = v;
                        } else {
                            var scriptData = $.extend(set.scriptData, v);
                        }
                        var scriptDataString = '';
                        for (var x in scriptData) {
                            scriptDataString += '&amp;' + x + '=' + escape(scriptData[x]);
                        }
                        v = scriptDataString.substr(1);
                    }
                    rv = document.getElementById($(this).attr('id') + '_uploader').updateSettings(n, v);
                });
                if (v === null) {
                    if (n == 'scriptData') {
                        var rs = unescape(rv).split('&amp;');
                        var ro   = new Object();
                        for (var i = 0; i < rs.length; i++) {
                            var iSplit = rs[i].split('=');
                            ro[iSplit[0]] = iSplit[1];
                        }
                        rv = ro;
                    }
                    return rv;
                }
            },
            uploadifyUpload : function(i) {
                $(this).each(function() {
                    document.getElementById($(this).attr('id') + '_uploader').startFileUpload(i, false);
                });
            },
            uploadifyCancel : function(i) {
                $(this).each(function() {
                    document.getElementById($(this).attr('id') + '_uploader').cancelFileUpload(i, true, false);
                });
            },
            uploadifyClearQueue : function() {
                $(this).each(function() {
                    document.getElementById($(this).attr('id') + '_uploader').clearFileUploadQueue(false);
                });
            }
        })
    })(jQuery);
}

2:连接：http://hi.baidu.com/anylzer/item/673247b939f7eaea4fc7fd9b

View Code 
官方文档：http://www.uploadify.com/documentation/

 

引入：

<link rel="stylesheet" href="/uploadify/uploadify.css" type="text/css" />

<script type="text/javascript" src="/uploadify/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="/uploadify/jquery.uploadify.v2.1.4.min.js"></script>

<script type="text/javascript" src="/uploadify/swfobject.js"></script>

 

初始化：

$('#file_upload').uploadify({

 'uploader'       : '/uploadify/uploadify.swf',

 'script'         : '处理的方法, struts在此处写地址(*.aciton)',

 'cancelImg'      : '/uploadify/cancel.png',

 'folder'         : '/uploads',

 'fileDataName'   : 'Filedata',  // action接收的参数需 get set

 'displayData'    : 'percentage',        //有speed和percentage两种，一个显示速度，一个显示完成百分比 

 'multi'          : true,

 'auto'           : true,  // 自动提交

 'fileExt'        : '*.jpg;*.gif;*.jpeg',

 'fileDesc'       : '图片文件(.JPG, .GIF, .JPEG)',

 'queueID'        : 'custom-queue',

'scriptAccess'   : 'always',  // domain或always,生产环境建议使用域名

 //'queueSizeLimit' : 10,

 'simUploadLimit' : 10,

 'sizeLimit': 1073741824, //设置单个文件大小限制，单位为byte

 'removeCompleted': false,

 'onSelectOnce'   : function(event,data) {

     $('#status-message').html(data.filesSelected + ' 个文件添加到上传列队中.');

 },

'onComplete'       : function(event, ID, fileObj, response, data) { // 单个文件上传成功，此处可返回response
              // ajax返回内容
  },

 'onAllComplete'  : function(event,data) {

     $('#status-message').html(data.filesUploaded + ' 文件已上传, ' + data.errors + ' 个错误.');

 },

 'onError'   : function(event, queueID, fileObj) {

    // alert("文件:" + fileObj.name + "上传失败");

 }

});

 

页面：

<div id="status-message"></div>

<input type="file" id="file_upload" name="file_upload" /><br />

<div id="custom-queue"></div>

<a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a> | <a href="javascript:$('#file_upload').uploadifyClearQueue();">Clear Queue</a>


补充解决在非ie环境下，session、cookie取不到问题：

这个可能是uploadify的一处bug，flash cookie的一个bug，在官方论坛上也有讨论http://www.uploadify.com/forums/discussion/43/using-sessions-tricking-basic-authentication/p1

论坛上给出的是php的解决方法：

'scriptData' : { 'PHPSESSID': '<?php echo(session_id()); ?>'},

那么jsp的方式肯定类似，

改造一下，jsp下的解决方法就是：

'script'         : 'img_upload.action;jsessionid=<%=request.getSession().getId() %>',  

成功解决问题


挂一个参数说明文档http://blog.sina.com.cn/s/blog_5db0dfe40100ielj.html

3:连接:http://www.pcw8510.com/?p=1765

View Code 
  网上找了一天，大家都说Uploadify唯一的缺点就是不支持中文按钮，杯具之前，我看了下Uploadify的API，才发现了几个参数没被大家提及的，这正是解决此问题的关键。（以后坚决养成没事就看API的习惯）

    Uploadify有一个参数是 buttonText
这个无论你怎么改都不支持中文，因为插件在js里用了一个转码方法把这个参数的值转过码了，解码的地方在那个swf文件里，看不到代码，所以这条路不行。

    另一个参数，网上很少提到，是 buttonImg(
按钮图片)，这时你完全可以用一个图片来替换掉插件自带的那个黑色的flash浏览按钮，只要你自己的图片上是中文，这不就解决了中文按钮问题么？如果只加这一个，你会发现你的按钮图片下面有一片白色区域，其实就是那个flash留下的，白色区域表示鼠标可用范围，这个范围可以用width,height来调整。还有一个参数wmode
它的默认值是opaque，把它改成transparent就行了，也就是把那片白色区域透明化。再用刚才说的方法，把按键点击范围设置成跟你图片一样大就完全OK了。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

    Uploadify的用法就不说了，网上文章很多，跟别的jquery插件用法一样，就是几种文件的摆放路径而已。

    以下附上Uploadify部分参数的介绍，要看全部的就去看其API文件了，一般在下载的包里都有。

  

uploader：uploadify.swf
文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后弹出打开文件对话框，默认值：uploadify.swf。

script ：后台处理程序的相对路径。默认值：uploadify.php

checkScript：用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径

fileDataName：设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata

method ：提交方式Post
或Get
默认为Post

scriptAccess：flash脚本文件的访问模式，如果在本地测试设置为always，默认值：sameDomain

folder ：上传文件存放的目录。

queueID ：文件队列的ID，该ID与存放文件队列的div的ID一致。

queueSizeLimit：当允许多文件生成时，设置选择文件的个数，默认值：999。

multi ：设置为true时可以上传多个文件。

auto ：设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传。

fileDesc：这个属性值必须设置fileExt属性后才有效，用来设置选择文件对话框中的提示文本，如设置fileDesc为“请选择rar
docpdf文件”，打开文件选择框效果如下图：

fileExt ：设置可以选择的文件的类型，格式如：‘*.doc;*.pdf;*.rar’
。

sizeLimit：上传文件的大小限制。

simUploadLimit：允许同时上传的个数默认值：1
。

buttonText：浏览按钮的文本，默认值：BROWSE
。

buttonImg：浏览按钮的图片的路径。

hideButton：设置为true则隐藏浏览按钮的图片。

rollover：值为true和false，设置为true时当鼠标移到浏览按钮上时有反转效果。

width ：设置浏览按钮的宽度，默认值：110。

height ：设置浏览按钮的高度，默认值：30。

wmode ：设置该项为transparent
可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页面的最高层。默认值：opaque
。

cancelImg：选择文件到文件队列中后的每一个文件上的关闭按钮图标


Uploadify还自带了很多参数及有用的方法和回调函数，都在API里，虽然是全英文的，但很容易看懂，这里就不说了。

以下是我用到的代码，可以参考一下：


<script type="text/javascript">   
$(document).ready(function() {   
$("#uploadify").uploadify({   
‘uploader’       :’images/uploadify.swf’,   
‘script’         :’<%=request.getContextPath()%>/content/ImportScheduleCommitAction.do’,   
‘cancelImg’      : ‘images/cancel.png’,   
‘folder’         : ‘/’,   
‘queueID’        : ‘fileQueue’,   
‘fileDataName’   : ‘uploadify’,   
‘fileDesc’       : ‘支持格式 :x ls.’,    
‘fileExt’        : ‘*.xls’,   
‘auto’           :false,   
‘multi’          :true,   
‘height’         : 20,   
‘width’          : 50,   
‘simUploadLimit’ : 3,   
//’buttonText’     : ‘fdsfdsf…’,   
‘buttonImg’      : ‘images/browse.jpg’,   
// ‘hideButton’     : true,   
// ‘rollover’       : true,   
‘wmode’          : ‘transparent’,   
onComplete       : function (event, queueID,fileObj, response, data)   
{    
$(‘<li></li>’).appendTo(‘.files’).text(response);    
},    
onError          : function(event,queueID, fileObj)   
{    
alert("文件:"+ fileObj.name + "
上传失败");    
}    
// onCancel         : function(event,queueID, fileObj)   
// {    
//     alert("取消文件：" +fileObj.name);    
// }    
}); 
<script type="text/javascript">
$(document).ready(function() {
$("#uploadify").uploadify({
‘uploader’       : ‘images/uploadify.swf’,
‘script’         :’<%=request.getContextPath()%>/content/ImportScheduleCommitAction.do’,
‘cancelImg’      : ‘images/cancel.png’,
‘folder’         : ‘/’,
‘queueID’        : ‘fileQueue’,
‘fileDataName’   : ‘uploadify’,
‘fileDesc’       : ‘支持格式 :x ls.’, 
‘fileExt’        : ‘*.xls’,
‘auto’           : false,
‘multi’          : true,
‘height’         : 20,
‘width’          : 50,
‘simUploadLimit’ : 3,
//’buttonText’     : ‘fdsfdsf…’,
‘buttonImg’      : ‘images/browse.jpg’,
// ‘hideButton’     : true,
// ‘rollover’       : true,
‘wmode’          : ‘transparent’ ,
onComplete       : function (event, queueID,fileObj, response, data)
{ 
$(‘<li></li>’).appendTo(‘.files’).text(response); 
}, 
onError          : function(event,queueID, fileObj)
{ 
alert("文件:"+ fileObj.name + "
上传失败"); 
} 
// onCancel         : function(event,queueID, fileObj)
// { 
//     alert("取消文件：" + fileObj.name); 
// } 
});

要注意的是，我的script属性值是一个请求路径，我发现在我设置了同时上传多个文件后(比如3)，并不是每请求一次去上传3个文件，而仍然是执行3次请求，请求一次上传一个文件。这也没办法，uplodify有那么多回调函数，要是一次处理多个，那回调函数的参数就不知道拿哪个了，因为这些参数都不是数组。

也就是说，无论你设置同时上传几个文件，它都会一个一个去请求并上传，只是表面上感觉好像有多个线程同时在处理上传请求一样，只是表象而已。而且如果你把simUploadLimit设置过大就会经常出错，我设置成5的时候经常会有一两个文件上传失败。

4：连接：http://ccccccc2003.iteye.com/blog/1482082

View Code 
web项目用的是webx 3.0 + velocity + uploadify控件。

        vm页面中定义一个上传控件。
Html代码  收藏代码

    <input id= "up" type="file" name="upload"/>  

    JS中对这个控件初始化。类似这样：

  
Js代码  收藏代码

    jQuery(document).ready(function() {  
        jQuery('#up').uploadify({  
                'uploader'  : '/uploadify.swf?t='+ new Date().getTime(),  
                'cancelImg' : 'https://static.aliloan.com/sys/js/uploadify/cancel.png',  
                'scriptAccess':'always',  
                'script':'/ajax/epibolyUploadFileFlashAjax.htm',  
                'auto'      : false,  
                'queueSizeLimit' : 1,  
                'onComplete'  : function(event, ID, fileObj, response, data) {  
                  jQuery("#responseText").html(response);  
                  jQuery.blockUI({ message: jQuery("#errorMessage"),css:{width:"400px",marginLeft:"-200px"}});  
                  jQuery("#isUploadQueueFull").val("")  
                },  
                'onCancel'    : function(event,ID,fileObj,data) {  
                  jQuery('#up').uploadifyClearQueue();  
                  jQuery("#isUploadQueueFull").val("")  
                },  
                'onError' : function(event, ID, fileObj, errorObj) {  
                    alert(errorObj.type+"::"+errorObj.info);  
                    jQuery("#isUploadQueueFull").val("")  
                },  
                'onSelect'    : function(event,ID,fileObj) {  
                    jQuery("#isUploadQueueFull").val('yes');  
                }  
              });  
    });  

   防止出现IE不兼容问题,在swf后面加上时间作为一个时间戳。

   在“上传”的button上添加click事件，用于处理后续操作，例如传递给web层一些参数。

  
Js代码  收藏代码

    jQuery(document).ready(function() {  
        jQuery("#isUploadQueueFull").val("");  
      
        jQuery('#uploadLink').click(function(){  
            if(jQuery("#isUploadQueueFull").val()==""){  
                alert("请先选择一个文件");  
                return;  
            }  
            if(jQuery("#uploadTaskId").val()==""){  
                alert("任务ID为空,请CTRL+F5强制刷新浏览器!");  
                return;  
            }  
            jQuery('#up').uploadifySettings('scriptData',{epibolyTaskId:jQuery("#uploadTaskId").val(),  
                                                      userEpibolyId:jQuery("#userId").val(),  
                                                      userEpibolyName:jQuery("#userName").val(),  
                                                      userEpibolyType:jQuery("#userType").val()  
                                                        });  
            jQuery('#up').uploadifyUpload();  
        });  
    });  

 

   注意：1、当在js中没有指定传递给后面web层的标识符时，默认的名词为“Filedata”。当你用第三方jar包，例如
org.apache.commons.fileupload.FileItem 时。就需要用到这个标识符。webx中封装了上传功能，如果在webx后面来读流的话是读不到的，而且用webx来注解注入FileItem时，就需要跟上面的默认名称一致了。
Java代码  收藏代码

    public void execute(@Param("Filedata") FileItem fileItem,TurbineRunData rundata, Context context) {  
    }  

2、如果要不走webx框架，则需要在web.xml中的webxFilter中加入
Xml代码  收藏代码

    <filter>  
    <filter-name>webx</filter-name>  
    <filter-class>com.alibaba.citrus.webx.servlet.WebxFrameworkFilter</filter-class>  
    <init-param>  
    <param-name>excludes</param-name>  
    <param-value><!-- 需要被“排除”的URL路径，以逗号分隔，如/static, *.jpg --></param-value>  
    </init-param>  
    <init-param>  
    <param-name>passthru</param-name>  
    <param-value><!-- 需要被“略过”的URL路径，以逗号分隔，如/myservlet, *.jsp --></param-value>  
    </init-param>  
    </filter>  

3、上传控件不能放到弹出层中。IE系列中，因为放到弹出层中由于style.display='none' 那么这个控件就不能得到初始化，虽然可以选择到文件到flash的上传队列中，但不能传输。因为js错误。
 4、如果flash请求不到，很可能是flash的沙箱问题（貌似是这个），要加上合理的域。
Xml代码  收藏代码

    <?xml version="1.0" encoding="UTF-8"?>  
    <!DOCTYPE cross-domain-policy SYSTEM    
        "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd" >    
    <cross-domain-policy>    
        <site-control permitted-cross-domain-policies="all" />    
        <allow-access-from domain="*" />    
        <allow-http-request-headers-from domain="*" headers="*"/>  
    </cross-domain-policy>  

 
uploadify官方网址：http://www.uploadify.com/

 5：插件代码详解：http://www.verydemo.com/demo_c110_i3563.html

View Code 
基于jquery的文件上传控件，支持ajax无刷新上传，多个文件同时上传，上传进行进度显示，删除已上传文件。

要求使用jquery1.4或以上版本，flash player 9.0.24以上。

有两个版本，一个用flash,一个是html5。html5的需要付费~所以这里只说flash版本的用法。

 

官网：http://www.uploadify.com/

控件截图：

用法：

首先引用下面的文件

<link rel="stylesheet" type="text/css" href="uploadify.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.uploadify-3.1.min.js"></script>

创建一个file input，或者其它任何带ID的元素，并对其初始化Uploadify（注意目录下要有uploadify.swf这个文件，和uploadify.php后台文件，路径按项目中的目录结构）

<input type="file" name="file_upload" id="file_upload" />
<script>
　$(function(){
 　　   $('#file_upload').uploadify({
       　　 'swf'      :'uploadify.swf',
     　　　 'uploader':'uploadify.php'
        　　 // Put your options here
    　　　});
　　　});
</script>

这样子就完成了一个最基础的上传组建。基本原理是改变你创建的file input生成一个DOM结构，创建一个DIV按钮，按钮样式修改在uploadify.css文件中的.uploadify-button，将swf文件定位在按钮上面，这样当你点击按钮时实际上点击的是swf

Options:

$('#file_upload').uploadify({
                auto:false, 
                //接受true or false两个值，当为true时选择文件后会自动上传；为false时只会把选择的文件增加进队列但不会上传，这时只能使用upload的方法触发上传。不设置auto时默认为true
                buttonClass: "some-class", 
                //设置上传按钮的class
                buttonCursor: 'hand',
                //设置鼠标移到按钮上的开状，接受两个值'hand'和'arrow'(手形和箭头)
                buttonImage: 'img/browse-btn.png', 
                //设置图片按钮的路径（当你的按钮是一张图片时）。如果使用默认的样式，你还可以创建一个鼠标悬停状态，但要把两种状态的图片放在一起，并且默认的放上面，悬停状态的放在下面（原文好难表达啊：you can create a hover state for the button by stacking the off state above the hover state in the image）。这只是一个比较便利的选项，最好的方法还是把图片写在CSS里面。
                buttonText: '<div>选择文件</div>',
                //设置按钮文字。值会被当作html渲染，所以也可以包含html标签
                checkExisting: '/uploadify/check-exists.php',
                //接受一个文件路径。此文件检查正要上传的文件名是否已经存在目标目录中。存在时返回1，不存在时返回0(应该主要是作为后台的判断吧)，默认为false
                debug: false,
                //开启或关闭debug模式
                fileObjName:'filedata',
                //设置在后台脚本使用的文件名。举个例子，在php中，如果这个选项设置为'the_files',你可以使用$_FILES['the_files']存取这个已经上传的文件。
                fileSizeLimit:'100MB',
                //设置上传文件的容量最大值。这个值可以是一个数字或者字符串。如果是字符串，接受一个单位（B,KB,MB,GB）。如果是数字则默认单位为KB。设置为0时表示不限制
                fileTypeExts: '*.*',
                //设置允许上传的文件扩展名（也就是文件类型）。但手动键入文件名可以绕过这种级别的安全检查，所以你应该始终在服务端中检查文件类型。输入多个扩展名时用分号隔开('*.jpg;*.png;*.gif')
                fileTypeDesc: 'All Files',
                //可选文件的描述。这个值出现在文件浏览窗口中的文件类型下拉选项中。（chrome下不支持，会显示为'自定义文件',ie and firefox下可显示描述）
                formData: {
                    timestamp: '<?php echo $timestamp;?>',
                    token: '<?php echo md5('unique_salt' . $timestamp);?>'
                },
                //通过get或post上传文件时，此对象提供额外的数据。如果想动态设置这些值，必须在onUploadStartg事件中使用settings的方法设置。在后台脚本中使用 $_GET or $_POST arrays (PHP)存取这些值。看官网参考写法：http://www.uploadify.com/documentation/uploadify/formdata/
                height: 30,
                //设置按钮的高度(单位px)，默认为30.(不要在值里写上单位，并且要求一个整数，width也一样)
                width: 120,
                //设置按钮宽度(单位px)，默认120
                itemTemplate:false,
                //模板对象。给增加到上传队列中的每一项指定特殊的html模板。模板格式请看官网http://www.uploadify.com/documentation/uploadify/itemtemplate/
                method:'post',
                //提交上传文件的方法，接受post或get两个值，默认为post
                multi: false,
                //设置是否允许一次选择多个文件，true为允许，false不允许
                overrideEvents: [],
                //重写事件，接受事件名称的数组作为参数。所设置的事件将可以被用户重写覆盖
                preventCaching:true,
                //是否缓存swf文件。默认为true，会给swf的url地址设置一个随机数，这样它就不会被缓存。(有些浏览器缓存了swf文件就会触发不了里面的事件--by rainweb)
                progressData: 'percentage',
                //设置文件上传时显示数据，有‘percentage’ or ‘speed’两个参数(百分比和速度)
                queueID: false,
                //设置上传队列DOM元素的ID，上传的项目会增加进这个ID的DOM中。设置为false时则会自动生成队列DOM和ID。默认为false
                queueSizeLimit: 999,
                //设置每一次上传队列中的文件数量。注意并不是限制总的上传文件数量（那是uploadLimit）.如果增加进队列中的文件数量超出这个值，将会触发onSelectError事件。默认值为999
                removeCompleted: true,
                //是否移除掉队列中已经完成上传的文件。false为不移除
                removeTimeout: 3,
                //设置上传完成后删除掉文件的延迟时间，默认为3秒。如果removeCompleted为false的话，就没意义了
                requeueErrors: false,
                //设置上传过程中因为出错导致上传失败的文件是否重新加入队列中上传
                successTimeout: 30,
                //设置文件上传后等待服务器响应的秒数，超出这个时间，将会被认为上传成功，默认为30秒
                swf: 'uploadify.swf',
                //swf的相对路径，必写项
                uploader: 'uploadify.php'
                //服务器端脚本文件路径，必写项
                uploadLimit: 999
                //上传文件的数量。达到或超出这数量会触发onUploadError方法。默认999
            })

 Events:

$('#file_upload').uploadify({    
                onCancel: function(file){
                        console.log('The file'+ file.name + 'was cancelled.')
                },
                //文件被移除出队列时触发,返回file参数
                onClearQueue: function(queueItemCount){
                    console.log(queueItemCount+'file(s) were removed frome the queue')
                },
                //当调用cancel方法且传入'*'这个参数的时候触发，其实就是移除掉整个队列里的文件时触发，上面有说cancel方法带*时取消整个上传队列
                onDestroy: function(){
                    //调用destroy方法的时候触发
                },
                onDialogClose: function(queueData){
                    console.log(queueData.filesSelected+'\n'+queueData.filesQueued+'\r\n'+queueData.filesReplaced+'\r\n'+queueData.filesCancelled+'\r\n'+ queueData.filesErrored)
                },
                //关闭掉浏览文件对话框时触发。返回queueDate参数，有以下属性：
                /*
                    filesSelected 浏览文件对话框中选取的文件数量
                    filesQueued 加入上传队列的文件数
                    filesReplaced 被替换的文件个数
                    filesCancelled 取消掉即将加入队列中的文件个数
                    filesErrored 返回错误的文件个数
                */
                onDialogOpen:function(){
                    //打开选择文件对话框时触发
                },
                onDisable:function(){
                    //禁用uploadify时触发(通过disable方法)
                },
                onEnalbe: function(){
                    //启用uploadify时触发(通过disable方法)
                },
                onFallback:function(){
                    //在初始化时检测不到浏览器有兼容性的flash版本时实触发
                },
                onInit: function(instance){
                    console.log('The queue ID is'+ instance.settings.queueID)
                },
                //每次初始化一个队列时触发，返回uploadify对象的实例
                onQueueComplete:function(queueData){
                    console.log(queueData.uploadsSuccessful+'\n'+queueData.uploadsErrored)
                },
                //队列中的文件都上传完后触发，返回queueDate参数，有以下属性：
                /*
                    uploadsSuccessful 成功上传的文件数量
                    uploadsErrored 出现错误的文件数量
                */
                onSelect: function(file){
                    console.log(file.name)
                },
                //选择每个文件增加进队列时触发，返回file参数
                onSelectError: function(file,errorCode,errorMsg){
                    console.log(errorCode)
                    console.log(this.queueData.errorMsg)
                },
                //选择文件出错时触发，返回file,erroCode,errorMsg三个参数
                /*
                    errorCode是一个包含了错误码的js对象，用来查看事件中发送的错误码，以确定错误的具体类型，可能会有以下的常量：
                    QUEUE_LIMIT_EXCEEDED:-100 选择的文件数量超过设定的最大值；
                    FILE_EXCEEDS_SIZE_LIMIT:-110 文件的大小超出设定
                    INVALID_FILETYPE:-130 选择的文件类型跟设置的不匹配

                    errorMsg 完整的错误信息，如果你不重写默认的事件处理器，可以使用‘this.queueData.errorMsg’ 存取完整的错误信息
                */
                onSWFReady: function(){
                    //swf动画加载完后触发，没有参数
                },
                onUploadComplete: function(file){
                    //在每一个文件上传成功或失败之后触发，返回上传的文件对象或返回一个错误，如果你想知道上传是否成功，最后使用onUploadSuccess或onUploadError事件
                },
                onUploadError: function(file,errorCode,erorMsg,errorString){
                },
                //一个文件完成上传但返回错误时触发，有以下参数
                /*
                    file 完成上传的文件对象
                    errorCode 返回的错误代码
                    erorMsg 返回的错误信息
                    errorString 包含所有错误细节的可读信息
                */
                onUploadProgress: function(file,bytesUploaded,bytesTotal,totalBytesUploaded,totalBytesTotal){
                    $('#pregress').html('总共需要上传'+bytesTotal+'字节，'+'已上传'+totalBytesTotal+'字节')
                },
                //每更新一个文件上传进度的时候触发,返回以下参数
                /*
                    file 正上传文件对象
                    bytesUploaded 文件已经上传的字节数
                    bytesTotal 文件的总字节数
                    totalBytesUploaded 在当前上传的操作中（所有文件）已上传的总字节数
                    totalBytesTotal 所有文件的总上传字节数
                */
                onUploadStart: function(file){
                    console.log('start update')
                },
                //每个文件即将上传前触发
                onUploadSuccess: function(file){
                    console.log('succedssfully update')
                }
                //每个文件上传成功后触发              
})  

Methods：
Uploadify使用jquery推荐的插件模式，这意味着所有方法的调用都保持在一个命名空间里。 调用这些不同的方法，只需要把方法当成第一个参数传进uploadify里调用就行。在这些方法后面增加参数会被传进这个方法里（这两句翻译得不是很顺畅，附原文： To use the different method calls, simply call Uploadify on the DOM element with the method call as the first argument.Any additional arguments added after the method name are passed to the method.）

cancel：取消第一个上传的文件，如果后面带参数"*"则是取消掉整个上传队列，如$(el).uploadify('cancel', '*')

upload：上传第一个上传的文件，如果后面带参数"*"则上传整个队列，跟cancel一样

destroy：移除掉上传组建，按html默认的方法上传

disable：有true or false 两个参数，表示是否禁止上传按钮，true表示禁止，false表示允许上传

settings：返回或者更新一个实例的方法值，接受一个方法名的参数时是返回那个方法的值，当后面再跟一个参数，则是更新那个方法的值。如

$(el).uploadify('settings','buttonText','BROWSE'); //设置buttonText的值为BROWSE
$(el).uploadify('settings','buttonText') //返回buttonText的值

stop：停止正在上传中的文件或队列

 

下载demo

翻译到中间的时候才发原来网上早已有中文API跟其它的例子，这里附带几个，也是我参考着翻译的资料

http://wenku.baidu.com/view/9df6ce0bde80d4d8d15a4faa.html

http://wenku.baidu.com/view/87df2673a417866fb84a8efd.html

http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html

 6:其它 http://wenku.baidu.com/view/9df6ce0bde80d4d8d15a4faa.html

　　　　http://wenku.baidu.com/view/87df2673a417866fb84a8efd.html