Amazon s3 如何为S3使用Plupload HTML4上传？

我正在尝试让Plupload的html4运行时与S3一起工作。不幸的是，它必须是plupload的一个非常旧的版本，或者没有正确的文档记录，并且没有实时工作的示例或源代码下载

因此，我将我的Plupload/Flash运行时的工作版本带到S3，简单地将html4运行时替换为Flash，并添加了

'success\u action\u redirect'：

（我从Plupload论坛上了解到，Plupload需要这样才能知道文件上传何时完成）。我发现它确实有效，但有些脚本确实失败了

这是我的源代码

PHP:

<?php
$bucket = 'MyBucket';
$accessKeyId = 'MyKey';
$secret = 'MySecret';

// Policy Setup
if (!function_exists('hash_hmac')) : function hash_hmac($algo, $data, $key, $raw_output = false){
    $blocksize = 64;
    if (strlen($key) > $blocksize)
        $key = pack('H*', $algo($key));

    $key = str_pad($key, $blocksize, chr(0x00));
    $ipad = str_repeat(chr(0x36), $blocksize);
    $opad = str_repeat(chr(0x5c), $blocksize);
    $hmac = pack('H*', $algo(($key^$opad) . pack('H*', $algo(($key^$ipad) . $data))));

    return $raw_output ? $hmac : bin2hex($hmac);
}
endif;
// prepare policy
$policy = base64_encode(json_encode(array(
    'expiration' => date('Y-m-d\TH:i:s.000\Z', strtotime('+1 day')),  
    'conditions' => array(
        array('bucket' => $bucket),
        array('acl' => 'authenticated-read'),
        array('success_action_redirect' => 'http://mydomain.com/ThisCanBeAnyPage.php'),
        array('starts-with', '$key', ''),
        array('success_action_status' => '201'),
        array('starts-with', '$name', ''),  
        array('starts-with', '$Filename', ''), 
    )
)));
// Sign Policy
$signature = base64_encode(hash_hmac('sha1', $policy, $secret, true));
?>

<script type="text/javascript" src="js/plupload.full.js"></script>
<script type="text/javascript" src="js/plupload.html4.js"></script>
<script type="text/javascript">
// Custom example logic
$(function() {
    var uploader = new plupload.Uploader({
        preinit : {
            UploadFile: function(up, file) {
        // When file is loaded, directory on S3 is set here.
                up.settings.multipart_params.key = 'myFolder/'+file.name;
            }
        },
        runtimes : 'html4',
        browse_button : 'pickfiles',
        container : 'container',
        url : 'http://<?php echo $bucket; ?>.s3.amazonaws.com/',
        max_file_size : '300mb',
        multipart: true,
        multipart_params: {
            'key': '${filename}', // use filename as a key
            'success_action_redirect':'http://mydomain.com/ThisCanBeAnyPage.php',
            'Filename': '${filename}', // adding this to keep consistency across the runtimes
            'acl': 'authenticated-read',
            'success_action_status': '201',
            'AWSAccessKeyId' : '<?php echo $accessKeyId; ?>',       
            'policy': '<?php echo $policy; ?>',
            'signature': '<?php echo $signature; ?>'
        },
        file_data_name: 'file',
        multiple_queues: true,
        filters : [
            {title : "Image Files", extensions : "jpg,jpeg"},
        ],
        flash_swf_url : 'js/plupload.flash.swf',
        silverlight_xap_url : 'js/plupload.silverlight.xap'
    });

    uploader.bind('Init', function(up, params) {
        //$('#filelist').html("<div>Current runtime: " + params.runtime + "</div>");
    });

    $('#uploadfiles').click(function(e) {
        uploader.start();
        e.preventDefault();
    });

    uploader.bind('FilesAdded', function(up, files) {
        $.each(files, function(i, file) {
        // file.name seems to be the only thing that is returned so file.size is displayed as 'N/A'
            $('#filelist').append(
                '<div class="Section" id="'+file.id+'">'
                    +file.name+' ('+plupload.formatSize(file.size)+')&nbsp;&nbsp;<b>'
                    +'</b><div class="PlupLoadingBarWrap"><div class="PlupLoadingBar"></div></div>'
                +'</div>'
            );
        });
        up.refresh(); // Reposition Flash/Silverlight
    });

    uploader.bind('UploadProgress', function(up, file) {
        // file.name seems to be the only thing that is returned
        // This triggers when file is complete before 'FileUploaded' and not during upload process.
    });

    uploader.bind('Error', function(up, err) {
        // Haven't received an error to know if this works.
        $('#filelist').append("<div>Error: " + err.code +
            ", Message: " + err.message +
            (err.file ? ", File: " + err.file.name : "") +
            "</div>"
        );

        up.refresh(); // Reposition Flash/Silverlight
    });

    uploader.bind('FileUploaded', function(up, file) {
        // file.name seems to be the only thing that is returned
        // This does trigger once file is completely loaded
    });

    uploader.bind('UploadComplete', function(up, files){
        // Calls a function
    });

    uploader.init();
});
</script>

