Question

我有一个可用的HTML POST表单上传到Amazon S3：

<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＆amp; 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肯定有问题，但我不知道是什么。对于大量文本感到抱歉，希望有人看到问题所在。

Answer 1

我认为重定向被阻止是因为PHP脚本返回的CORS标头（它应该以{{1}}响应）。

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

HTML POST - ＆gt;重定向工作，XMLHTTPrequest - ＆gt;重定向不起作用（无法从null发出任何请求）？

1 个答案: