在网页中修改头像功能时需要把文件框给隐藏掉,网上找到如下方法解决,兼容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按钮的文本内容。 4. **Web组件**:使用Web组件技术,可以创建自定义的file input组件,内部包含多语言支持。这样,当切换语言时,只需更新组件的属性即可。 ...
### 只修改input file组件的浏览按钮样式 在前端开发中,`<input type="file">`组件通常用于让用户选择本地文件并上传到服务器。不过,默认情况下,此组件的样式较为简单,不符合很多项目的视觉需求。为了提升用户...
input file 表单很难用css样式来控制,IE下还好,dorder属性可以修改,但firefox下不行,非常丑,而且file的值通过模拟click事件获取的文件不能提交,也不能传给其他函数。 浏览按钮长度也不可控制。 前几天遇到这个...
默认情况下,当我们在HTML中使用`<input type="file">`来创建一个文件选择器时,浏览器通常会显示一个默认样式的“浏览”按钮,用于打开文件选择对话框。然而,对于追求美观和统一界面风格的开发者来说,这样的默认...
4. **绑定事件处理器:** 为了实现在用户选择文件后更新文本输入框中的值,我们需要绑定一个`onChange`事件处理器到隐藏的`<input type="file">`元素。 ```html <input type="file" name="picpath" id="picpath...
在网页设计中,我们经常需要使用到`<input type="file">`标签来实现文件上传功能,但默认的上传控件样式通常较为简单,不符合现代网页的美观需求。本篇将探讨如何自定义`input file`的样式,打造个性化的上传界面。 ...
本篇文章将详细讲解如何将`<input type="file">` 控件的“浏览”按钮和提示改为英文。 首先,我们需要理解`<input type="file">`的基本结构和属性。这个标签创建了一个可以点击的区域,用户可以通过点击打开本地...
由于浏览器的安全限制,我们不能直接修改input[type="file"]的文本内容,但可以通过覆盖默认样式,使用自定义的背景图片和透明的文字来实现视觉上的替换。 1. **隐藏默认按钮**: ```css input[type="file"] { ...
"input file选择文件之后自动上传(样式自定义美化)"这个主题聚焦于一个常见但有时被忽视的用户体验改进点:如何在用户选择文件后立即启动上传,并且在上传过程中保持界面的美观与友好。下面将详细介绍这一过程涉及...
例如,可以通过添加背景图片、改变按钮的颜色和大小等方式来修改input file按钮的样式。 知识点2:图片预览功能 图片预览功能可以通过JavaScript和CSS实现。首先,在HTML中添加一个input file标签,并添加一个-...
`input[type=file]`默认的样式通常由浏览器控制,很难通过CSS直接修改其外观,例如改变背景颜色或应用背景图片。 要解决这一问题,一种常见的技巧是利用`label`元素与`input[type=file]`关联,通过CSS隐藏原始的...
这样,当用户点击自定义的“选择文件”按钮时,实际的`<input type="file">`会被触发,文件名会显示在假按钮上。通过这种方式,我们可以实现一个更友好、更具设计感的文件上传体验。 总结来说,"00type=file导入...
"jquery封装的input file控件"是一种解决方法,通过jQuery库来改进文件上传控件的外观和交互体验。 jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互等任务。在本案例中,开发者...
### 如何使 input type=file 只读并实现文件上传 在网页开发中,有时我们需要让用户选择一个文件但不允许他们更改已选择的文件。这通常是为了防止用户在提交表单前临时更改文件,从而确保文件的一致性和安全性。...
本教程将详细介绍如何通过CSS和JavaScript(使用jQuery库)来修改file按钮的默认样式,创建一个更加吸引人的用户界面。 首先,我们来看HTML结构。这里创建了一个`<form>`元素,其中包含一个id为`addFile`的`<input ...
当用户点击这个按钮时,`inputFile.value`被设置为一个空字符串,这会让浏览器认为文件选择已经被取消,从而清除了文件输入框中的显示。注意,这种方法仅适用于现代浏览器,对于一些旧版本或非标准浏览器,可能需要...
本文主要探讨如何有效地修改 `type="file"` 输入框的样式。 首先,`<input type="file">` 的基本功能是允许用户浏览和选择计算机上的文件,随着技术的发展,现在还可以通过增加 `multiple` 属性来支持多文件上传,...
### 关于 INPUT type=file 的样式 在Web开发中,`<input type="file">` 元素被广泛用于让用户选择文件进行上传。然而,默认情况下,不同浏览器提供的文件输入框样式存在差异,这不仅影响了用户体验的一致性,还可能...
### JavaScript获取和清空input type="file"值的知识点 #### 1. 获取input type="file"的值 `<input type="file">`元素允许用户选择一个或多个文件,这些文件的路径将通过其`value`属性返回。然而,需要注意的是,...