<h3>Custom example</h3>
<div id="container">
    <div id="filelist">No runtime found.</div>
    <br />
    <a id="pickfiles" href="#">[Select files]</a>
    <a id="uploadfiles" href="#">[Upload files]</a>
</div>

Javascript:

<?php
$bucket = 'MyBucket';
$accessKeyId = 'MyKey';
$secret = 'MySecret';

// Policy Setup
if (!function_exists('hash_hmac')) : function hash_hmac($algo, $data, $key, $raw_output = false){
    $blocksize = 64;
    if (strlen($key) > $blocksize)
        $key = pack('H*', $algo($key));

    $key = str_pad($key, $blocksize, chr(0x00));
    $ipad = str_repeat(chr(0x36), $blocksize);
    $opad = str_repeat(chr(0x5c), $blocksize);
    $hmac = pack('H*', $algo(($key^$opad) . pack('H*', $algo(($key^$ipad) . $data))));

    return $raw_output ? $hmac : bin2hex($hmac);
}
endif;
// prepare policy
$policy = base64_encode(json_encode(array(
    'expiration' => date('Y-m-d\TH:i:s.000\Z', strtotime('+1 day')),  
    'conditions' => array(
        array('bucket' => $bucket),
        array('acl' => 'authenticated-read'),
        array('success_action_redirect' => 'http://mydomain.com/ThisCanBeAnyPage.php'),
        array('starts-with', '$key', ''),
        array('success_action_status' => '201'),
        array('starts-with', '$name', ''),  
        array('starts-with', '$Filename', ''), 
    )
)));
// Sign Policy
$signature = base64_encode(hash_hmac('sha1', $policy, $secret, true));
?>

<script type="text/javascript" src="js/plupload.full.js"></script>
<script type="text/javascript" src="js/plupload.html4.js"></script>
<script type="text/javascript">
// Custom example logic
$(function() {
    var uploader = new plupload.Uploader({
        preinit : {
            UploadFile: function(up, file) {
        // When file is loaded, directory on S3 is set here.
                up.settings.multipart_params.key = 'myFolder/'+file.name;
            }
        },
        runtimes : 'html4',
        browse_button : 'pickfiles',
        container : 'container',
        url : 'http://<?php echo $bucket; ?>.s3.amazonaws.com/',
        max_file_size : '300mb',
        multipart: true,
        multipart_params: {
            'key': '${filename}', // use filename as a key
            'success_action_redirect':'http://mydomain.com/ThisCanBeAnyPage.php',
            'Filename': '${filename}', // adding this to keep consistency across the runtimes
            'acl': 'authenticated-read',
            'success_action_status': '201',
            'AWSAccessKeyId' : '<?php echo $accessKeyId; ?>',       
            'policy': '<?php echo $policy; ?>',
            'signature': '<?php echo $signature; ?>'
        },
        file_data_name: 'file',
        multiple_queues: true,
        filters : [
            {title : "Image Files", extensions : "jpg,jpeg"},
        ],
        flash_swf_url : 'js/plupload.flash.swf',
        silverlight_xap_url : 'js/plupload.silverlight.xap'
    });

    uploader.bind('Init', function(up, params) {
        //$('#filelist').html("<div>Current runtime: " + params.runtime + "</div>");
    });

    $('#uploadfiles').click(function(e) {
        uploader.start();
        e.preventDefault();
    });

    uploader.bind('FilesAdded', function(up, files) {
        $.each(files, function(i, file) {
        // file.name seems to be the only thing that is returned so file.size is displayed as 'N/A'
            $('#filelist').append(
                '<div class="Section" id="'+file.id+'">'
                    +file.name+' ('+plupload.formatSize(file.size)+')&nbsp;&nbsp;<b>'
                    +'</b><div class="PlupLoadingBarWrap"><div class="PlupLoadingBar"></div></div>'
                +'</div>'
            );
        });
        up.refresh(); // Reposition Flash/Silverlight
    });

    uploader.bind('UploadProgress', function(up, file) {
        // file.name seems to be the only thing that is returned
        // This triggers when file is complete before 'FileUploaded' and not during upload process.
    });

    uploader.bind('Error', function(up, err) {
        // Haven't received an error to know if this works.
        $('#filelist').append("<div>Error: " + err.code +
            ", Message: " + err.message +
            (err.file ? ", File: " + err.file.name : "") +
            "</div>"
        );

        up.refresh(); // Reposition Flash/Silverlight
    });

    uploader.bind('FileUploaded', function(up, file) {
        // file.name seems to be the only thing that is returned
        // This does trigger once file is completely loaded
    });

    uploader.bind('UploadComplete', function(up, files){
        // Calls a function
    });

    uploader.init();
});
</script>

