1. label for 绑定元素响应事件，例如 点击label可以执行绑定的input 的button的事件，
<label for="large_icon_url" class="btn_up file-up-btn">上传大图标</label> <input type="file" accept="image/*" class="input_f pics" maxnums="1" name="large_icon_url" id="large_icon_url">
label实现了好看的效果，但是由于ie安全限制问题，会拒绝非file浏览上传文件的访问，所以处理方法应该是让file附在lable的上面，然后是透明处理，直接点击file即可。
2. 转上传文件的隐藏处理：
IE input file隐藏不能上传文件解决方法
又是IE的一个问题，近来是跟IE浏览器磕上了，这个问题发现不少人也遇到过，实在蛋疼。但今天这个不能算是一个bug，因为IE可能是从安全角度上考虑结果导致的。一步步来解读。
普通上传例子
首先普通的文件上传呢，很简单，前端代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>file标签隐藏</title>
</head>
<body>
<input onchange="document.forms[0].submit();" type="file" name="file" />
</form>
</body>
</html>
|
upload.php代码：
|
1
2
3
|
echo '<pre>';
print_r($_FILES["file"]);
echo '</pre>';
|
其实就是打印获取到的文件信息。我们测试一下，选择文件后，提交到PHP页面结果如下：
Array
(
[name] => 7.jpg
[type] => image/jpeg
[tmp_name] => /tmp/php0VkjPG
[error] => 0
[size] => 36297
)
能正确获取文件信息，只需要cp下就能保存。
用别的按钮替代file标签
但是默file标签很难看，而且每个浏览器下都有很大差距。因此我们基本都把真正的file标签给隐藏，然后创建一个标签来替代它，比如我们创建一个a标签来替代它，隐藏file标签，单击a标签时触发file标签click弹出选择文件窗口。最终页面代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>file标签隐藏</title>
</head>
<body>
<form action="http://192.168.1.99/upload/upload.php" method="post" enctype="multipart/form-data" style="display:none;">
<input onchange="document.forms[0].submit();" type="file" name="file" />
</form>
<a onclick="document.forms[0].file.click();" href="javascript:void(0);" >上传文件</a>
</body>
</html>
|
页面上就只看见a标签
点击“上传文件”弹开选择文件的窗口
选择文件后，正确传送文件信息到服务器
这样就完成文件上传了，这个操作在Chrome，FireFox下都正常，IE下有问题。
IE不能上传文件
IE下也能正常弹开选择文件的窗口
但选择文件后，却不能上传，同时还报一个“拒绝访问”错误，如截图中红圈部分
解决IE下不能上传文件的问题
其实这是IE安全限制问题，没有点击file的浏览按钮选择文件都不让上传，既然IE非得要亲自点击，我们可以变通一下，让自定义按钮存在又能真正点击到file标签。解决方案是让file标签盖在a标签上，但file是透明的，这样用户看到的是a标签的外观，实际点击是file标签。如图：
最终页面代码如下：
|
1
2
3
4
5
|
<a style="position:relative;display:block;width:100px;height:30px;background:#EEE;border:1px solid #999;text-align:center;" href="javascript:void(0);" >上传文件
<input style="position:absolute;left:0;top:0;width:100%;height:100%;z-index:999;opacity:0;" onchange="document.forms[0].submit();" type="file" name="file" />
</form>
</a>
|
页面：
需要注意几个问题
1、取消a标签onclick事件，因为实际上已经不需要a标签的onclick触发file的click了，而是直接就点击到file；
2、file标签不需要再设置display:none隐藏，而是通过opacity:0让它完全透明，实际它是浮在a标签之上
3、file标签设置position:absolute后要给left:0、top:0，否则file标签不会吻合覆盖a标签导致点击按钮的时候点不到file标签
我们再来测试一下：
点击按钮：
选择文件：
上传成功！
相关推荐
因此，许多场景下，使用 swfupload.js 来代替原生的 file input 表单元素。 二、HTML5 中的 input type=file 文件选择表单元素 随着 HTML5 的出现，原生的 file input 表单元素迎来了新的升级。HTML5 中的 input ...
如果要让浏览按钮更漂亮一点，我们想定义它的背景颜色，甚至想用...偶然看到一篇文章：input file 文件选择框美化 作者是把系统默认的按钮设置透明度为0，再定义一个label标签样式，来覆盖透明掉的按钮。支持IE6\IE7\FF
<label for="custom-file-input"> 浏览文件"> </label> <input type="file" id="custom-file-input" style="display: none;"> ``` 4. **CSS样式**：为`<label>`元素添加样式，使其看起来像一个按钮，可以设置...
2. 使用`<label>`标签将按钮与`<input type="file">`关联起来，通过`for`属性指定关联的ID。 3. 使用CSS对`<input type="file">`进行样式调整，将其绝对定位并设置`z-index`高于按钮，使其覆盖在按钮之上。这样，...
要改变这个控件的外观，我们不能直接应用CSS到`<input type="file">`，因为浏览器出于安全考虑，限制了对该元素的样式修改。但我们可以利用CSS伪元素、包装元素和其他技巧来实现美化。 1. **隐藏原始上传按钮**：...
先来看看input type=”file”在chrome,ie,firefox这三个浏览器下表情各异吧。 chrome像是button+label组合，看起差异最大。 ff和ie，是text+button的组合，就外形来看，firefox更标准，事实上firefox存在两...
<label for=thumbnail class=col-md-3>缩略图</label> <input type=file class=form-control id=thumbnail name=thumbnail> jquery方式，IE不支持，但IE会获得绝对的上传路径信息： function ...
3. **事件处理**：监听`input[type=file]`的`onchange`事件，当用户选择文件后，通过JavaScript将文本框的值设置为`input[type=file]`的值，这样用户就能看到所选文件的名称。 下面是`jquery.fileEveryWhere.js`...
<label for="confirmPassword">Confirm Password:</label> <input type="password" id="confirmPassword" name="confirmPassword" required> <label for="gender">Gender:</label> <option value="male">...
而HtmlInputFile控件和Request.Files方法在不同的浏览器下表现不同：例如，在IE8下获取的是客户端上传文件的完全限定名（包括路径），而在谷歌或苹果浏览器中则仅获取文件名（不带路径）。 2. FileUpload控件具有...
*New: 1.Login (and Password) label can be in a separate row from the input text box. 2.Login Confirmation is available by option. 3.Add ValidatorStyle for LoginID and Password validators. 4.Can...
This could be used for what i used it for in the past for a news program<END><br>28 , url.zip Worldwide list of URL extensions by country<END><br>29 , EmailChk.zip This Application checks for ...
<label class="col-md-2 control-label" for="file">上传文件：</label> <input id="file" type="file" name="file" value=""></input> ``` 多选框（`checkbox`）和单选按钮（`radio`）则使用`<input type=...
jQuery 对象访问 each(callback)each(callback) 以每一个匹配的元素作为上下文来执行一个函数。 意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。 ...
<input id="file" type="file" onchange="preivew(this, document.getElementById('img'));"> ``` - **`<div>` 标签**：用于包裹整个预览功能的容器。 - **`<input>` 标签**：定义了一个文件输入控件，用户可以...
<input class="layui-input" type="file" name="file" onchange="fileChange(this);"/> <div class="layui-input-block"> <input type="button" class="layui-btn" value="上传" onclick="upload()"/> ...
<label for="saddr">起点</label> <input type="text" name="saddr"/> <input type="hidden" name="daddr" value="3505th Ave New York, NY 10018 (Empire State Building)"/> <input type="submit" value="Get ...
1 , vb5dialog.zip This demonstrates how to subclass the Common Dialog Dialogs and manipulate a specific Dialog.<END><br>2 , cpnl.zip Form_Taskbar is a control for Visual Basic which, once placed...
4. HTML与ASP.NET服务器控件对应关系：对应HyperLink控件、对应Panel控件、对应Image控件、<input type=radio>对应RadioButton控件、对应DropDownList控件、对应Label控件。 5. ASP.NET验证控件：CompareValidator...