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>
这个时候插件的使用才会正常。
相关推荐
-
ASP.NET中FileUpload文件上传控件应用实例
使用 FileUpload 控件,可以为用户提供一种将文件从用户的计算机发送到服务器的方法.该控件在允许用户上载图片.文本文件或其他文件时很有用.要上载的文件将在回发期间作为浏览器请求的一部分提交给服务器.在文件上载完毕后,您可以用代码管理该文件. 大致了解了一下FileUpload,让我们来看一下FileUpload几个实际应用中问题的处理方法. 1.一次上传多个文件 要一次上传多个文件,我们可以像传单个文件那样对每个文件单独进行处理,除此之外,我们还可以使用HttpFileCollectio
-
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
本文实例讲述了ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法.分享给大家供大家参考.具体实现方法分析如下: 首先,AjaxFileUploader插件是一个基于jquery的插件,我们可以使用AjaxFileUploader插件来实现文件异步上传功能了,使用这款插件上传文件不要担心兼容性的问题,它的兼容性可以说兼容所有主流浏览器,下面来给大家介绍一个AjaxFileUploader+thinkphp实现文件上传的实例. ThinkPHP框架下用AjaxFileUpl
-
利用ajaxfileupload插件实现文件上传无刷新的具体方法
做项目的时候遇到了这样一个问题,如果用普通的ASP.NET FileUpload控件实现文件上传,那么页面会刷新,那么页面上用JS拼出的元素就会消失,为了上传文件,又不能刷新页面,ajaxfileupload插件是一个很好的选择(插件下载地址:http://files.jb51.net/file_images/article/201306/js/ajaxfileupload.js) ajaxfileupload是jQuery的一个插件,使用这个插件同时要引用jQuery.js文件 直接上代码吧
-
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/
-
使用AjaxFileUpload.js实现异步文件上传示例
ajax是无法提交文件的,所以在上传图片并预览的时候,我们经常使用Ifame的方法实现看似异步的效果.但是这样总不是很方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们不用去管理Iframe的一系列操作,也不用影响我们的页面结构,实现异步的文件提交. html: 复制代码 代码如下: <input type="file" name="upload" hidden="hidden" id="file_u
-
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.
-
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文件上传示例
文件上传在Web应用中非常普遍,要在Java Web环境中实现文件上传功能非常容易,因为网上已经有许多用Java开发的组件用于文件上传,本文以使用最普遍的commons-fileupload组件为例,演示如何为Java Web应用添加文件上传功能. commons-fileupload组件是Apache的一个开源项目之一,可以从http://commons.apache.org/fileupload/下载.该组件简单易用,可实现一次上传一个或多个文件,并可限制文件大小. 下载后解压zip包,将c
随机推荐
- ASP.NET网站模板的实现(第2节)
- 微信小程序 (一)新建项目hello WeApp 详细介绍
- PHP版国家代码、缩写查询函数代码
- php 实现一个字符串加密解密的函数实例代码
- destoon实现不同会员组公司名称显示不同的颜色的方法
- 用php实现批量查询清除一句话后门的代码
- 极简的Python入门指引
- 用C语言判断字符是否为空白字符或特殊字符的方法
- Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
- 解决Docker容器时区及时间不同步问题的方法
- mysql二进制日志文件恢复数据库
- PHP内存缓存Memcached类实例
- python 示例分享---逻辑推理编程解决八皇后
- Oracle数据库账号被锁定解决方法
- Easyui的组合框的取值与赋值
- jQuery动画效果animate和scrollTop结合使用实例
- C++指向函数的指针实例解析
- 学习javascript面向对象 理解javascript对象
- Android自定义View之组合控件实现类似电商app顶部栏
- 基于JavaScript实现移动端TAB触屏切换效果