심재운 블로그

728x90
반응형


먼저 CORS 환경을 아래와 같이 설정해 줍니다.  그리고 나서 사용이 가능합니다.

http://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html

Configuring CORS

Before the browser script can access the Amazon S3 bucket, you must first set up its CORS configuration as follows.

Copy
<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>PUT</AllowedMethod> <AllowedMethod>DELETE</AllowedMethod> <AllowedMethod>HEAD</AllowedMethod> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="/Scripts/jquery-1.10.2.js"></script>
    <script src="http://sdk.amazonaws.com/js/aws-sdk-2.1.24.min.js"></script>

    <script type="text/javascript">

        AWS.config.update({

            accessKeyId: '',
            secretAccessKey: ''

        });

        AWS.config.region = 'ap-northeast-2';
    </script>
    <script>

        $(function () {
            $("#fileUploadForm").submit(function () {
                
                var bucket = new AWS.S3({ params: { Bucket: 'bucketname' } });
                var fileChooser = document.getElementById('file');
                var file = fileChooser.files[0];

                if (file) {
                    var params = {
                        Key: file.name,
                        ContentType: file.type,
                        Body: file,
                        ACL: 'public-read' // 접근 권한
                    };

                    bucket.putObject(params, function (err, data) {
                        // 업로드 성공
                    });

                    //bucket.putObject(params).on('httpUploadProgress',
                    //    function (evt) {
                    //        console.log("Uploaded :: " + parseInt((evt.loaded * 100) / evt.total) + '%');
                    //    }).send(function (err, data) {
                    //        alert("File uploaded successfully.");
                    //    });
                } return false;
            });
        });
    </script>
</head>
<body>
    <form id="fileUploadForm" method="post" enctype="multipart/form-data">
        <input type="file" name="file" id="file" value="dataFile" required="">
        <input type="submit" value="Go" />
    </form>
</body>
</html>


728x90
반응형
TAG : ,

이 글을 공유합시다

facebook twitter kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드