Как справиться с ошибкой при загрузке браузера S3 через POST

Question

Я новичок на S3. Пытаясь поймать ошибки в S3 http://docs.aws.amazon.com/AmazonS3/2006-03-01/API/ErrorResponses.html

Мой пример кода:

{"expiration": "2007-12-01T12:00:00.000Z", 
    "conditions": [ 
    {"bucket": "johnsmith"}, 
    ["starts-with", "$key", ""], 
    {"acl": "private"}, 
    {"success_action_redirect": "http://johnsmith.s3.amazonaws.com/successful_upload.html"}, 
    ["eq", "$Content-Type", "application/msword,application/pdf"], 
    ["content-length-range", 2048, 20971520 ] 
    ] 
}'; 



<form action="http://johnsmith.s3.amazonaws.com/" method="post" enctype="multipart/form-data"> 
<input type="hidden" name="key" value="${filename}" /><br /> 
<input type="hidden" name="acl" value="private" /> 
<input type="hidden" name="success_action_redirect" value="http://johnsmith.s3.amazonaws.com/successful_upload.html" > 
<input type="hidden" name="AWSAccessKeyId " value="15B4D3461F177624206A" /> 
<input type="hidden" name="Policy" value="eyAiZXhwaXJhdGlvbiI6ICIyMDA3LTEyLTAxVDEyOjAwOjAwLjAwMFoiLAogICJjb25kaXRpb25zIjogWwogICAgeyJidWNrZXQiOiAiam9obnNtaXRoIiB9LAogICAgWyJzdGFydHMtd2l0aCIsICIka2V5IiwgInVzZXIvZXJpYy8iXSwKICAgIHsiYWNsIjogInB1YmxpYy1yZWFkIiB9LAogICAgeyJyZWRpcmVjdCI6ICJodHRwOi8vam9obnNtaXRoLnMzLmFtYXpvbmF3cy5jb20vc3VjY2Vzc2Z1bF91cGxvYWQuaHRtbCIgfSwKICAgIFsic3RhcnRzLXdpdGgiLCAiJENvbnRlbnQtVHlwZSIsICJpbWFnZS8iXSwKICAgIHsieC1hbXotbWV0YS11dWlkIjogIjE0MzY1MTIzNjUxMjc0In0sCiAgICBbInN0YXJ0cy13aXRoIiwgIiR4LWFtei1tZXRhLXRhZyIsICIiXSwKICBdCn0K" /> 
<input type="hidden" name="Signature" value="2qCp0odXe7A9IYyUVqn0w2adtCA=" /> 
File: <input type="file" name="file" /> <br /> 
<input type="submit" name="submit" value="Upload to Amazon S3" /> 
</form> 

Хотите поймать ошибку, если файл не удалось загрузить или просрочена. Чтобы проверить тип содержимого, диапазон длины содержимого.

Получение правильной переменной обратного вызова, например, ведро, ключ, etag.

Благодаря

Answer 1

EDIT: Мой первоначальный ответ использовали плавающие фреймы, но я, наконец, получил XMLHttpRequest работать, который я думаю, что это уборщик подход.

У меня была та же проблема. Мои требования были:

• Я не хочу использовать вспышку
• Я не хочу, чтобы пользователь видел АМС об ошибке XML

Есть много решений, разбросанные по всему интернету , Я получил его на работу в двух версиях:

1. Использование IFrame для отображения результата POST и пытается получить доступ к закачанный файл (в моем случае, изображение), чтобы проверить, если загрузка работала или нет: https://gist.github.com/joaoffcosta/5728483

2. Использование XMLHttpRequest для выполнения запроса и обрабатывать прогресс, завершение и преждевременный выход из строя: https://gist.github.com/joaoffcosta/5729398 (лучшее решение ИМО)

в обоих растворах, у наш S3 Bucket должен позволять «всем» загружать/удалять. Кроме того, для решения XMLHttpRequest требуется настроить CORS на вашем ковше. Чтобы сделать это, вы должны пойти в ведре «Разрешения», нажмите кнопку «Добавить CORS Конфигурация» и добавить что-то вроде этого:

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
    <CORSRule> 
     <AllowedOrigin>http://your_website_or_localhost_server/</AllowedOrigin> 
     <AllowedMethod>POST</AllowedMethod> 
     <MaxAgeSeconds>3000</MaxAgeSeconds> 
     <ExposeHeader>x-amz-server-side-encryption</ExposeHeader> 
     <ExposeHeader>x-amz-request-id</ExposeHeader> 
     <ExposeHeader>x-amz-id-2</ExposeHeader> 
     <AllowedHeader>*</AllowedHeader> 
    </CORSRule> 
</CORSConfiguration> 

Answer 2

с помощью простой формы Ajax пост ...

<script> 
    function uploadFile() { 
    var file_name = $('#form1 :input[name="file"]').val().split('\\').pop(); 
    if(!file_name || file_name.length === 0) { 
     alert('please choose file') 
     return false; 
    } 

    $.ajax({ 
     url: "/getS3FormData.php", 
     cache: false, 
     type: 'GET', 
     data: {file_name : file_name} , 
     async: false, 
     success: function (response) { 
     var s3 = JSON.parse(response); 
     handleFileUpload(s3); 
     }, 
     error: function (error) { 
     alert("Upload FAILED :-(Retry."); 
     } 
    }); 
    } 


function handleFileUpload(s3) { 
    var fd = new FormData(); 
    fd.append('key', s3.key); 
    fd.append('AWSAccessKeyId', s3.AWSAccessKeyId); 
    fd.append('acl', s3.acl); 
    fd.append('policy', s3.policy); 
    fd.append('signature', s3.signature); 
    fd.append('Content-Type', s3.content_type); 

    var file = $('#form1').find('input[name=file]')[0].files[0];  
    fd.append("file", file); 

    window.onbeforeunload = function() { 
    return "Upload in progress"; 
    } 

    $.ajax({ 
    url: s3.url, 
    data: fd, 
    cache: false, 
    contentType: false, 
    processData: false, 
    type: 'POST', 
    success: function(data){ 
     window.onbeforeunload = null; 
     window.location.href = s3.success_action_redirect; 
    }, 
    error: function(error) { 
     window.onbeforeunload = null; 
     alert('Upload Failed, Please try again'); 
    } 
    }); 
} 

HTML форма

<form id="form1" method="post" enctype="multipart/form-data"> 
    <input type="file" name="file"></input> 
    <input type="submit" onclick="uploadFile(); return false;" value="Upload"> 
    </form>