最近一直在研究使用AJAX技术上传文件,也找了网上的一些源码,发现基本上都是使用iframe模拟实现的。
其实AJAX是无法实现上传文件的,那么我们该怎么实现既能不刷新当前页面,又能在用户上传文档完毕之后通知用户文件已经上传成功呢?
我们知道,在一个表单中,有一个target属性,我们只要将表单的target属性设置为页面中的一个隐藏的iframe即可,在后台文件处理页面中我们可以判断当文件上传成功以后执行主页面的一个函数来达到通知用户文件已上传的功能。
下面我简单的写一下示例代码,本示采用PHP来完成,当然,你也可以替换成你自己熟悉的一种编程语言。
首先是主页面。index.html
<
html
>
< head >
< script language ="javascript" type ="text/javascript" >
function notice() {//通知用户文件上传成功
alert("文件上传成功!");
}
</script>
</head>
< body >
< form target ="fileUp" method ="POST" action ="file.php" >
选择上传的文件 < input type ="file" name ="fileUpLoad" />
< input type ="submit" value ="上传" />
</form>
< iframe width ="0px" height ="0px" name ="fileUp" > </iframe>
</body>
</html>
< head >
< script language ="javascript" type ="text/javascript" >
function notice() {//通知用户文件上传成功
alert("文件上传成功!");
}
</script>
</head>
< body >
< form target ="fileUp" method ="POST" action ="file.php" >
选择上传的文件 < input type ="file" name ="fileUpLoad" />
< input type ="submit" value ="上传" />
</form>
< iframe width ="0px" height ="0px" name ="fileUp" > </iframe>
</body>
</html>
接下来是后台文件处理页面file.php
<?php
$path = "C:\temp\";//设置上传路径为C:\temp
if(iswritable($path)) {//目录可写
if($_FILES["fileUp"]["tmp_name"] != "none") {
copy($_FILES["fileUp"]["tmp_name"],$path."aaa.dat");
unlink($_FILES["fileUp"]["tmp_name"]);
echo " < script >parent.notice(); </script>";
}
}
?>
$path = "C:\temp\";//设置上传路径为C:\temp
if(iswritable($path)) {//目录可写
if($_FILES["fileUp"]["tmp_name"] != "none") {
copy($_FILES["fileUp"]["tmp_name"],$path."aaa.dat");
unlink($_FILES["fileUp"]["tmp_name"]);
echo " < script >parent.notice(); </script>";
}
}
?>
转载于:https://blog.51cto.com/seanli888/179000