<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>input file的另类做法</title>
<style type="text/css">
<!--
* { font-size:12px}
body { margin:0}
.line { position:relative; float:left; padding:8px 0}
.line span { float:left}
input { border:1px solid #888; vertical-align:middle}
.file { position:absolute; left:90px; top:8px; display:none;filter:alpha(opacity=0);opacity:0}
.file1 { padding:2px 10px; display:block; float:left; background:#FF66CC; color:#fff; z-index:1; margin-left:5px; vertical-align:middle; cursor: pointer}
.inputstyle { width:150px; border:1px solid #888; z-index:99}
-->
</style>
</head>
<body>
<div class="line">
<span>
<label>上传文件：</label>
<input name="" type="text" id="viewfile" onmouseout="document.getElementById('upload').style.display='none';" class="inputstyle" onchange="alert(this.value);"/>
</span>
<label for="unload" onmouseover="document.getElementById('upload').style.display='block';" class="file1">
添加附件
</label>
<input type="file" onchange="document.getElementById('viewfile').value=this.value;this.style.display='none';" class="file" id="upload" />
</div>
</body>
</html>
分享到：
相关推荐
input file上传图片预览
android webview input=file 失效解决方案
CSS自定义inputfile
js获取input file控件选择的图片 并且立即在img标签显示出来
只修改input file组件的浏览按钮样式
解决No input file specified
自动上传文件，样式美化，input file选择文件之后自动上传（样式自定义美化），$.ajaxFileUpload自动上传文件。不会包教会。你值得拥有！
js input file多个文件上传功能是一款可input上传图片和input file多个文件上传功能特效代码
input file 表单很难用css样式来控制，IE下还好，dorder属性可以修改，但firefox下不行，非常丑，而且file的值通过模拟click事件获取的文件不能提交，也不能传给其他函数。 浏览按钮长度也不可控制。 前几天遇到这个...
如何将input type=file显示的浏览变成英文的,简单实用！
上传控件input type='file' css 样式美化
input type=file 调取手机照相机和选择照片上传 附件下载demo导入运行即可
jsp实现input标签 file类型的上传图片即时预览功能
HTML input type=file文件选择表单元素.docx
自己收集的按钮国际化实现，大家自己看看，应该有用的
window.createObjectURL 上传图片，实现web预览
C#如何使用input[type=file]进行多个图片上传（XMLHttpRequest与后台交互） 详情可看：https://blog.csdn.net/weixin_44713389/article/details/90746459
注意:input[type=file] 标签中的属性accept=application/msword,application/pdf 在pc上正常,但是在手机ios和android上这个文件格式限制会被忽略,所以需要在js中增加格式的判断,以及对应显示样式的设置.(我也是刚...
input type=file 显示的浏览 改成英文
一.IIS Noinput file specified 方法一：改PHP.ini中的doc_root行，打开ini文件注释掉此行，然后重启IIS 方法二： 请修改php.ini 找到 ; cgi.force_redirect = 1 去掉前面分号，把后面的1改为0 即 cgi....