ext多文件上传

ioio

浏览: 142428 次
性别:
来自: 深圳

最近访客更多访客>>

yanghui_123

ltj_007

julyflame

wdne63956

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

develop diary

EXT CSS JavaScript json ASP

一.方法一

Ext.ux.UploadDialog.包下载

使用是出来导入必要的ext包还需要

使用很简单弄个onclick事件核心代码如下

function insertImages()
{
    dialog = new Ext.ux.UploadDialog.Dialog({
          title: '文件上传__上传过程中关闭窗口，不影响上传_wayfoon',
          url:wayfoon.MMS.DataPage +'/xxx.action?action=xxx',

          width : 450,
          height : 300,
          minWidth : 450,
          minHeight : 300,
          draggable : true,
          resizable : true,
          //autoCreate: true,
          constraintoviewport: true,
          permitted_extensions:['JPG','jpg','jpeg','JPEG','GIF','gif','bmp','BMP'],
          modal: true,
          //post_var_name: 'mms',
          reset_on_hide: false,
          allow_close_on_upload: true,   //关闭上传窗口是否仍然上传文件
          upload_autostart: false   //是否自动上传文件
    });

    dialog.show();//'show-button'
    dialog.on('uploadsuccess', onUploadSuccess);

}
提交时，默认提交的文件名是file 你可以修改 post_var_name: 'myfile',

dialog 有很多事件，如下英文。例子中使用了uploadsuccess事件

filetest - fires before file is added into the queue, parameters:
dialog - reference to dialog
filename - file name
If handler returns false then file will not be queued.
fileadd - fires when file is added into the queue, parameters:
dialog - reference to dialog
filename - file name
fileremove - fires when file is removed from the queue, parameters:
dialog - reference to dialog
filename - file name
record - file record
resetqueue - fires when upload queue is resetted, parameters:
dialog - reference to dialog
beforefileuploadstart - fires when file as about to start uploading:
dialog - reference to dialog
filename - uploaded file name
record - file record
If handler returns false then file upload will be canceled.
fileuploadstart - fires when file has started uploading:
dialog - reference to dialog
filename - uploaded file name
record - file record
uploadsuccess - fires when file is successfuly uploaded, parameters:
dialog - reference to dialog
filename - uploaded file name
data - js-object builded from json-data returned from upload handler response.
record - file record
uploaderror - fires when file upload error occured, parameters:
dialog - reference to dialog
filename - uploaded file name
data - js-object builded from json-data returned from upload handler response.
record - file record
uploadfailed - fires when file upload failed, parameters:
dialog - reference to dialog
filename - failed file name
record - file record
uploadcanceled - fires when file upload canceled, parameters:
dialog - reference to dialog
filename - failed file name
record - file record
uploadstart - fires when upload process starts, parameters:
dialog - reference to dialog
uploadstop - fires when upload process stops, parameters:
dialog - reference to dialog
uploadcomplete - fires when upload process complete (no files to upload left), parameters:
dialog - reference to dialog
注意该多文件上传，每次其实只上传了一个文件，多个文件是分多次上传的。

看到了有很多后台代码采用了多文件循环读取，只是没有必要的，我们只要当一个文件处理就可以了。

网上很多例子，也只能称为例子，离应用还有点距离，应用的时候，还需要灵活点

比如我们需要传入自己的参数，网上很难找到，其实我们可以在事件中来改变提交的参数，

采用属性 base_params:{ hehe: "wayfoon" } 来实现,

function onUploadSuccess(dialog, filename, resp_data, record)

{

你可以改变dialog的某些值

resp_data 是返回的json数据

}

方法二。

. 费话一个，先下载 Ext.ux.UploadDialog.zip , Extjs.com上面有得下

2.HTML脚本
<script type="text/javascript" src="JSFrame/UploadDialog/Ext.ux.UploadDialog.js" ></script>
<script type="text/javascript" src="JSFrame/ProgressBar/Ext.ux.ProgressBar.js" ></script>
<link rel="stylesheet" type="text/css" href="JSFrame/ProgressBar/Ext.ux.ProgressBar.css"/>
<link rel="stylesheet" type="text/css" href="JSFrame/UploadDialog/css/Ext.ux.UploadDialog.css"/>
<script language="javascript" src="Upoad.js"></script>

</head>
    <body>
        <div id="Upload-dlg"></div>
    </body>
</html>

3 JS脚本

Ext.onReady(function(){

var dialog = new Ext.ux.UploadDialog.Dialog(null, {
    autoCreate: true,
    closable: true,
    collapsible: false,
    draggable: true,
    minWidth: 400,
    minHeight: 200,
    width: 400,
    height: 350,
    proxyDrag: true,
    resizable: true,
    constraintoviewport: true,
    title: 'File upload queue.',
    url: 'upload.asp',
    reset_on_hide: false,
    allow_close_on_upload: true
});
dialog.show('my-dlg');

});

4 . 服务器端返回代码
接收是用 request("file")
返回要求是一个JSON格式的字符串,引用下原版的
The files in the queue are posted one at a time, the file field name is 'file'. The handler should return json encoded object with following properties:

{
success: true|false, // required
error: 'Error or success message' // optional, also can be named 'message'
}

三。

创建调用的HTML：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title></title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/Ext.ux.UploadDialog.css" />
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="Ext.ux.UploadDialog.js"></script>


<script>
Ext.onReady(function() {
var dialog = new Ext.ux.UploadDialog.Dialog({
url: 'upload-dialog-request.php',
reset_on_hide: false,
allow_close_on_upload: true,
upload_autostart: true
});

dialog.show('show-button');
});
</script>
</head>
<body>
</body>
</html>

分享到：

voa special english | my webdisk

2009-07-13 21:55
浏览 3424
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论