iframe实现无刷新上传文件

无刷新上传文件

由于无法实现Ajax方式的文件上传，但又想实现类似的文件上传成功之后有提示的效果，或者form的submit提交保存之后有提示信息的，可以借助一些手段实现类似的无刷新并有提示信息的效果。这里采用的是iframe的方式，原理就是输出一段js代码到 iframe中，然后在iframe中来控制它的父页面

HTML代码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>无刷新上传文件</title>
        <style type="text/css">
            .file {
                position: relative;
                display: inline-block;
                background: #D0EEFF;
                border: 1px solid #99D3F5;
                border-radius: 4px;
                padding: 4px 12px;
                overflow: hidden;
                color: #1E88C7;
                text-decoration: none;
                text-indent: 0;
                line-height: 20px;
            }
            .file input {
                position: absolute;
                font-size: 100px;
                right: 0;
                top: 0;
                opacity: 0;
            }
            .file:hover {
                background: #AADFFD;
                border-color: #78C3F3;
                color: #004974;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
    	<form action="save.php" method="post" enctype="multipart/form-data"
    		target="iframe_upload">
            <input type="hidden" name="callback" value="jsoncallback" />
            <a href="javascript:void(0);" class="file">选择文件
                <input type="file" value="上传" name="file" accept="image/*"/>
            </a>
            <div>
                <input type="submit" value="上传"/>
            </div>
        </form>
        <iframe name="iframe_upload" style="visibility:hidden;"></iframe>
    </body>
    <script type="text/javascript">
        window.jsoncallback=function(data){
            var code = data.result_code;
            if(code==1){
                window.location.href = data.url ? data.url : window.location.href;
            }else{
               alert(data.result_msg);
            }
        }
    </script>
</html>

注意：

form的target设为iframe的name属性值，即iframe_upload
添加hidden的input的标签，可以自定义回调函数名称
添加隐藏的iframe，name属性值与form的target必须保持一致
添加js代码实现信息提示

后台代码（PHP为例）

<?php
$jsoncallback = $_POST['callback'];
if ($_FILES["file"]["error"] > 0) {
	response_post('0', $_FILES["file"]["error"], $jsoncallback);
}else{
	if(move_uploaded_file($_FILES['file']['tmp_name'], '/tmp/'.$_FILES['file']['name'])){
		response_post('0', '文件保存成功!', $jsoncallback);
	}else{
		response_post('0', '文件保存失败!', $jsoncallback);
	}
}

function response_post($msgcode, $message, $jsoncallback, $url=""){
	$output="";
	$output .= '<script>';
	$output .= ( 'top.' . $jsoncallback . '('
		.json_encode(array('result_code' => $msgcode, 'result_msg' => $message, 'server_time'=>time(), 'url'=>$url))
		.');');
	$output .= '</script>';
	echo $output;
}