在网页中修改头像功能时需要把文件框给隐藏掉,网上找到如下方法解决,兼容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>
分享到:
相关推荐
只修改input file组件的浏览按钮样式
input file 表单很难用css样式来控制,IE下还好,dorder属性可以修改,但firefox下不行,非常丑,而且file的值通过模拟click事件获取的文件不能提交,也不能传给其他函数。 浏览按钮长度也不可控制。 前几天遇到这个...
html修改FileUpload控件的浏览按钮的文字改为自定义
主要介绍了input file样式修改以及图片预览删除功能,input file 按钮改成自己想要的样式以及.图片预览功能的实现,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。
代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd... <... <head> <title>添加附件<... [removed][removed] [removed] function f
表单控件-Input控件 ...input控件中的默认文本值 size 正整数 input控件在页面中的显示宽度 readonly readonly 该控件内容为只读(不能编辑修改) disabled disabled 第一次加载页面时禁用该控件(显示为灰色) chec
关于type=file的input是啥? 这个是啥我觉得没必要再说了,反正大家都知道,然后在现在有各种手机的时代,还可以通过直接拍照的方式来上传,反正比以前好玩多了。 并且以前是只能上传一个文件,现在的话,只要增加...
但input的显示效果仅为一个按钮,且不能修改UI。如果要实现自定义上传按钮,一般需要设置input为不可见,然后将input与自定义界面放在同一个div中,并将input铺在界面上方: <!DOCTYPE html> <html> <...
主要介绍了type=file的inpu美化,自定义上传按钮样式代码,需要的朋友可以参考下
这个比较麻烦因为file的值本身是不允许用脚本修改的(安全角度考虑) 方法1).使用脚本把这个file的input移动到一个form中,然后调用reset,如果有多个这样的input当然还要再移出来.这个方法我不会采用,因为对.net开发者 ...
处于安全上的考虑,input[type="file"] 的文件选择按钮样式并不能随意修改(不过可以修改input 的透明度),可能会跟设计师的设计格格不入,这时可以使用透明效果来自定义上传按钮
SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统<input type="file" />标签的文件上传模式。 [编辑本段]SWFUpload...
//绑定的界面元素<input id='gallery'type='file'/> $("#gallery").uploadify({ 设置参数,参数如下. }); 设置的属性: id: jQuery(this).attr('id'),//绑定的input的ID swf: '...
1、修复官方 file input 按钮位置偏移问题,详见:界面-模板风格-导入风格; 2、修复官方不同皮肤信息提示还是蓝色的 问题 ; 3、修复官方不同皮肤下PPHPSSO配色不改变的问题; 4、修复弹窗插件UI,在二次弹窗...
一个极其轻巧(最小化1,2k)的jquery插件,用于以易于设置样式的方式修改文件输入字段(上传按钮和显示的文件名是自己的元素) 用法 包含jquery.filey.js并按以下步骤启动: $(document).ready(function() { $('...
复制代码代码如下:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”><html> <head> <meta http-equiv=”... charset=utf-8″> <...input{border:1px solid #000;}.clear{cl
** 使用标签把要操作的数据包起来,通过修改标签的属性值来实现标签内数据样式的变化 *** <font size="5"></font> 2、图像标签 图片的路径"/> ** 通过html访问本地图片,使用绝对路径,目前有问题 3、...
RG100A请修改/etc/config/system,把BTN_1改成BTN_2或BTN_3 BTN_0 RESET(DB120,RG100A均有效) BTN_1 DB120:WLAN BTN_2 WPS(DB120,RG100A均有效) BTN_3 RG100A:WLAN /usr/share/mplayer/playlist为网络电台地址或播放...
input type="file"> 在 Android 4.4.2 上不工作的问题。 它不需要对服务器网页进行任何修改。注意这是一个用于非常简单情况的示例插件。 它并不涵盖所有情况。 也许需要进行一些修改才能将此插件用于您的网站。它...
修改合并后的web.xml文件,将名为SimpleUploader的Servlet的enabled参数值改为true, 以允许上传功能,Connector Servlet的baseDir参数值用于设置上传文件存放的位置 在web.xml最后添加标签定义: <taglib-uri>...