如何异步上传文件呢？
通过 form 的target 属于，把from提交到iframe里面去
好了，我们来实现一下
HTML页面
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery.js"></script> <script>alert("只出现一次")</script> </head> <body> <form enctype="multipart/form-data" method="post" action="doajaxfileupload.php" > <input type="file" class="input" name="fileToUpload" onchange="ajaxUpload(this);" size="45" > </form> <script type="text/javascript"> function ajaxUpload(self) { //生成一个唯一的ID var frameId = +new Date(); //创建 Iframe， 由于IE的变态 只能这样创建 if(window.ActiveXObject) { var iframe = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />'); }else { var iframe = document.createElement('iframe'); iframe.id = frameId; iframe.name = frameId; } //隐藏 ，不要用display：none iframe.style.position = 'absolute'; iframe.style.top = '-1000px'; iframe.style.left = '-1000px'; $("body").append(iframe) var action = $(self).parent().attr("action"); //创建form 隐藏 ，不要用display：none var form ="<form action='"+action+"' style='position:absolute;top:-1200px;left:-1200px' method='post' name='from_"+frameId+"' id='from_"+frameId+"' enctype='multipart/form-data'></form>"; $("body").append(form); //克隆file类型的无法 克隆其val 所以采用交换的方式 var oldElement = $(self); var newElement = $(oldElement).clone(); $(oldElement).before(newElement); $(oldElement).appendTo($("#from_"+frameId)); //这里注意 target 让form 提交到iframe 里面 $("#from_"+frameId).attr('target',frameId); //提交表单 $("#from_"+frameId).submit(); //获取iframe里的内容 异步请求 可能无法立即返回值 var result = $("iframe").contents().find("body").html(); //若为空 if(!result){ var aa = setInterval(function(){ result = $("iframe").contents().find("body").html(); if(result){ alert(result); eval("var res="+result); $("body").append("<img src='"+res.msg+"' />") clearInterval(aa); } },30) }else{ eval("var res="+result); $("body").append("<img src='"+res.msg+"' />") } } </script> </body> </html>
PHP
1 <?php 2 @move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $_FILES["fileToUpload"]["name"]); 3 $msg = $_FILES['fileToUpload']["name"]; 4 echo '{"msg":"'.$msg.'"}'; 5 //echo json_encode(array("msg"=>$msg)); 6 7 ?>
效果 IE8、FF 均通过测试
