`

修改 input file 的按钮值

阅读更多
在网页中修改头像功能时需要把文件框给隐藏掉,网上找到如下方法解决,兼容firefox和IE。图片选择后检查图片类型是否合法。

<style>
.fileinput{
    width:0px;
    font-size:12px;
    margin-left:-50px;
    margin-top:-3px;
    position:absolute;
    filter:alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
}
</style>
<script>
//以下两个方法预览图片
var picPath;

function loadImage(ele) {
    checkExt(ele);
    picPath   = getPath(ele);
    document.getElementById("img"+ele.id).src=picPath;
}
function getPath(obj){
	if(obj){
		//ie
		if (window.navigator.userAgent.indexOf("MSIE")>=1){
			obj.select();
			// IE下取得图片的本地路径
			return document.selection.createRange().text;
		}
		//firefox
		else if(window.navigator.userAgent.indexOf("Firefox")>=1){
			if(obj.files){
				// Firefox下取得的是图片的数据
				return obj.files.item(0).getAsDataURL();
			}
			return obj.value;
		}
		return obj.value;
	}
}

//检查文件类型
function checkExt(obj){
  var errMsg="";
  var FileExt="";
  var AllowExt=".jpg|.jpeg|.gif|.bmp|.png|"//全部图片格式类型
  //var AllowExt=".jpg|.gif|.doc|.txt|";//允许上传的文件类型
  if(obj.value=="") return false;
  FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();
  if(AllowExt!=0&&AllowExt.indexOf(FileExt+"|")==-1) { //判断文件类型是否允许上传
    errMsg="\n该文件类型不允许上传。请上传 "+AllowExt+" 类型的文件,当前文件类型为"+FileExt;
    alert(errMsg);
    return false;
  }
  
}
</script>

<input type="file" id="headId" name="head" class="fileinput" onchange="loadImage(this);" title="点击上传个人图片"/>
<a href="#" onclick="var o=document.getElementById('headId');o.click();">点击上传个人图片</a></p>


分享到:
评论

相关推荐

    file input 按钮国际化

    可以监听语言切换事件,根据当前语言动态修改file input按钮的文本内容。 4. **Web组件**:使用Web组件技术,可以创建自定义的file input组件,内部包含多语言支持。这样,当切换语言时,只需更新组件的属性即可。 ...

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

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

    input file 表单修改,IE8 Firefox下兼容

    input file 表单很难用css样式来控制,IE下还好,dorder属性可以修改,但firefox下不行,非常丑,而且file的值通过模拟click事件获取的文件不能提交,也不能传给其他函数。 浏览按钮长度也不可控制。 前几天遇到这个...

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

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

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

    4. **绑定事件处理器:** 为了实现在用户选择文件后更新文本输入框中的值,我们需要绑定一个`onChange`事件处理器到隐藏的`&lt;input type="file"&gt;`元素。 ```html &lt;input type="file" name="picpath" id="picpath...

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

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

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

    本篇文章将详细讲解如何将`&lt;input type="file"&gt;` 控件的“浏览”按钮和提示改为英文。 首先,我们需要理解`&lt;input type="file"&gt;`的基本结构和属性。这个标签创建了一个可以点击的区域,用户可以通过点击打开本地...

    美化file或修改file类型按钮上的“浏览”

    由于浏览器的安全限制,我们不能直接修改input[type="file"]的文本内容,但可以通过覆盖默认样式,使用自定义的背景图片和透明的文字来实现视觉上的替换。 1. **隐藏默认按钮**: ```css input[type="file"] { ...

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

    "input file选择文件之后自动上传(样式自定义美化)"这个主题聚焦于一个常见但有时被忽视的用户体验改进点:如何在用户选择文件后立即启动上传,并且在上传过程中保持界面的美观与友好。下面将详细介绍这一过程涉及...

    input file样式修改以及图片预览删除功能详细概括(推荐)

    例如,可以通过添加背景图片、改变按钮的颜色和大小等方式来修改input file按钮的样式。 知识点2:图片预览功能 图片预览功能可以通过JavaScript和CSS实现。首先,在HTML中添加一个input file标签,并添加一个-...

    css美化input file按钮的代码方法

    `input[type=file]`默认的样式通常由浏览器控制,很难通过CSS直接修改其外观,例如改变背景颜色或应用背景图片。 要解决这一问题,一种常见的技巧是利用`label`元素与`input[type=file]`关联,通过CSS隐藏原始的...

    00type=file导入文件按钮样式修改的jsp代码-完美好

    这样,当用户点击自定义的“选择文件”按钮时,实际的`&lt;input type="file"&gt;`会被触发,文件名会显示在假按钮上。通过这种方式,我们可以实现一个更友好、更具设计感的文件上传体验。 总结来说,"00type=file导入...

    jquery封装的input file控件

    "jquery封装的input file控件"是一种解决方法,通过jQuery库来改进文件上传控件的外观和交互体验。 jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互等任务。在本案例中,开发者...

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

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

    修改file按钮的默认样式实现代码

    本教程将详细介绍如何通过CSS和JavaScript(使用jQuery库)来修改file按钮的默认样式,创建一个更加吸引人的用户界面。 首先,我们来看HTML结构。这里创建了一个`&lt;form&gt;`元素,其中包含一个id为`addFile`的`&lt;input ...

    clear file value (清除文件框中的值)

    当用户点击这个按钮时,`inputFile.value`被设置为一个空字符串,这会让浏览器认为文件选择已经被取消,从而清除了文件输入框中的显示。注意,这种方法仅适用于现代浏览器,对于一些旧版本或非标准浏览器,可能需要...

    关于type="file"的input框样式修改小结

    本文主要探讨如何有效地修改 `type="file"` 输入框的样式。 首先,`&lt;input type="file"&gt;` 的基本功能是允许用户浏览和选择计算机上的文件,随着技术的发展,现在还可以通过增加 `multiple` 属性来支持多文件上传,...

    input样式-input

    ### 关于 INPUT type=file 的样式 在Web开发中,`&lt;input type="file"&gt;` 元素被广泛用于让用户选择文件进行上传。然而,默认情况下,不同浏览器提供的文件输入框样式存在差异,这不仅影响了用户体验的一致性,还可能...

    js 获取、清空input type="file"的值示例代码

    ### JavaScript获取和清空input type="file"值的知识点 #### 1. 获取input type="file"的值 `&lt;input type="file"&gt;`元素允许用户选择一个或多个文件,这些文件的路径将通过其`value`属性返回。然而,需要注意的是,...

Global site tag (gtag.js) - Google Analytics