- 贴心猫(Imcat)
- 贴心代码
- 详情
jquery如何清空input file文件域的值?jquery能不能获取和设置input file文件域的值?
发布:2015-04-30 08:05
点击997次
评论:0条
jquery如何清空input file文件域的值?jquery能不能获取和设置input file文件域的值?
在网页制作中,input file文件域一般我们都用于上传文件,对于input file文件域选定文件以后,我们能不能读取其中的内容呢?通过下面的方法我们可以获取到其中的内容:
html代码
<form enctype="multipart/form-data" method="post" action="http://www.uedsc.com">
<input id="file" type="file" name="file">
<input id="submit" type="submit" name="submit">
</form>
注意:上传文件的表单必须设置enctype为multipart/form-data类型。
php方法(必须提交给服务器以后才能获取)
if(isset($_POST['submit'])){
print_r($_file['file']);
}
js方法(直接在客户端获取,可能需要高版本的浏览器支持)
function fileSelected() {
var file = document.getElementById('fileToUpload').files[0];
if (file) {
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
}
}
代码来源:http://www.uedsc.com/html5-to-upload-files.html
那么,如何清空input file文件域的值呢?
一般来说,在对一个文件域(input type=”file”)使用了验证后,我们总会希望把文件域中的值给清空了(否则错误的文件仍然会被提交),而在IE中,安全设置的原因,是不允许更改文件域的值的(也就是不能使用val(“”))
那么很显然,我们就只能换个思路,把这个input元素复制一个,然后将原来的删除。
在IE下复制元素的时候,其中的值是不会被复制的,所以就达到了清空文件域的目的了。
而在Firefox下,其中的值也会被一同复制,那么我们就顺便清空一下就做到兼容了。
实现代码如下:
var file = $("#file")
file.after(file.clone().val(""));
file.remove();
最后,我们能不能设置/更改input file文件域的值呢?
答案是不可以,如果可以设置,网站就会很容易攻击客户端。这是不可能的设置成功的。做这个控件的人早已想到这一点。所以就不要去妄想更改input file文件域的值了。