Extjs的FileUploadField文件上传解决方案

原创于 2014-04-28 13:10:42 发布 · 6.3k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#extjs #FileUploadField #插件 #css #ux

EXTJS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何解决在使用Extjs的FileUploadField插件上传文件时出现的双按钮问题。通过修改CSS样式，可以确保插件的正常使用。文章提供了详细的代码示例和解决步骤。

使用Extjs的FileUploadField插件上传文件，因为FileUploadField是ext的拓展插件所以在其api中是找不到其方法的，这个文件在extjs的examples文件夹下的ux中，所以在使用FileUploadField的时候必须将其引入过来才可以使用，在使用的过程中会出现一个问题就是，在页面中出现了两个上传按钮，这个是和ext的本身css的样式有关系，所以要将样式修改下：

<style type=text/css> .upload-icon {  
				background: url('images/image_add.png') no-repeat 0 0 !important;  
			}  
		.x-form-file-wrap {  
			position: relative;  
			height: 22px;  
		}  
		.x-form-file-wrap .x-form-file {  
			position: absolute;  
			right: 0;  
			-moz-opacity: 0;  
			filter:alpha(opacity: 0);  
			opacity: 0;  
			z-index: 2;  
			height: 22px;  
		}  
		.x-form-file-wrap .x-form-file-btn {  
			position: absolute;  
			right: 0;  
			z-index: 1;  
		}  
		.x-form-file-wrap .x-form-file-text {  
			position: absolute;  
			left: 0;  
			z-index: 3;  
			color: #777;  
		}  
		</style>

这个时候插件的使用才会正常。