阿里云OSS利用iframe实现图片异步上传

阿里云 OSS 图片上传iframe 实现异步上传 相关代码：

index.php:

 代码如下 复制代码

<?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="http://filela.b0.upaiyun.com/js/jquery-1.9.0.min.js"></script>
    </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('http://ioutsider.oss-cn-shenzhen.aliyuncs.com'));
?>
 
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://filela.b0.upaiyun.com/js/jquery-1.9.0.min.js"></script>
    </head>
    <body>
        <form id="upload" action="http://ioutsider.oss-cn-shenzhen.aliyuncs.com" 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="http://iphotos.me/res.php?img=<?php 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="http://filela.b0.upaiyun.com/js/jquery-1.9.0.min.js"></script>
    </head>
    <body>
        <?php $img = $_GET['img']; ?>
        <?php if ($img): ?>
            <img src='http://ioutsider.oss-cn-shenzhen.aliyuncs.com/<?php 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>
时间： 2024-09-19 09:09:31

阿里云OSS利用iframe实现图片异步上传的相关文章

java web-javaweb图片异步上传问题

问题描述 javaweb图片异步上传问题 有一个文章表,和一张图片表,一篇文章对应多张图片,在图片表中维护所属文章的id, 但在JSP中发布新的文章时,图片是异步上传(首先上传)的,等文章发布完成后,更新 图片表的文章id,但是图片上传完成后如果放弃发布文章,怎么删除已上传的图片 解决方案 异步图片上传异步上传图片至服务器对于异步上传图片的感悟 解决方案二: 那你就先别上传,先把本地路径显示出来,用户以为上传了,等到提交文章时候,先上传图片在提交文章表单

手机页面利用canvas压缩图片再上传服务器，谷歌和微信内置浏览器可以华为自带浏览器却不行

问题描述 手机页面利用canvas压缩图片再上传服务器,谷歌和微信内置浏览器可以华为自带浏览器却不行 如题,先利用canvas压缩图片,再通过ajaxFileUpload等把图片传到服务器,canvas.toDataURL(""image/jpeg"" 0.2);明明是jpeg了,在谷歌和微信内置浏览器也可以实现,但是用华为机自带的浏览器测试时,却强制性的变成png,压缩的图片也有很大缺失,变成一大块黑色.求高手指点. 解决方案 查看下 华为浏览器的内核

asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)_jquery

本文实例讲述了asp.net+jquery.form实现图片异步上传的方法.分享给大家供大家参考,具体如下: 首先我们需要做准备工作: jquery 点击此处本站下载. jquery.form.js 点击此处本站下载. 页面JqueryFormTest.aspx: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryFormTest.aspx.cs" Inherits=

[网站搭建] 阿里云虚拟主机搭建及FTP文件上传

        写这篇文章主要有两个原因:一方面是得到了阿里云的一个"开通码",另一方面是最近给学生们上网站制作的课程,想把学生们提交的作业上传到服务器上去,让他们体会一下自己做的东西,提升他们的编程兴趣.虽然只有短暂的4节课,但我很知足,尤其是他们对我的关心和感激.         下面直接讲述配置的过程,希望对你有所帮助,因为自己对这方面接触得比较少,同时阿里云也有非常好的相关文档,但这篇文章主要结合自身进行叙述的.         这个"开通码"主要包括三个功

一分钟了解阿里云产品：弹性Web托管如何上传网站程序

弹性Web托管是阿里云推出的新一代建站主机,基于先进的容器技术架构,资源隔离性好,且具有攻击隔离能力,更稳定.安全,带配套控制面板,管理体验同虚机一样简单.     今天我们来说说弹性Web托管怎样上传网站程序?   上传网站文件分为三步,打包压缩.上传与解压缩,下面我们来具体说明一下详细的操作:   一．将所有需要上传的文件打成压缩包.   1.进入源代码文件夹,将所有的文件和文件夹选中,选择"添加到压缩文件".   这里我要说的是,选中所有文件而非选中上一级的文件夹再打包的好处是,

利用AsyncHttpClient实现图片的上传与下载

图片上传 [java] view plaincopy       /**  * @param path  *            要上传的文件路径  * @param url  *            服务端接收URL  * @throws Exception  */   public static void uploadFile(String path, String url) throws Exception {   File file = new File(path);   if (f

Javascript利用iframe框架实现文件上传

  html  代码如下   <form name="multiform" id="multiform" action="multi-form-submit.php" method="POST" enctype="multipart/form-data">     姓名: <input type="text" name="name"  value=&

Jquery插件之多图片异步上传_jquery

1.初始化上传控件数量. 复制代码 代码如下: $(document).ready(function() { $('#H_File').uploadFile({ key: 'test',count:3 }); }); 以前的设计思想是,初始化上传控件数量,页面显示为1个上传控件,每当上传成功后,在下面创建一个上传控件. 2.上传图片成功后 这就是最终的效果,如果您有更好的插件,希望一起开源. 其他的就不多说了,如果您感兴趣,点击下载源码 /201010/yuanma/jquery_aspnet_

php表单文件iframe异步上传实例讲解

本文实例为大家分享了php表单文件iframe异步上传的具体代码,供大家参考,具体内容如下 1.表单中放置iframe元素: 2.文件上传控件内容变化的时候触发JS设置表单的action为处理文件上传的img_upload_process.php文件,并且将表单的target设置为iframe,让iframe去提交到服务器进行文件上传: 3.img_upload_process.php中处理文件上传成功后,将上传成功保存的文件路径回传给表单中隐藏域: 4.点击表单提交按钮的时,JS设置表单act