ASP.NET

SWFupload 如何传递参数?

时间:2014-10-24 14:33:21  作者:WPF之家  来源:http://www.wpf123.com/  查看:580  评论:0
内容摘要:<script type="text/javascript"> var swfu; window.onload = function () { swfu = new SWFUpload({ ...

<script type="text/javascript">
         var swfu;
         window.onload = function () {
             swfu = new SWFUpload({
                 // Backend Settings
                 upload_url: "upload.aspx",
                 post_params: {
                     "upload": "images"
                 },

//启动,用来使用querystring 传递参数,否则无法进行参数传递
                    use_query_string:true,

                 // File Upload Settings
                 //file_size_limit: "2 MB",
                 //file_types: "*.jpg",
                 //file_types_description: "JPG Images",
                 file_upload_limit: "0",    // Zero means unlimited

                 // Event Handler Settings - these functions as defined in Handlers.js
                 //  The handlers are not part of SWFUpload but are part of my website and control how
                 //  my website reacts to the SWFUpload events.
                 file_queue_error_handler: fileQueueError,
                 file_dialog_complete_handler: fileDialogComplete,
                 upload_progress_handler: uploadProgress,
                 upload_error_handler: uploadError,
                 upload_success_handler: uploadSuccess,
                 upload_complete_handler: uploadComplete,

                 // Button settings
                 button_image_url: "js/swfupload/images/XPButtonNoText_160x22.png",
                 button_placeholder_id: "spanButtonPlaceholder",
                 button_width: 160,
                 button_height: 22,
                 button_text: '<span class="button">选择文件<span class="buttonSmall">(最大10M)</span></span>',
                 button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',
                 button_text_top_padding: 1,
                 button_text_left_padding: 5,

                 // Flash Settings
                 flash_url: "js/swfupload/swfupload.swf", // Relative to this file

                 custom_settings: {
                     upload_target: "divFileProgressContainer"
                 },

                 // Debug Settings
                 debug: false
             });
         }
 </script>


SWFUpload的详细参数方法

http://jingyan.baidu.com/article/e8cdb32b5e089337052badc8.html


swfUpload 传接参数有有三种形式

swfUpload 传递参数有有三种形式
1、在url后加连接:

  upload_url: "<%=basePath%>upload action=up",


2、使用swfupload传递参数,在setting中配置 

  post_params: { "hello" : "Here I Am", "name" : "张三", "ff" : document.getElementById("tf").value }, use_query_string : true,//要传递参数用到的配置


3、采用swfupload的函数: 

  addPostParam("myFileName",encodeURI(file.name));//这个是我用来传递文件名称的


swfupload为upload_url动态添加参数

在js中如何给upload_url动态添加参数呢?

$(function()
{
    var statusE = document.getElementByIdx_x('upload_status');
    var statusPro = $("#upload_progress");
    var statusPer = document.getElementByIdx_x("upload_percent");
    var progressWidth = $("#upload_progress_panel").width();
//文件选择窗口关闭事件处理
//如果有文件成功选择并添加到上传队列,则自动上传
function fileDialogComplete(selectedNum, queuedNum)
{
if (queuedNum > 0) {//选择并添加到上传队列的文件数大于0
//this.startUpload();//开始上传
this.setButtonDisabled(true);//禁用上传按钮
}
}
function fileQueue(file)
{
    var num=parseFloat(file.size/1024);
    statusE.innerHTML = ['文件名:', file.name," 大小:",Math.floor(num * 100) / 100,"KB"].join('');
    statusPro.css("width",0);
}
//上传过程事件处理
//用来动态显示文件上传进度
function uploadProgress(file, curBytes, totalBytes) {
    var _percent = parseInt((curBytes/totalBytes)*100);
    statusPer.innerHTML = [_percent, '%'].join('');
    statusPro.css("width",_percent*progressWidth/100);
}

//上传过程中出错
function uploadError(file, errCode, msg) {
statusE.innerHTML = ['文件[', file.name, ']上传出错。'].join('');
}

//上传成功
function uploadSuccess(file, data) {
statusE.innerHTML = ['文件[', file.name, ']上传成功。'].join('');
}

//上传完成,无论上传过程中出错还是上传成功,都会触发该事件,并且在那两个事件后被触发
function uploadComplete(file) {
this.setButtonDisabled(false);//恢复上传按钮
}

function fileQueueError(file, errorCode, message)
{
    try
    {
        if (errorCode === SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED)
        {
            alert("You have attempted to queue too many files.\n" + (message === 0 ? "You have reached the upload limit." : "You may select " + (message > 1 ? "up to " + message + " files." : "one file.")));
            return;
        }
        switch (errorCode)
        {
            case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
                alert("文件大小超过限制!");
                break;
            case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
                alert("不能上传0节字文件!");
                break;
            case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
                alert("不允许上传文件类型的文件!");
                break;
            default:
                if (file !== null)
                {
                    progress.setStatus("Unhandled Error");
                }
                alert("未知错误!");
                break;
        }
    } catch (ex)
    {
    }
}

var _fileKind="*.jpg;*.gif;*.bmp;*.png;";
var _fileKind_Description="All Image Files";
var _fileSize_Limit="10 MB";
var swfuOption = {//swfupload选项
upload_url : "MyUpload.ashx", //接收上传的服务端url
flash_url : "swfupload/swfupload.swf",//swfupload压缩包解压后swfupload.swf的url
    file_types: _fileKind,
    file_types_description: _fileKind_Description,
button_placeholder_id : "upload_add_button",//上传按钮占位符的id
file_size_limit : _fileSize_Limit,//用户可以选择的文件大小,有效的单位有B、KB、MB、GB,若无单位默认为KB
button_width: 60, //按钮宽度
button_height: 22, //按钮高度
button_text: "选择文件",//按钮文字
button_text_style: '.btn-txt{font-family:"宋体"; font-size:12; color:#006699; }',//按钮文字样式
button_text_top_padding: 2,//文字距按钮顶部距离
button_text_left_padding: 5,//文字距离按钮左边距离
button_image_url: "../images/swfu_bgimg.jpg",//按钮背景
debug: false,//开启调试模式
file_dialog_complete_handler: fileDialogComplete,//文件选择对话框关闭
upload_progress_handler: uploadProgress,//文件上传中
upload_error_handler: uploadError,//文件上传出错
upload_success_handler: uploadSuccess,//文件上传成功
upload_complete_handler: uploadComplete,//文件上传完成,在upload_error_handler或者upload_success_handler之后触发
//这个地方在windows上有个bug,官方如是说:在window平台下,那么服务端的处理程序在处理完文件存储以后,必须返回一个非空值,否则此事件不会被触发,随后的uploadComplete事件也无法执行。
file_queue_error_handler: fileQueueError,
file_queued_handler: fileQueue
}
swfu = new SWFUpload(swfuOption);

})
var swfu = null;
function Upload_Button_Click()
{
    //在这里为upload_url添加参数传给ashx
    var _caption=$("#Name_Text").val();
    var _top=$("#Top_ID").attr("checked")?1:0;
    var _tuijian=$("#TuiJian_ID").attr("checked")?1:0;
    swfu.addPostParam("s1",_caption);
    swfu.addPostParam("s2",_top);
    swfu.addPostParam("s3",_tuijian);
    swfu.startUpload();
}
function Cancel_Button_Click()
{
    swfu.stopUpload();
}

文件上传利器SWFUpload使用指南

 

SWFUpload详细参数

SWFUpload的初始化与配置

首先,在页面中引用SWFUpload.js ,如
<script type=”text/javascript” src=”http://www.swfupload.org/swfupload.js”></script>
然后,初始化SWFUpload ,如
var swfu;
window.onload = function () {
swfu = new SWFUpload({
upload_url : “http://www.swfupload.org/upload.php”,
flash_url : “http://www.swfupload.org/swfupload_f9.swf”, file_size_limit : “20480″
});
};
以下是一个标准的SWFUpload初始化设置所需的参数,你可以根据需要自己进行删减:
{
upload_url : “http://www.swfupload.org/upload.php”, 处理上传请求的服务器端脚本URL
file_post_name : “Filedata”, 是POST过去的$_FILES的数组名
post_params : {
“post_param_name_1″ : “post_param_value_1″,
“post_param_name_2″ : “post_param_value_2″,
“post_param_name_n” : “post_param_value_n”
},
file_types : “*.jpg;*.gif”, 允许上传的文件类型
file_types_description: “Web Image Files”, 文件类型描述
file_size_limit : “1024″, 上传文件体积上限,单位MB
file_upload_limit : 10, 限定用户一次性最多上传多少个文件,在上传过程中,该数字会累加,如果设置为“0”,则表示没有限制
file_queue_limit : 2, 上传队列数量限制,该项通常不需设置,会根据file_upload_limit自动赋值
flash_url : “http://www.swfupload.org/swfupload_f9.swf”, Flash控件的URL
flash_width : “1px”,
flash_height : “1px”,
flash_color : “#FFFFFF”,
debug : false, 是否显示调试信息
swfupload_loaded_handler : swfupload_loaded_function, 当Flash控件成功加载后触发的事件处理函数
file_dialog_start_handler : file_dialog_start_function, 当文件选取对话框弹出前出发的事件处理函数
file_queued_handler : file_queued_function,
file_queue_error_handler : file_queue_error_function,
file_dialog_complete_handler : file_dialog_complete_function, 当文件选取对话框关闭后触发的事件处理函数
upload_start_handler : upload_start_function, 开始上传文件前触发的事件处理函数
upload_progress_handler : upload_progress_function,
upload_error_handler : upload_error_function,
upload_success_handler : upload_success_function, 文件上传成功后触发的事件处理函数
upload_complete_handler : upload_complete_function,
debug_handler : debug_function,
custom_settings : { 自定义设置
custom_setting_1 : “custom_setting_value_1″,
custom_setting_2 : “custom_setting_value_2″,
custom_setting_n : “custom_setting_value_n”,
}
}

SWFUpload中的File Object

在SWFUpload的使用过程中,无论在客户端还是服务器端都要和File Object打交道,在一个File Object中包含了以下内容:
{
id : string, // SWFUpload file id, used for starting or cancelling and upload
index : number, // The index of this file for use in getFile(i)
name : string, // The file name. The path is not included.
size : number, // The file size in bytes
type : string, // The file type as reported by the client operating system
creationdate : Date, // The date the file was created
modificationdate : Date, // The date the file was last modified
filestatus : number, // The file’s current status. Use SWFUpload.FILE_STATUS to interpret the value.
}

SWFUpload中的方法

+ setPostParams (param_object)
- 描述
动态修改SWFUpload初始化设置中的post_params属性,其中所有的值都将被覆 盖。
- 参数
param_object:一个simple JavaScript object,所有的name/value都必须是字符串,例如(this.setPostParams({ “Mari”: name });)。
- 返回
void
SWFUpload中的事件

SWFUpload在运行过程中提供了多种事件,这些事件可以让开发者借助句柄来改变页面 UI、改变行为,或者报告错误。所有这些事件都可以在一个SWFUpload实体中被调用,这意味着在这些事件对应的函数中,你可以用 this 关键字来代替引用SWFUpload实体。
+ fileDialogComplete (number of files selected)
- 触发条件
1. 用户选择好了要上传文件,并关闭对话框;
2. 用户什么也没选,并取消对话框;
如果你希望在用户选择完文件后自动开始上传操作,那么可以将 this.startUpload() 操作放在这里。
- 传入参数
number of files selected:将返回用户所选取的文件个数。
+ uploadStart (file object)
- 触发条件
该事件在文件上传之前触发,它用于完成一些准备工作,比如传递参数;负责响应该事件的句柄函数 可以有2个返回值(true 或 false)当返回值为false时,整个上传将被取消;当返回值为true时上传过程继续进行。而如果返回值为false,则通常是由一个 uploadError事件所导致的。
注:官方帮助文档的原文中对该事件的描述中有这样一句:“If you return ‘true’ or do not return any value then the upload proceeds.”, 从中可以看到既定的设计是当不返回任何值的时候应该等同于返回true,但是笔者在开发中发现必须明确返回值,否则上传进程将停止响应,不知是否是一个 bug呢?
- 传入参数
file object:文件对象
+ uploadComplete (file object)
- 触发条件
在完成一个上传周期后(在uploadError 或 uploadSuccess之后),此时一个上传操作已经结束,另一个上传操作可以开始了。
- 传入参数
file object:文件对象
+ uploadProgress (file object, bytes complete, total bytes)
- 触发条件
该事件在整个文件的上传过程中定期性的被Flash控件自动触发,用以帮助开发者实时更新页面 UI来制作上传进度条。
注意:该事件在Linux版本的Flash Player中存在问题,目前还无法解决。
- 传入参数
file object:文件对象
bytes complete:已经上传完毕的文件字节数
total bytes:文件总体积的字节数
常见错误

■ 所上传的文件体积并未超出SWFUpload所设置的数值,但为何无法成功上传?
□ 通常这是由于服务器端的限制所造成的,以Apache+PHP为例,请修改 php.ini中的post_max_size与upload_max_filesize两项设置。
■ 在带有Session验证的网站后台中SWFUpload无法正常工作?
□ 这是因为SWFUpload在上传时相当于重新开辟了一个新的Session进程,因此无法与原有程序的Session保持一致,这就需要在上传时传递原 有程序的SessionID,根据它来“找回”其应有的Session。
在SWFUpload的JS配置中的上传中可以这样设置来传递SESSION ID

post_params: {“PHPSESSID” : “<?php echo session_id(); ?>”},

在PHP文件中可以这样接收SESSION ID并找到原来的SESSION:
if (isset($_POST["PHPSESSID"])) {
session_id($_POST["PHPSESSID"]);
}
session_start();

■ 关于swfupload上传中文文件名乱码的问题
□ 实际上是由于编码的问题造成的,程序使用的utf-8,文件名传递时也是这种编码,因此造成乱码或文件不能保存,仅是需要修改接收文件,以PHP为 例,upload.php中
$file_name = $_FILES[$upload_name]['name'];
$file_name=iconv(“UTF-8″,”GB2312″,$file_name);
这样即可解决。

具体的使用实例,可以参考SWFUpload中的DEMO中的simpledemo和featuresdemo,其中的handlers.js是一些事件函数的定义,值得一提的是事件处理函数中的this指得就是SWFUpload的一个实例



标签:如何 传递 参数 SWFupload 

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。本文出自“wpf之家”,请务必保留此出处:http://www.wpf123.com

上一篇:没有了
下一篇:SWFUpload向服务器传递参数
相关评论
Copyright © 2009-2014 WPF之家(http://www.wpf123.com/) All rights reserved
 Powered by WPF之家
鄂ICP备13006396号