<h3>Custom example</h3>
<div id="container">
    <div id="filelist">No runtime found.</div>
    <br />
    <a id="pickfiles" href="#">[Select files]</a>
    <a id="uploadfiles" href="#">[Upload files]</a>
</div>

//自定义示例逻辑
$（函数（）{
var uploader=新的plupload.uploader({
预初始化：{
上传文件：函数（向上，文件）{
//加载文件时，S3上的目录设置在此处。
up.settings.multipart_params.key='myFolder/'+file.name；
}
},
运行时：“html4”，
浏览按钮：“pickfiles”，
容器：'容器'，
网址：'http://.s3.amazonaws.com/',
最大文件大小：“300mb”，
多部分：正确，
多部分参数：{
'key'：'${filename}'，//将filename用作键
“成功\u操作\u重定向”：http://mydomain.com/ThisCanBeAnyPage.php',
'Filename'：'${Filename}'，//添加此项以保持运行时的一致性
'acl'：'authenticated read'，
“成功行动状态”：“201”，
“AWSAccessKeyId”：“，
“政策”：“，
“签名”：”
},
文件\数据\名称：“文件”，
多个_队列：正确，
过滤器：[
{标题：“图像文件”，扩展名：“jpg，jpeg”}，
],
flash_swf_url:'js/plupload.flash.swf'，
silverlight_xap_url:'js/plupload.silverlight.xap'
});
uploader.bind（'Init'，函数（up，params）{
//$（'#filelist'）.html（“当前运行时：+params.runtime+”）；
});
$（“#上载文件”）。单击（函数（e）{
uploader.start（）；
e、 预防默认值（）；
});
uploader.bind（'FilesAdded'，函数（up，files）{
$.each（文件、函数（i、文件）{
//file.name似乎是唯一返回的内容，因此file.size显示为“N/A”
$（'#文件列表'）。追加(
''
+file.name+'（'+plupload.formatSize（file.size）+'）”
+''
+''
);
});
up.refresh（）；//重新定位Flash/Silverlight
});
uploader.bind（'UploadProgress'，函数（up，file）{
//file.name似乎是唯一返回的内容
//当文件在“FileUpload”之前完成，而不是在上载过程中完成时，会触发此操作。
});
uploader.bind（'Error'，函数（up，err）{
//尚未收到错误以了解此功能是否有效。
$（“#文件列表”）.append（“错误：+err.code+
，消息：“+err.Message”+
（err.file？”，文件：“+err.file.name:”）+
""
);
up.refresh（）；//重新定位Flash/Silverlight
});
uploader.bind（'fileupload'，函数（up，file）{
//file.name似乎是唯一返回的内容
//一旦文件完全加载，就会触发此操作
});
uploader.bind（'UploadComplete'，函数（up，files）{
//调用函数
});
uploader.init（）；
});

HTML:

<?php
$bucket = 'MyBucket';
$accessKeyId = 'MyKey';
$secret = 'MySecret';

// Policy Setup
if (!function_exists('hash_hmac')) : function hash_hmac($algo, $data, $key, $raw_output = false){
    $blocksize = 64;
    if (strlen($key) > $blocksize)
        $key = pack('H*', $algo($key));

    $key = str_pad($key, $blocksize, chr(0x00));
    $ipad = str_repeat(chr(0x36), $blocksize);
    $opad = str_repeat(chr(0x5c), $blocksize);
    $hmac = pack('H*', $algo(($key^$opad) . pack('H*', $algo(($key^$ipad) . $data))));

    return $raw_output ? $hmac : bin2hex($hmac);
}
endif;
// prepare policy
$policy = base64_encode(json_encode(array(
    'expiration' => date('Y-m-d\TH:i:s.000\Z', strtotime('+1 day')),  
    'conditions' => array(
        array('bucket' => $bucket),
        array('acl' => 'authenticated-read'),
        array('success_action_redirect' => 'http://mydomain.com/ThisCanBeAnyPage.php'),
        array('starts-with', '$key', ''),
        array('success_action_status' => '201'),
        array('starts-with', '$name', ''),  
        array('starts-with', '$Filename', ''), 
    )
)));
// Sign Policy
$signature = base64_encode(hash_hmac('sha1', $policy, $secret, true));
?>

