Upload a file with $.ajax to AWS S3 with a pre-signed url

转载自：https://gist.github.com/guumaster/9f18204aca2bd6c71a24

生成预签名的Demo文档：https://docs.aws.amazon.com/zh_cn/AmazonS3/latest/dev/PresignedUrlUploadObjectJavaSDK.html

前端写法：

生成签名：（.js）

 var s3 = new AWS.S3({
   accessKeyId: '<YOUR_ACCESS_KEY>',
   secretAccessKey: '<YOUR_SECRET_ACCESS_KEY>'
 });

 var uploadPreSignedUrl = s3.getSignedUrl('putObject', {
     Bucket: '<THE_BUCKET_NAME>',
     Key: '<THE_UPLOADED_FILENAME>',
     ACL: 'authenticated-read',
     // This must match with your ajax contentType parameter
     ContentType: 'binary/octet-stream'

     /* then add all the rest of your parameters to AWS puttObect here */
 });

 var downloadPreSignedUrl = s3.getSignedUrl('getObject', {
     Bucket: '<THE_BUCKET_NAME>',
     Key: '<THE_UPLOADED_FILENAME>',
     /* set a fixed type, or calculate your mime type from the file extension */
     ResponseContentType: 'image/jpeg'
     /* and all the rest of your parameters to AWS getObect here */
 });

 // now you have both urls
 console.log( uploadPreSignedUrl, downloadPreSignedUrl ); 

前端页面：（.html）

 <form id="theForm" method="POST" enctype="multipart/form-data" >
     <input id="theFile" name="file" type="file"/>
     <button id="theButton" type="submit">send 1</button>
 </form>

 After you uploaded the file you can <a href="<YOUR_PRE_SIGNED_DOWNLOAD_URL_HERE>">download it here</a>
 <script src="upload.js"></script>

upload：（.js）

 // Remember to include jQuery somewhere.

 $(function() {

   $('#theForm').on('submit', sendFile);
 });

 function sendFile(e) {
     e.preventDefault();

     // get the reference to the actual file in the input
     var theFormFile = $('#theFile').get()[0].files[0];

     $.ajax({
       type: 'PUT',
       url: "<YOUR_PRE_SIGNED_UPLOAD_URL_HERE>",
       // Content type must much with the parameter you signed your URL with
       contentType: 'binary/octet-stream',
       // this flag is important, if not set, it will try to send data as a form
       processData: false,
       // the actual file is sent raw
       data: theFormFile
     })
     .success(function() {
       alert('File uploaded');
     })
     .error(function() {
       alert('File NOT uploaded');
       console.log( arguments);
     });

     return false;
   });
 }