温馨提示:这篇文章已超过288天没有更新,请注意相关的内容是否还可用!
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,我们可以在网页中实现文件上传的功能。