`
paladin1988
  • 浏览: 326315 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

input file 文件上传按钮国际化

 
阅读更多

之前项目中遇到的input file文件上传按钮的国际化问题,使用下面的代码解决了

 

下面的代码还需要根据实际情况用CSS美化一下,可以解决文件上传按钮国际化问题的

 

请参考:http://www.iteye.com/problems/35988

 

==========================================================

 

<input type="text" name="txt" readonly />
<input type="button" value="请选择文件" size="30"
onclick="file.click()"/>
<input type="file" id="file" onchange="txt.value=this.value" name="file" style="position:absolute;

filter:alpha(opacity=0);-moz-opacity:0;opacity:0;margin-left:-100px;"size="1" hidefocus/><br/>

 


做颜色标记的最重要红色表示透明度,兼容ff和ie ;
蓝色就是具体调节file按钮的位置,在调试的时候可以先去掉红色部分,那样就方便了,今天弄了一天,加上菜鸟的我。希望能给菜鸟带来帮助。。。。。

分享到:
评论

相关推荐

    file input 按钮国际化

    "file input 按钮国际化"是这个话题的一个具体实例,主要关注的是如何将HTML中的文件上传(file input)按钮进行多语言适配。 文件输入按钮是网页表单中常见的一种元素,用户通常用它来选择本地文件进行上传。默认...

    input file选择文件之后自动上传(样式自定义美化)

    通过使用`&lt;input type="file"&gt;`、事件监听和`$.ajaxFileUpload`,我们可以构建出既美观又功能强大的文件上传组件,提升用户的使用体验。同时,对于开发者来说,理解这些技术原理并熟练应用,是提升Web开发技能的重要...

    文件上传input file简便美化方案(css)

    这里的“假”上传按钮(.file-uploader-wrap-fake)是使用position: absolute属性定位的,它覆盖在真实的上传按钮上。然后通过JavaScript来监听文件input的变化,并将文件信息显示在文本框中。 JavaScript代码如下...

    上传按钮file美化

    在本主题中,我们将深入探讨如何实现“上传按钮file美化”,以创建一个类似微博的图片上传界面,同时确保跨浏览器的兼容性。我们将讨论如何自定义图片、样式以及按钮上的文字,以提升用户体验。 首先,我们需要了解...

    input type=file 显示的浏览 改成英文

    在网页设计中,`&lt;input type="file"&gt;` 是HTML元素的一个重要部分,它用于创建一个文件上传控件。默认情况下,这个控件的文本提示和按钮是根据用户的操作系统语言来显示的,例如,在中文环境下会显示“浏览”或“选择...

    自定义上传控件input file的样式

    在网页设计中,我们经常需要使用到`&lt;input type="file"&gt;`标签来实现文件上传功能,但默认的上传控件样式通常较为简单,不符合现代网页的美观需求。本篇将探讨如何自定义`input file`的样式,打造个性化的上传界面。 ...

    HTML input type=file文件选择表单元素.docx

    可以使用 label 元素与 file 控件关联,或者使用 CSS 来隐藏 file 元素,然后用一个好看的按钮来代替 file 元素。 七、accept 属性的作用 accept 属性可以用来指定浏览器接受的文件类型,也就是当我们打开系统的...

    文件上传插件bootstrap File

    Bootstrap File Input是一款流行的文件上传插件,它专为基于HTML5的文件上传设计,具有高度可定制性和良好的用户体验。这款插件充分利用了Bootstrap框架的样式,使得文件上传组件与Bootstrap主题保持一致,提供了...

    jquery上传文件点击input上传文件样式代码

    本主题聚焦于利用jQuery来改进文件上传功能,尤其是针对`&lt;input type="file"&gt;`元素的样式和交互。在传统的HTML文件上传输入框中,用户通常会看到一个简单的文本按钮,点击后弹出文件选择对话框。然而,这样的设计...

    教你如何改变上传文件input的file属性.doc

    同时,为了让“选择文件”按钮更加易用,我们使用了绝对定位隐藏了实际的`&lt;input type="file"&gt;`,并通过文本内容来模拟按钮效果: ```css .file { width: 64px; height: 22px; position: relative; vertical-...

    只修改input file组件的浏览按钮样式

    ### 只修改input file组件的浏览按钮样式 在前端开发中,`&lt;input type="file"&gt;`组件通常用于让用户选择本地文件并上传到服务器。不过,默认情况下,此组件的样式较为简单,不符合很多项目的视觉需求。为了提升用户...

    如何将input type=file显示的浏览变成英文的

    在网页开发过程中,我们经常会用到`&lt;input type="file"&gt;`标签来让用户选择文件上传。默认情况下,这个标签在点击时会弹出一个文件选择对话框,并且对话框上的按钮(如“打开”、“取消”)以及提示文本(如“所有...

    上传控件input file 样式美化

    如果需要支持多文件上传,可以设置`&lt;input type="file"&gt;`的`multiple`属性。 ```html &lt;input type="file" multiple&gt; ``` 通过以上方法,我们可以对`&lt;input type="file"&gt;`上传控件进行样式美化,创建出符合网页...

    点击图片触发input是file的事件

    这个方法可以用来预览图片,因为它可以将图片文件转换为一个可以在浏览器中访问的 URL。 知识点2:图片上传和预览 在上面的代码中,我们可以看到一个点击图片触发 input 是 file 的事件。在点击图片时,会触发 ...

    文件上传按钮样式

    在本例中,我们关注的是“文件上传按钮样式”,特别是利用Bootstrap框架来实现这一功能,并且具备图片上传预览的效果。Bootstrap是一款流行的前端开发框架,它提供了丰富的UI组件,帮助开发者快速构建响应式、移动...

    怎样让input type=file 只读,并能实现文件上传

    ### 如何使 input type=file 只读并实现文件上传 在网页开发中,有时我们需要让用户选择一个文件但不允许他们更改已选择的文件。这通常是为了防止用户在提交表单前临时更改文件,从而确保文件的一致性和安全性。...

    css自定义文件上传按钮样式

    本文将深入探讨如何使用CSS来自定义文件上传按钮的样式。 首先,我们需要理解文件上传组件的基本结构。通常,HTML中的`&lt;input type="file"&gt;`元素用于创建一个文件选择器,但其默认样式非常朴素,不符合现代网页设计...

    input file上传文件样式支持html5的浏览器解决方案

    最近在使用画布处理图像像素时用到了file上传控件,发现了file上传控件的两个兼容性问题。一个是file上传控件在火狐下无法通过css改变width,另一个是file上传控件在不同的浏览器下的外观和行为都不一样。 下面是...

    html修改FileUpload控件的浏览按钮的文字改为自定义

    默认情况下,当我们在HTML中使用`&lt;input type="file"&gt;`来创建一个文件选择器时,浏览器通常会显示一个默认样式的“浏览”按钮,用于打开文件选择对话框。然而,对于追求美观和统一界面风格的开发者来说,这样的默认...

Global site tag (gtag.js) - Google Analytics