<script type="text/javascript" src="js/plupload.full.js"></script>
<script type="text/javascript" src="js/plupload.html4.js"></script>
<script type="text/javascript">
// Custom example logic
$(function() {
    var uploader = new plupload.Uploader({
        preinit : {
            UploadFile: function(up, file) {
        // When file is loaded, directory on S3 is set here.
                up.settings.multipart_params.key = 'myFolder/'+file.name;
            }
        },
        runtimes : 'html4',
        browse_button : 'pickfiles',
        container : 'container',
        url : 'http://<?php echo $bucket; ?>.s3.amazonaws.com/',
        max_file_size : '300mb',
        multipart: true,
        multipart_params: {
            'key': '${filename}', // use filename as a key
            'success_action_redirect':'http://mydomain.com/ThisCanBeAnyPage.php',
            'Filename': '${filename}', // adding this to keep consistency across the runtimes
            'acl': 'authenticated-read',
            'success_action_status': '201',
            'AWSAccessKeyId' : '<?php echo $accessKeyId; ?>',       
            'policy': '<?php echo $policy; ?>',
            'signature': '<?php echo $signature; ?>'
        },
        file_data_name: 'file',
        multiple_queues: true,
        filters : [
            {title : "Image Files", extensions : "jpg,jpeg"},
        ],
        flash_swf_url : 'js/plupload.flash.swf',
        silverlight_xap_url : 'js/plupload.silverlight.xap'
    });

    uploader.bind('Init', function(up, params) {
        //$('#filelist').html("<div>Current runtime: " + params.runtime + "</div>");
    });

    $('#uploadfiles').click(function(e) {
        uploader.start();
        e.preventDefault();
    });

    uploader.bind('FilesAdded', function(up, files) {
        $.each(files, function(i, file) {
        // file.name seems to be the only thing that is returned so file.size is displayed as 'N/A'
            $('#filelist').append(
                '<div class="Section" id="'+file.id+'">'
                    +file.name+' ('+plupload.formatSize(file.size)+')&nbsp;&nbsp;<b>'
                    +'</b><div class="PlupLoadingBarWrap"><div class="PlupLoadingBar"></div></div>'
                +'</div>'
            );
        });
        up.refresh(); // Reposition Flash/Silverlight
    });

    uploader.bind('UploadProgress', function(up, file) {
        // file.name seems to be the only thing that is returned
        // This triggers when file is complete before 'FileUploaded' and not during upload process.
    });

    uploader.bind('Error', function(up, err) {
        // Haven't received an error to know if this works.
        $('#filelist').append("<div>Error: " + err.code +
            ", Message: " + err.message +
            (err.file ? ", File: " + err.file.name : "") +
            "</div>"
        );

        up.refresh(); // Reposition Flash/Silverlight
    });

    uploader.bind('FileUploaded', function(up, file) {
        // file.name seems to be the only thing that is returned
        // This does trigger once file is completely loaded
    });

    uploader.bind('UploadComplete', function(up, files){
        // Calls a function
    });

    uploader.init();
});
</script>

<h3>Custom example</h3>
<div id="container">
    <div id="filelist">No runtime found.</div>
    <br />
    <a id="pickfiles" href="#">[Select files]</a>
    <a id="uploadfiles" href="#">[Upload files]</a>
</div>

自定义示例
找不到运行时。

总之，这个脚本确实有效，但缺少file.size，根据我所能找到的，没有进度指示。我想知道是否有一个plupload html4脚本包含了这里缺少的东西。我有一个解决办法，我还没有测试。但我会随时更新

简单的答案是否定的

HTML4本身不支持任何这些功能

但是，如果您使用提交功能，就可以做到这一点。基本上，您需要在客户机上设计自己的分块，使用post提交分块，并控制分块的数量以生成进度条。这在理论上很简单，但在实践中却很丑陋。为什么可以使用闪光灯或silverlight注射剂