php+iframe实现无刷新上传文件例子

2024-09-04 11:45:10

字体：大中小

来源：转载

供稿：网友

上传文件用得最多的是ajax了,现在这里我们可以使用iframe 模仿了,下面php粉丝网小伙伴就来为各位同学整理一个frame实现无刷新上传文件例子,希望能帮助到各位朋友哦,使用label的for属性来取代js的event转移,解决IE下“SCRIPT5:拒绝访问”的问题.

html代码如下:

<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title></title>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script>

// 当前上传对象

var _current    = null;

// 上传回调方法

function onUploadSuccess(info){

    // 控制台调试，可能是因为console没定义导致IE无法使用此功能

    typeof console.dir!=='undefined' && console.dir(info);

    // 上传成功

    if(typeof info.status!=='undefined' && typeof info.path!=='undefined' && info.status==1 && info.path!=''){

        // 改变图片src，实现实时预览

        if(_current.find('img').size()>0)

            _current.find('img:eq(0)').prop('src', info.path);

        else

            _current.html('<img src="'+info.path+'" width="100%" height="100%" />');

        // 返回

        return;

    }

    // 上传失败则提示错误信息

    alert(info.info);

    // 返回

    return;

}

$(function(){

    $('label[for]').click(function(){

        _current    = $(this);

        $('.uploadform')[0].reset();

    });  //开源软件:Vevb.com

    $('.uploadform input:file').change(function(){

        $(this).parent().submit();

    });

});

</script>

</head>

<body>

<label for="photo1" style="border:1px solid #CCC; padding:2px; width:120px; height:80px; display:block;"></label>

<label for="photo1" style="border:1px solid #CCC; padding:2px; width:120px; height:80px; display:block;"></label>

<form style="display:none;" class="uploadform" action="{:U('upload?callback=window.parent.onUploadSuccess')}" method="post" enctype="multipart/form-data" target="uploadiframe">

    <input type="file" name="photo1" id="photo1" />

    <iframe style="display:none;" name="uploadiframe"></iframe>

</form>

</body>

</html>

php处理程序,代码如下:

$retval = array('status'=>0, 'info'=>'', 'path'=>'');

if(/*upload success*/){

    $retval['status'] = 1;

    $retval['path'] = 'somepath';

}else{

    $retval['info'] = 'someerror';

}

echo "<script>{$_GET['callback']}(".json_encode($retval).");</script>";

exit;