ext js swfupload【代码示例】

houduangongchengshi

温馨提示:这篇文章已超过288天没有更新,请注意相关的内容是否还可用!

ext js swfupload【代码示例】

Ext JS是一个用于构建富客户端应用程序的JavaScript框架,而SWFUpload是一个基于Flash的文件上传插件。在Ext JS中使用SWFUpload可以实现在网页中进行文件上传的功能。下面是一个使用Ext JS和SWFUpload的示例代码:

需要在HTML页面中引入Ext JS和SWFUpload的相关文件:

<!DOCTYPE html>

<html>

<head>

<title>Ext JS SWFUpload示例</title>

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

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

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

</head>

<body>

<div id="uploadPanel"></div>

</body>

</html>

然后,在JavaScript代码中创建一个Ext JS的Panel并使用SWFUpload插件初始化文件上传功能:

Ext.onReady(function() {

var uploadPanel = Ext.create('Ext.panel.Panel', {

title: '文件上传',

width: 400,

height: 200,

renderTo: 'uploadPanel',

items: [{

xtype: 'button',

text: '选择文件',

handler: function() {

var swfupload = new SWFUpload({

upload_url: 'upload.php',

flash_url: 'swfupload.swf',

button_placeholder_id: this.id,

file_queued_handler: function(file) {

console.log('文件已添加到队列中:' + file.name);

},

upload_success_handler: function(file, serverData) {

console.log('文件上传成功:' + file.name);

},

upload_error_handler: function(file, errorCode, message) {

console.log('文件上传失败:' + file.name + ',错误码:' + errorCode + ',错误信息:' + message);

}

});

swfupload.selectFile();

}

}]

});

});

在上述代码中,首先创建了一个Ext JS的Panel,然后在Panel中添加了一个按钮,用于选择文件。当点击按钮时,会创建一个SWFUpload实例,并通过配置参数指定了文件上传的URL、Flash文件的路径以及一些回调函数。在文件添加到队列、文件上传成功和文件上传失败时,这些回调函数会被触发,并输出相应的信息到控制台。

这样,通过使用Ext JS和SWFUpload,我们可以在网页中实现文件上传的功能。

文章版权声明:除非注明,否则均为莫宇前端原创文章,转载或复制请以超链接形式并注明出处。

取消
微信二维码
微信二维码
支付宝二维码