Ajax_iframe文件上传
2015-02-01 12:00
js 无法实现
文件的上传几种伪装
- iframe伪装，jquery.uploaded-file
- swf插件
- html5
前两种只是一种模拟无刷新的效果
第一种：Iframe实现文件上传
IframeFileUp.php：
<?php if(empty($_FILES)){ exit('no file'); } $error = $_FILES['pic']['error']==0 ?'文件上传成功' : '文件上传失败'; //上传成功 echo "<script>parent.document.getElementsByTagName('h2')[0].innerHTML = '$error'</script>"; ?> |
IframeFileUp.html：
<html> <head> <title>iframe文件上传</title> <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript"> /*分析： 1.捕捉表单提交的动作 2.创建一个iframe 3。把表单的target指向该iframe 4.去掉这个iframe */ function ajaxup(){ //创建一个iframe并追加到body下面 var ifname='up'+Math.random(); $('<iframe name="' +ifname + '" width="0" height="0" frameBorder="0" ></iframe>').appendTo($('body')); //把表单target修改指向iframe $('form:first').attr('target',ifname); //return false; } </script> <style type="text/css"> p{border:1px solid gray;}; </style> </head> <body> <h1>iframe模拟Ajax文件上传效果</h1> <h2></h2> <form action="IframeFileUp.php" method="post" enctype="multipart/form-data" onsubmit="return ajaxup();"> <p><input type="file" name="pic" /></p> <p><input type="submit" value="提交"/></p> </form> </body> </html> |
2015-02-02
//增加加载图片效果，告诉用户正在上传
修改上面的script代码，html如下
<html> <head> <title>iframe文件上传</title> <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript"> /*分析： 1.捕捉表单提交的动作 2.创建一个iframe 3。把表单的target指向该iframe 4.去掉这个iframe */ function ajaxup(){ //创建一个iframe并追加到body下面 var ifname='up'+Math.random(); $('<iframe name="' +ifname + '" width="0" height="0" frameBorder="0" ></iframe>').appendTo($('body')); //把表单target修改指向iframe $('form:first').attr('target',ifname); //加入进度条图片 $('#progress').html('<img src="./load.gif" />'); //return false; } </script> <style type="text/css"> p{border:1px solid gray;}; </style> </head> <body> <h1>iframe模拟Ajax文件上传效果</h1> <h2></h2> <div id="progress"></div> <form action="IframeFileUp.php" method="post" enctype="multipart/form-data" onsubmit="return ajaxup();"> <p><input type="file" name="pic" /></p> <p><input type="submit" value="提交"/></p> </form> </body> </html> |
php代码如下：
<?php if(empty($_FILES)){ exit('no file'); } $error = $_FILES['pic']['error']==0 ?'文件上传成功' : '文件上传失败'; //上传成功 //sleep(3); //cho "<script>parent.document.getElementsByTagName('h2')[0].innerHTML = '$error'</script>"; echo "<script>parent.document.getElementById('progress').innerHTML = '<h2>$error</h2>'</script>";
?> |
