样式：
.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
相关推荐
<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" ...
NULL 博文链接：https://axl234.iteye.com/blog/894131
编写html文件在classpath下的static中 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ... 上传文件：<input type="file" name="filename"/> <br/> <input type="submit"/> </form> </body> </html>
注意: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> <...
<option>学生</option><option>一年</option><option>二年</option><option>三年</option><option>三年到五年</option><option>五年到十年</option><option>十年以上</option> </select> </div> ...
<tr> <td><div align="center">Email地址</div></td> <td><div align="left"> <%=email%><%=select%></div></td> </tr> <tr><td><div align="center">登录密码</div></td><td><div align="left"><%=pwd%></div></td>...
<input type="text" name="type"> </td> </tr> <tr> <th> 品牌： </th> <td> <input type="text" name="brand"> </td> </tr> <tr> ...
value="元朝"／>元朝</td></tr><tr><td> </td></tr><tr><td>题目2：</td><td colSpan="3">字母a后边的字母为</td></tr><tr><td></td><td><input type="radio" name="num2" value="c" checked="checked"／>c</td><td>...
<html> <head> <title>My webpage</title> ... <center> Password:<input type="password"></center><br><br> <center><input type="submit" value="Done"></center> </form> </body> </html>
<td><span id="hour">00</span><sub>小时</sub></td> <td><span id="mi">00</span><sub>分</sub></td> <td><span id="s">00</span><sub>秒</sub></td> </tr> </table> <input type="button" value="开始(s)...
<input type="text" name="ReceiverCityZip" /> </label> <hr> <p>shupping category</p> <p> <label> <input type="radio" name="destination" value="domestic-stamp.jpg" /> Domestic</label> </p> <p>...
<td><input type="text" name="id"></td> </tr> <tr> <td>姓名</td> <td><input type="text" name="name"></td> </tr> <tr> <td>性别</td> <td><input type="text" name="sex"></td> </tr> <tr> <td>...
<TD>密 码：<INPUT class=textbox id=txtUserPassword type=password name=txtUserPassword></TD> </TR> <TR height=40> <TD align=center> <INPUT id=btnLogin type=submit value=" 登 录 " name=...
<view class="body" > <view class="libox"> <view class="lidtbox"> <image src="/images/... <input type="button" value="+" /> </view> </view> </view> </view>
<td><input type="text" name="username" /></td> </tr> <tr> <td>密码：</td> <td><input type="password" name="password" /></td> </tr> <tr> <td>角 色：</td> ...
在网页上实现加减乘除功能。... <option value="/">/</option> </select> <input type="number" id="n2"> <input type="button" onclick="aa()" value="="> <input type="text" id="res"> </form>
<td><input type="submit" value="登录" onclick="return checkUserInfo()"/></td> <td><input type="reset" value="重置"/></td> </tr> </table> <div align="right"><a href="register.jsp">新用户注册</a></...
<input type="radio" class="inputgri" name="sex" value="m" checked="checked"/> 女 <input type="radio" class="inputgri" name="sex" value="f"/> </td> </tr> ...
<td width="279"><input type="text" name="uname"></td> <tr> <td><div align="left">密 码：</div></td> <td><input type="password" name="upassword"></td> </tr> <tr> <td ...