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;