Upload a file with $.ajax to AWS S3 with a pre

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

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

前端写法：

生成签名：（.js）

1 1 var s3 = new AWS.S3({
2 2   accessKeyId: '<YOUR_ACCESS_KEY>',
3 3   secretAccessKey: '<YOUR_SECRET_ACCESS_KEY>'
4 4 });
5 5 
6 6 var uploadPreSignedUrl = s3.getSignedUrl('putObject', {
7 7     Bucket: '<THE_BUCKET_NAME>',
8 8     Key: '<THE_UPLOADED_FILENAME>',
9 9     ACL: 'authenticated-read',
1010     // This must match with your ajax contentType parameter
1111     ContentType: 'binary/octet-stream'
1212 
1313     /* then add all the rest of your parameters to AWS puttObect here */
1414 });
1515 
1616 var downloadPreSignedUrl = s3.getSignedUrl('getObject', {
1717     Bucket: '<THE_BUCKET_NAME>',
1818     Key: '<THE_UPLOADED_FILENAME>',
1919     /* set a fixed type, or calculate your mime type from the file extension */
2020     ResponseContentType: 'image/jpeg'
2121     /* and all the rest of your parameters to AWS getObect here */
2222 });
2323 
2424 // now you have both urls
2525 console.log( uploadPreSignedUrl, downloadPreSignedUrl );

前端页面：（.html）

11 <form id="theForm" method="POST" enctype="multipart/form-data" >
22     <input id="theFile" name="file" type="file"/> 
33     <button id="theButton" type="submit">send 1</button>
44 </form>
55 
66 After you uploaded the file you can <a href="<YOUR_PRE_SIGNED_DOWNLOAD_URL_HERE>">download it here</a>
77 <script src="upload.js"></script>

upload：（.js）

1 1 // Remember to include jQuery somewhere.
2 2 
3 3 $(function() {
4 4 
5 5   $('#theForm').on('submit', sendFile);
6 6 });
7 7 
8 8 function sendFile(e) {
9 9     e.preventDefault();
1010 
1111     // get the reference to the actual file in the input
1212     var theFormFile = $('#theFile').get()[0].files[0];
1313 
1414     $.ajax({
1515       type: 'PUT',
1616       url: "<YOUR_PRE_SIGNED_UPLOAD_URL_HERE>",
1717       // Content type must much with the parameter you signed your URL with
1818       contentType: 'binary/octet-stream',
1919       // this flag is important, if not set, it will try to send data as a form
2020       processData: false,
2121       // the actual file is sent raw
2222       data: theFormFile
2323     })
2424     .success(function() {
2525       alert('File uploaded');
2626     })
2727     .error(function() {
2828       alert('File NOT uploaded');
2929       console.log( arguments);
3030     });
3131 
3232     return false;
3333   });
3434 }