2

我有一个要上传到 Amazon S3 的有效 HTML POST 表单：

<form action="https://bucketcwav.s3.amazonaws.com/" method="post" enctype="multipart/form-data">
  <input id="s3Name" type="hidden" name="key" value="images/${filename}">
  <input type="hidden" name="AWSAccessKeyId" value="%accesskey%">
  <input type="hidden" name="acl" value="public-read">
  <input type="hidden" name="success_action_redirect" value="http://www.mydomain.com/PHP/imageloadsuccess.php">
  <input type="hidden" name="policy" value="%policy%" />
  <input type="hidden" name="signature" value="%signature%" />
  <input id="mimetype" type="hidden" name="Content-Type" value="image/jpeg">
  <!-- Include any additional input fields here -->

  File to upload to S3: 
  <input id="fileinput" name="file" type="file" accept="image/*">
  <br> 
  <input type="submit" value="Upload File to S3"> 
</form>

上传成功后，调用http://www.mydomain.com/PHP/imageloadsuccess.php 。

现在我尝试将我的代码更改为使用 XMLHTTPRequest，因为我需要调整一些 javascript 图像大小：

<body>
<div class="form" id="form">
      File to upload to S3: 
      <input id="fileinput" name="file" type="file" accept="image/*"><span id="progress"></span>
    </form> 

    </div>
</body>
<script type="text/javascript">
if (window.File && window.FileReader && window.FileList && window.Blob) {
    document.getElementById('fileinput').onchange = function(event){
        var file = event.target.files[0]; // The files selected by the user (as a FileList object entry).
        event.target.files[0] = resizeAndUpload(event.target.files[0]);
        };
} else {
        alert('You are using an outdated browser. To get a better site experience, please update your browser to the latest version.');
}

//from http://www.codeforest.net/html5-image-upload-resize-and-crop
function resizeAndUpload(file) {
var reader = new FileReader();
    reader.onloadend = function() {

    var tempImg = new Image();
    tempImg.src = reader.result;
    tempImg.onload = function() {

        var MAX_WIDTH = 1024;
        var MAX_HEIGHT = 768;
        var tempW = tempImg.width;
        var tempH = tempImg.height;
        if (tempW > tempH) {
            if (tempW > MAX_WIDTH) {
               tempH *= MAX_WIDTH / tempW;
               tempW = MAX_WIDTH;
            }
        } else {
            if (tempH > MAX_HEIGHT) {
               tempW *= MAX_HEIGHT / tempH;
               tempH = MAX_HEIGHT;
            }
        }

        var canvas = document.createElement('canvas');
        canvas.width = tempW;
        canvas.height = tempH;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0, tempW, tempH);

        // from http://alipman88.github.io/debt/about/index.html
        var dataURL = canvas.toDataURL("image/jpeg", 0.9);
        var blob = dataURItoBlob(dataURL);
        var fd = new FormData();

        fd.append("key", "images/"+Math.floor((Math.random()+1)*1000000000000000)+".jpg");
        fd.append("AWSAccessKeyId", "%Accesskey%");
        fd.append("acl", "public-read");
        fd.append("success_action_redirect", "http://www.mydomain.com/PHP/imageloadsuccess.php");       
        fd.append("policy", "%policy%");
        fd.append("signature", "%signature%");
        fd.append("Content-Type", "image/jpeg");
        fd.append("file", blob);
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "https://%bucket%.s3.amazonaws.com/");
        xhr.send(fd);
      }
   }
   reader.readAsDataURL(file);
}

//helperfunctions
    //from https://gist.github.com/kosso/4246840
    function dataURItoBlob(dataURI) {
        var binary = atob(dataURI.split(',')[1]);
        var array = [];
        for(var i = 0; i < binary.length; i++) {
            array.push(binary.charCodeAt(i));
        }
    return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
}

// from http://stackoverflow.com/questions/11240127/uploading-image-to-amazon-s3-with-html-javascript-jquery-with-ajax-request-n
function uploadProgress(evt) {
    if (evt.lengthComputable) {
      var percentComplete = Math.round(evt.loaded * 100 / evt.total);
      document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
    }
    else {
      document.getElementById('progressNumber').innerHTML = 'unable to compute';
    }
  }

</script>

上传同样成功，只是 Chrome 给了我一个错误

XMLHttpRequest 无法加载http://www.mydomain.com/PHP/imageloadsuccess.php?bucket=bucket&k …=images%2F1028249253286048.jpg&etag=%226ca24feebab0daf48ffea90d16370868%22。无法从 null 发出任何请求。

在 FF 中，此代码不会给我错误，但也不会加载 imageloadsuccess.php。我对编程很陌生，所以我可能在这里看不到非常简单的东西，非常感谢任何帮助或替代 POST 方法

更新 1：也许这与它有关：https ://src.chromium.org/viewvc/blink?revision=155002&view=revision

更新 2：Chrome 控制台确实显示原点为空，根据http://www.w3.org/TR/cors/#redirect-steps是正确的。但它不应该阻止它。这是更新 1 中描述的错误。但也许有人可以告诉我为什么重定向实际上使用 HTML POST 表单加载到屏幕上，而仅在使用 XMLHTTPrequest 时加载到后台？

On POST: 
Request URL:https://%bucket%.s3.amazonaws.com/
Request Headersview parsed
POST https://%bucket%.s3.amazonaws.com/ HTTP/1.1
Referer: http://%mydomain%.com/test2.html
Origin: http://%mydomain%.com
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.14 Safari/537.36

REDIRECT:
Request URL:http://www.%mydomain%.com/PHP/imageloadsuccess.php?bucket=%bucket%&key=images%2F1851413185242563.jpg&etag=%226ca24feebab0daf48ffea90d16370868%22
Request Headersview parsed
GET http://www.%mydomain%.com/PHP/imageloadsuccess.php?bucket=%bucket%&key=images%2F1851413185242563.jpg&etag=%226ca24feebab0daf48ffea90d16370868%22 HTTP/1.1
**Origin: null**
Referer: http://%mydomain%.com/test2.html

更新 3：添加

xhr.onload = function() { console.log(["success", this]) };
xhr.onerror = function() { console.log(["error", this]) };

在 FF 和 Chrome 中显示错误，但两者都实际运行 PHP 文件。所以看起来一切都很好，但我仍然不明白为什么会出现错误。在 iOS6 safari 中，加载轮因为 xhr.send(fd); 而一直旋转。我的 XMLHTTPrequest 一定有问题，但我不知道是什么问题。对不起，大量的文字，希望有人看到问题所在。

4

1 回答 1

2

我认为重定向被阻止是因为您的 PHP 脚本返回的 CORS 标头（它应该以 响应Access-Control-Allow-Origin: null）。

还有一个替代解决方案。您可以在原始 S3 POST 请求中从您的success()处理程序执行单独的 AJAX 请求，而不是使用重定向来通知您的应用程序已上传图像（不要success_action_redirect在原始请求中包含该字段/如果 S3 则 POST 请求成功响应状态码为 200 或 204）。

于 2013-08-23T05:36:00.797 回答