Ext2.0 文件上传组件

最新推荐文章于 2021-02-28 07:37:37 发布

huanyingjung

最新推荐文章于 2021-02-28 07:37:37 发布

阅读量257

点赞数

CC 4.0 BY-SA版权

分类专栏： ext2.0 扩展组件文章标签： EXT CSS JavaScript json PHP ViewUI

本文链接：https://blog.youkuaiyun.com/huanyingjung/article/details/83849836

ext2.0 扩展组件专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用 Ext.ux.UploadDialog 实现多文件上传功能，并提供了一个具体的实现示例。该组件可以逐个上传多个文件，并支持设置上传URL、允许的文件类型等配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ext.ux.UploadDialog.Dialog 实现了多文件的上传，不过需要注意的是，该组件并不是一次性把多个文件传到后台，而是添加一个文件就会把这个文件上传上去，其实还是一次上传了一个文件

例子：

<html>
<head>
    <title>Anchoring</title>
	<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

    <script type="text/javascript" src="../../ext-all.js"></script>
    <link rel="stylesheet" type="text/css" href="UploadDialog/css/Ext.ux.UploadDialog.css" />
<script type="text/javascript" src="UploadDialog/Ext.ux.UploadDialog.js"></script>
<script type="text/javascript" src="UploadDialog/locale/ru.utf-8_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
	dialog = new Ext.ux.UploadDialog.Dialog({
		  url: 'upload-dialog-request.php',
		  reset_on_hide: false,
		  permitted_extensions:[ 'JPG' , 'jpg' , 'jpeg' , 'JPEG' , 'GIF' , 'gif' , 'png' , 'PNG' ],
		  allow_close_on_upload: true,
		  upload_autostart: true
	});

            
	dialog.show(); //'show-button' 
	dialog.on( 'uploadsuccess' , onUploadSuccess); //定义上传成功回调函数
	dialog.on( 'uploadfailed' , onUploadFailed); //定义上传失败回调函数
	
	dialog.on( 'uploaderror' , onUploadFailed); //定义上传出错回调函数
	
	dialog.on( 'uploadcomplete' , onUploadComplete); //定义上传完成回调函数
	
	
	//文件上传成功后的回调函数
	function onUploadSuccess(dialog, filename, resp_data, record){
	alert(resp_data.data);//resp_data是json格式的数据
	}
	
	//文件上传失败后的回调函数
	function onUploadFailed(dialog, filename, resp_data, record){
	alert(resp_data.data);
	}
	
	//文件上传完成后的回调函数
	function onUploadComplete(dialog){
	
	alert('所有文件上传完成');
	//    dialog.hide();
	}
});
	</script>
</head>
<body>
</body>
</html>