分析异步上传文件的原理 ajaxUploadFile

如何异步上传文件呢？

通过 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 均通过测试