Extjs的FileUploadField文件上传出现了两个上传按钮

使用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>

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

赞 (0)

相关推荐

  • 利用ajaxfileupload插件实现文件上传无刷新的具体方法

    做项目的时候遇到了这样一个问题,如果用普通的ASP.NET FileUpload控件实现文件上传,那么页面会刷新,那么页面上用JS拼出的元素就会消失,为了上传文件,又不能刷新页面,ajaxfileupload插件是一个很好的选择(插件下载地址:http://files.jb51.net/file_images/article/201306/js/ajaxfileupload.js) ajaxfileupload是jQuery的一个插件,使用这个插件同时要引用jQuery.js文件 直接上代码吧

  • JQuery fileupload插件实现文件上传功能

    道理相通,我简单分享下在.net MVC下的实装. 1.制作Model类 using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace RCRS.WebApp.LG.EM.Models { //---------------------------------------------------------------- /// <summary> /// Impor

  • java组件commons-fileupload文件上传示例

    java组件commons-fileupload文件上传示例

    文件上传在Web应用中非常普遍,要在Java Web环境中实现文件上传功能非常容易,因为网上已经有许多用Java开发的组件用于文件上传,本文以使用最普遍的commons-fileupload组件为例,演示如何为Java Web应用添加文件上传功能. commons-fileupload组件是Apache的一个开源项目之一,可以从http://commons.apache.org/fileupload/下载.该组件简单易用,可实现一次上传一个或多个文件,并可限制文件大小. 下载后解压zip包,将c

  • asp.net fileupload控件上传文件与多文件上传

    1.前台文件 Default.aspx: <%@ Page Language="C#" AutoEventWireup="true"CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

  • ASP.NET中FileUpload文件上传控件应用实例

    使用 FileUpload 控件,可以为用户提供一种将文件从用户的计算机发送到服务器的方法.该控件在允许用户上载图片.文本文件或其他文件时很有用.要上载的文件将在回发期间作为浏览器请求的一部分提交给服务器.在文件上载完毕后,您可以用代码管理该文件. 大致了解了一下FileUpload,让我们来看一下FileUpload几个实际应用中问题的处理方法. 1.一次上传多个文件 要一次上传多个文件,我们可以像传单个文件那样对每个文件单独进行处理,除此之外,我们还可以使用HttpFileCollectio

  • 使用AjaxFileUpload.js实现异步文件上传示例

    ajax是无法提交文件的,所以在上传图片并预览的时候,我们经常使用Ifame的方法实现看似异步的效果.但是这样总不是很方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们不用去管理Iframe的一系列操作,也不用影响我们的页面结构,实现异步的文件提交. html: 复制代码 代码如下: <input type="file" name="upload" hidden="hidden" id="file_u

  • ajaxFileUpload.js插件支持多文件上传的方法

    前提条件: ajaxFileUpload.js插件多文件上传 步骤: 1.修改源码,(源码只支持单个文件的上传): 复制代码 代码如下: //修改前代码------- //var oldElement = jQuery('#' + fileElementId); //var newElement = jQuery(oldElement).clone(); //jQuery(oldElement).attr('id', fileId); //jQuery(oldElement).before(ne

  • java组件fileupload文件上传demo

    在我们的web开发中,很多的时候都需要把本机的一些文件上传到web服务器上面去. 如:一个BBS系统,当用户使用这是系统的时候,能把本机的一些图片,文档上传到服务器上面去.然后其他用户可以去下载这些文件,那么这样的话,我们可以自己编程实现文件的上传,但是更好的方式是使用一些已有的组件帮助我们实现这种上传功能. 常用的上传组件: Apache 的 Commons FileUpload JavaZoom的UploadBean jspSmartUpload FileUpload下载地址: http:/

  • jQuery插件AjaxFileUpload实现ajax文件上传

    本文实例为大家分享了AjaxFileUpload实现文件上传的具体代码,供大家参考,具体内容如下 jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传. 1.引入AjaxFileUpload插件相关的js 复制代码 代码如下: <script type="text/javascript" src="<%=basePath%>resources/js/

  • ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法

    本文实例讲述了ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法.分享给大家供大家参考.具体实现方法分析如下: 首先,AjaxFileUploader插件是一个基于jquery的插件,我们可以使用AjaxFileUploader插件来实现文件异步上传功能了,使用这款插件上传文件不要担心兼容性的问题,它的兼容性可以说兼容所有主流浏览器,下面来给大家介绍一个AjaxFileUploader+thinkphp实现文件上传的实例. ThinkPHP框架下用AjaxFileUpl

随机推荐