文件异步上传方式(一)

用页面内嵌iframe方式

表单页：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>iframe upload</title>
    </head>
    <body>
        <iframe style="display:none;" src="blank.html" name="upTrans"></iframe>
        <!-- target为本页iframe，异步上传 -->
        <!-- enctype="multipart/form-data" -->
        <!-- method必须为post -->
        <form action="uploadFile.php" target="upTrans" enctype="multipart/form-data" method="POST">
            <input type="file" name="file" id="inputFile"><span class="tip"></span>
            <br>
            <input type="submit" value="确定">
        </form>
        <script type="text/javascript">
            function uploadHandler(data){
                console.log(data);
            }
        </script>
    </body>
</html>

上传文件处理uploadFile.php

<?php
    $filename = "file";
    $result = array(
        "status" => -1,
        "msg" => "",
    );

    if($_FILES[$filename]["size"] < 20 * 1024 * 1024){
        if ($_FILES[$filename]["error"] > 0) {
            $result['msg'] = "上传失败。Error: " . $_FILES[$filename]["error"];
            $result['status'] = -1;
        } else {
            if (file_exists("upload/" . $_FILES[$filename]["name"])) {
                $result['status'] = -1;
                $result['msg'] = "上传失败，文件已存在";
            } else {
                // upload 路径为当前php文件的相对路径
                move_uploaded_file($_FILES[$filename]["tmp_name"], "upload/" . $_FILES[$filename]["name"]);
                $result['status'] = 1;
                $result['msg'] = "上传成功";
            }
        }
    } else {
        $result['status'] = -2;
        $result['msg'] = "上传文件超过20M";
    }
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>uploadTrans</title>
    </head>
    <body>
        <script type="text/javascript">
            if(window.parent.uploadHandler){
                window.parent.uploadHandler(<?php echo json_encode($result)?>);
            }
        </script>
    </body>
</html>

原理：

1. 设表单target为iframe。即在隐藏的iframe中加载uploadFile.php

2. uploadFile.php输入内容。有用的就是js部分。调用父页面的全局方法uploadHandler，传入上传结果信息

注意点：

1. 表单加属性enctype="multipart/form-data"，method必须为post。

2. 父页面有全局方法uploadHandler，处理php的返回结果

3. php处理中，将上传的文件从临时文件夹move到另一个有写权限的文件夹中，不然会被清除

4. 可用$_FILES[$filename]["size"]对上传文件进行大小限制，可用$_FILES[$filename]["type"]对上传文件进行类型过滤

posted @ 2013-11-14 11:58  xngeer  阅读(1340)  评论(0)    收藏  举报