Ali云OSS行使iframe达成图片异步上传

2019-08-05 18:18栏目:编程学习

阿里云 OSS 图形上传iframe 完结异步上传 相关代码:

 代码如下

index.php:

<?php
$access_id = 'ACCESS_ID';
$access_key = 'OSS_ACCESS_KEY';
$url='
$policy = '{"expiration": "2120-01-01T12:00:00.000Z","conditions":[{"bucket": "ioutsider" },["content-length-range", 0, 104857600]]}';
$policy = base64_encode($policy);
$signature = base64_encode(hash_hmac('sha1', $policy, $access_key, true));//生成认证签字
?>
威尼斯人app,<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div>文本上传</div>
        <form action="<?php echo $url;?>" method="post" enctype="multipart/form-data">
            <label for="file">选拔文件:</label>
            <input type="hidden" name="OSSAccessKeyId" id="OSSAccessKeyId"  value="<?php echo $access_id; ?>" />
            <input type="hidden" name="policy" id="policy"  value='<?php echo $policy; ?>' />
            <input type="hidden" name="signature" id="signature"  value="<?php echo $signature; ?>" />
            <input type="hidden" name="key" id="key"  value="${filename}" />
            <input type="file" name="file" id="file" />
            <br />
            <input type="submit" name="submit" value="确定" />
        </form>
    </body>
</html>

 代码如下

<?php
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
if (isset($_POST) && !empty($_POST)) {
    echo "<pre>";
    var_dump($_POST);
    die;
}
?>

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src=";
    </head>
    <body>
        <h1>增加操作</h1>
        <form action="" method="post" >
            <iframe src="upload.php"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe><br/>
            名称: <input type="text" value="" name="name">
            <div id="res"> </div>
 
            <input type="submit" value="submit" />
        </form>
 
    </body>
</html>

upload.php

 代码如下

<?php
$access_id = '';
$access_key = '';
$policy = '{"expiration": "2120-01-01T12:00:00.000Z","conditions":[{"bucket": "ioutsider" },["content-length-range", 0, 104857600]]}';
$policy = base64_encode($policy);
$signature = base64_encode(hash_hmac('sha1', $policy, $access_key, true));
$file_name = date('Y') . '/' . date('m') . '/' . md5(microtime(true)) . '.jpg';
//print_r(get_headers(''));
?>
 
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src=";
    </head>
    <body>
        <form id="upload" action="" method="POST" enctype="multipart/form-data">
 
            <label for="file">选择文件:</label>
            <input type="hidden" name="OSSAccessKeyId" id="OSSAccessKeyId"  value="<?php echo $access_id; ?>" />
            <input type="hidden" name="policy" id="policy"  value='<?php echo $policy; ?>' />
            <input type="hidden" name="Signature" id="Signature"  value="<?php echo $signature; ?>" />
            <!--<input type="hidden" name="key" id="key"  value="upload/${filename}" />-->
            <input type="hidden" name="key" id="key"  value="<?php echo $file_name; ?>" />
            <input type="hidden" name="success_action_redirect" value=" echo $file_name; ?>" />
            <input type="file" name="file" id="file" />
            <input type="submit" name="upload" value="上传" />
        </form>
    </body>
</html>

上传成功后跳转的页面:

 代码如下

<!DOCTYPE html>
<html>
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src=";
    </head>
    <body>
        <?php $img = $_GET['img']; ?>
        <?php if ($img): ?>
            <img src=' echo $img; ?>' width='200' height='200' />
            <script>
                $(function(){
                    alert('上传成功');
                    window.parent.$('#res').append("<input type='hidden' value='<?php echo $img ?>' name='path'>")
                })
            </script>
        <?php endif; ?>
    </body>
</html>

版权声明:本文由威尼斯人app发布于编程学习,转载请注明出处:Ali云OSS行使iframe达成图片异步上传