样式：
.fileInput{width:102px;height:34px; background:url(http://images.cnblogs.com/cnblogs_com/dreamback/upFileBtn.png);overflow:hidden;position:relative;}
.upfile{position:absolute;top:-100px;}
.upFileBtn{width:102px;height:34px;opacity:0;filter:alpha(opacity=0);cursor:pointer;}
.upfile{position:absolute;top:-100px;}
.upFileBtn{width:102px;height:34px;opacity:0;filter:alpha(opacity=0);cursor:pointer;}
HTML:
<div class="fileInput left">
<input type="file" name="upfile" id="upfile" class="upfile" onchange="document.getElementById('upfileResult').innerHTML=this.value"/>
<input class="upFileBtn" type="button" value="上传图片" onclick="document.getElementById('upfile').click()" />
</div>
<input type="file" name="upfile" id="upfile" class="upfile" onchange="document.getElementById('upfileResult').innerHTML=this.value"/>
<input class="upFileBtn" type="button" value="上传图片" onclick="document.getElementById('upfile').click()" />
</div>
<span class="tip left" id="upfileResult">图片大小不超过2M,大小90*90,支持jpg、png、bmp等格式。</span>
Demo:
图片大小不超过2M,大小90*90,支持jpg、png、bmp等格式。
另外写了一篇类似的文件，没有js,详细分析过程。
http://www.cnblogs.com/dreamback/archive/2012/12/25/input-file-css-beautify.html
相关推荐
<title>File Upload Example</title> </head> <body> <form name="formen"> <!-- 隐藏的 input type="file" --> <input type="file" name="picpath" id="picpath" style="display:none" onChange="document....
在网页设计中，`<input type="file">` 是HTML元素的一个重要部分，它用于创建一个文件上传控件。默认情况下，这个控件的文本提示和按钮是根据用户的操作系统语言来显示的，例如，在中文环境下会显示“浏览”或“选择...
它通过JavaScript、HTML和Ajax技术，提供了一种用户友好的文件上传体验，可以替代传统的`<input type="file" />`标签，使得文件上传过程更加流畅且交互性更强。这种技术在Web开发中广泛应用，尤其在社交媒体、图像...
<input name="uid" type="text" value="" maxlength="20"/> <input name="pwd" type="password" value="" maxlength="10"/> <input name="gender" type="radio" value="f"/>nan <input name="gender" ...
然而，在实际使用中，我们可能会遇到一些问题，比如在WebView中使用`<input type="file">`标签时，用户无法选择本地文件。这个现象主要是由于Android的安全机制和权限控制导致的。本文将详细讲解如何解决这个问题。 ...
注意:input[type=file] 标签中的属性accept=application/msword,application/pdf 在pc上正常,但是在手机ios和android上这个文件格式限制会被忽略,所以需要在js中增加格式的判断,以及对应显示样式的设置.(我也是刚...
<li class=file><a>下级</a></li> <li> <label for=subsubfolder2>下级</label> <input id=subsubfolder2 type=checkbox /> <ol> <li class=file><a>无限级</a></li> <li class=file><a>无限级</a></li> <...
一、input type=file 文件选择表单元素 input type=file 是 HTML 中的一种表单元素，用于选择文件并上传到服务器。HTML5 之前的 input type=file 元素只能一次上传一张图片，无法满足一次上传多图的交互需求。因此...
<!DOCTYPE ... <input type="file" name="file1" /><br /> <input type="submit" value="文件上传" /> </form> </body> </html>
<input type="text" name="name"><font color="ff0000">*</font></td> </tr> <tr bgcolor="#FFFFFF"> <td align="right">城市：</td> <td height="25"> <input type="text" name="city"></td> </tr> <tr ...
<input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/> <input type="file" /><br/> <input type="hidden" /><div style="display:none">test</div><br...
name="userName" id="userName"></td> </tr> <tr> <td>密码:<input type="password" name="password" id="password"></td> </tr> <tr> <td><input type="submit" value="登录" style="background-color:pink"> ...
<input type="file" id="file" name="file" /> </body> <script src="/amr_player/amrnb.min.js"></script> <script src="/amr_player/pcmdata.min.js"></script> <script src="/amr_player/enter.js"></script> ...
<input type="file" accept="image/*" capture> ``` `accept="image/*"` 表示接受所有类型的图片文件，`capture` 属性则指示浏览器应该首选设备的摄像头进行捕获。不过需要注意的是，`capture` 属性在某些浏览器中...
- `File`: 文件上传控件，使用 `<input type="file">`。 - `Hidden`: 隐藏字段，使用 `<input type="hidden">`。 - `Submit`: 提交按钮，使用 `<input type="submit">`。 - `Reset`: 重置按钮，使用 `<input type=...
<input name=haha type=button value="本周第一天" onclick=alert(getWeekFirstDay(0))><br /> <br><input name=haha type=button value="本周第七天" onclick=alert(getWeekLastDay(0))><br /> <br><input name=...
<td><input type="file"/><br/></td></tr> ``` - **`type="file"`**：表示这是一个文件上传输入框。 #### 3.10 电话号码输入框 ```html <tr><td>绰룺</td> <td><input type="tel" pattern="[0-9]{11}"/><br/></td...
2.input元素：<input/> 主要属性：name type value class type： text submit button radio checkbox hidden reset file password 3.文本框/密码框：<input type="text"/> <input type="password...
<input type="FILE" name="FILE1" size="30"> </div></td> </tr> <tr> <td><div align="center">2、 <input type="FILE" name="FILE2" size="30"> </div></td> </tr> <tr> <td><div align="center">3、 ...
当用户通过`<input type="file">`选择文件后，`change`事件会被触发。我们需要在这个事件的回调函数中处理图片预览。 ```javascript document.getElementById('imageUpload').addEventListener('change', function...