在firefox下使用js清空file控件的value非常简单, 即:obj.value=""; 就可以了,但在ie下,由于出于安全等方面考虑,file的value被设为了只读,所以js对其不能直接地控制,因此我们只能使用一些变通的方法来解 决,网上对此也有好些方法,在此我谈谈自己认为最好的几种。
下面以上传文件格式限制(只对扩展名判断)这一实例来说明。
1、file控件由HTML生成
<!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=utf-8" />
<script>
function CheckUpLoadFile(obj) {
DenyExt = "exe|cmd|jsp|php|asp|aspx|html|htm";
var FileExt = "";
FileExt = obj.value.substr(obj.value.lastIndexOf(".") + 1).toLowerCase();
if (DenyExt.indexOf(FileExt) != -1) {
alert("You can't upload the file of the types:" + DenyExt);
if (!window.addEventListener) {
//IE 关键代码在这里!!!
//方法一(此方法最佳!):
obj.outerHTML+='';
//方法二:
// var newObj= obj.cloneNode(true);
// newObj.value=''; // 设置新控件value为空
// obj.parentNode.replaceChild(newObj, obj);
} else {
//非IE
obj.value = "";
return false;
}
}
}
</script>
<title>无标题文档</title>
</head>
<body>
<span id="attachments_span">
<input type="file" name="myfile" onchange="CheckUpLoadFile(this);">
</span>
</body>
</html>
2、file控件由JS动态生成
<!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=utf-8" />
<script>
function addUploadField(name, parentId) {
var f = document.createElement("input");
f.type = "file";
f.name = name;
if (window.addEventListener) { // Mozilla, Netscape, Firefox
f.addEventListener("change", function() {
CheckUpLoadFile(f, parentId);
}, false);
} else { // IE
f.attachEvent('onchange', function() {
CheckUpLoadFile(f, parentId);
});
}
f.size = 30;
p = document.getElementById(parentId);
p.appendChild(document.createElement("br"));
p.appendChild(f);
}
function CheckUpLoadFile(obj) {
DenyExt = "exe|cmd|jsp|php|asp|aspx|html|htm";
if (obj.value == "") {
return false;
}
var FileExt = "";
FileExt = obj.value.substr(obj.value.lastIndexOf(".") + 1).toLowerCase();
if (DenyExt.indexOf(FileExt) != -1) {
alert("You can't upload the file of the types:" + DenyExt);
if (!window.addEventListener) {
//IE 关键代码在这里!!!
obj.select();
document.execCommand('Delete');
obj.blur();
//obj.outerHTML+=''; 此方法虽然很安全,但可惜在此不能使用
return false;
} else {
//非IE
obj.value = "";
return false;
}
}
}
</script>
<title>无标题文档</title>
</head>
<body>
<span id="attachments_span">
<input type="button" name="add" onclick="addUploadField('myFile' ,'attachments_span');" value="Add" />
</span>
</body>
</html>
file.select();
document.execCommand('Delete');
其他的方法会或多或少的引发一些其他的副作用!
比如:重写innerHTML方法,会引起,再此file域上的事件失效!
调用activex控件会遇到安全性问题!
我写的这个方法最简单,最好用!
///上传图片
function imageShow(e)
{
if(getFileType(e.value))
{
if(getFileSize(e.value))
{
var imageId="image"+e.id;
//IE
if (!window.addEventListener)
{
document.getElementById(imageId).src=e.value;
}
else //非IE
{
document.getElementById(imageId).src=e.files.item(0).getAsDataURL();
}
}
}
else
{
if (!window.addEventListener)
{
e.outerHTML+='';
}
else
{
//非IE
e.value = "";
return false;
}
}
}
//判断上传图片的大小
function getFileSize(filePath)
{
var image=new Image();
image.dynsrc=filePath;
if(image.fileSize<5*1024*1024)
{
return true;
}
if(image.fileSize==undefined)
{
return true;
}
return false;
}
//判断上传图片类型
function getFileType(filePath)
{
var type=(filePath.substr(filePath.lastIndexOf("."))).toLowerCase();
if(type!=".jpg" && type!=".gif" && type!=".jpeg" && type!=".png" && type!=".bmp")
{
alert("您上传图片的类型不符合(.jpg|.jpeg|.gif|.png)!");
return false;
}
return true;
}
来自:http://hi.baidu.com/zhifeng_mo/blog/item/096544bd5e90a20419d81f3b.html
分享到:
相关推荐
解决用js清空file选中图片内容不好完成的烦恼,非常好用
在本文将为大家介绍喜下如何使用jquery 清空file域并做到兼容个浏览器,感兴趣的朋友可以参考下
cookie.js: 一个简单,轻量级的JavaScript API,用于处理浏览器cookie,它易于使用,具有合理的占用空间(~3kb)(gzip:1.73kb),并且没有依赖关系。
本文实例讲述了javascript清空table表格的方法。分享给大家供大家参考。具体如下: 1. 通常方法 循环table的rows,然后一个一个删除。 这个方法是通常的方法,可行,但是效率不好。 2. 另一个方法 var artTable = ...
精彩编程与编程技巧-软件工程篇-清空集合内容的几种方法 ...
各大浏览器清空缓存的步骤方法,已整理成文档,供下载使用。
清空表单标签js
有这么一种情况,就是中文字符占两个字符长度或者更多,而javascript的length属性是按一位计算的,需要自己写函数
第1个方法是大多人传统做法,替换HTML代码,楼上的已经用到了,我不过是用... [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 一打开就给FILE域默认值的方法 input file赋初值–Test by 编程浪子 (调到ActiveX)
本篇文章是对使用JS清空File控件的路径值的方法进行了详细的分析介绍,需要的朋友参考下
清除win7资源浏览器 浏览文件记录
自己总结的file上传数据的一些小经验,给大家分享下,希望对大家有帮助
在.net 中点击清空按钮可以清空dropdownlist里面值得方法
本文实例讲述了JavaScript清空数组元素的两种方法简单比较。分享给大家供大家参考。具体分析如下: JavaScript中数组清空有多种方法: var arr = [1, 2, 3]; arr = [];//方法一 arr.length = 0;//方法二 arr = null...
候鸟浏览器cookie号导入导出清空视频教程
js 实现 上传控件内容清空! 值得下载看看!资源免费,大家分享!!