前端数据请求方式上传oss案例

<!DOCTYPE html> 
<html>
<head>
<script type="text/javascript" src="./functions.js"></script>
</head>
<body>
<script type="text/javascript">

var userName;  
var passWord;  
var xmlHttpRequest;  

//XmlHttpRequest对象  
function createXmlHttpRequest(){  
    if(window.ActiveXObject){ //如果是IE浏览器  
        return new ActiveXObject("Microsoft.XMLHTTP");  
    }else if(window.XMLHttpRequest){ //非IE浏览器  
        return new XMLHttpRequest();  
    }  
}  
    var POLICY_JSON = {"expiration": "2020-12-01T12:00:00.000Z",
            "conditions": [
            ["starts-with", "$key", ""],
            {"bucket": 'quixmart-oss'},
            ["starts-with", "$Content-Type", ""],
            ["content-length-range", 0, 524288000]
            ]
          };
    var secret = 'slx98VOtlpkN8fQH67cKg7n8GpTJyo';
    var policyBase64 = Base64.encode(JSON.stringify(POLICY_JSON));
    console.log(policyBase64)
    var signature = b64_hmac_sha1(secret, policyBase64);
    console.log(signature);

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';
    }
  }
  function uploadComplete(evt) {
    /* This event is raised when the server send back a response */
    alert("Done - " + evt.target.responseText );
  }
  function uploadFailed(evt) {
    alert("There was an error attempting to upload the file." + evt);
  }
  function uploadCanceled(evt) {
    alert("The upload has been canceled by the user or the browser dropped the connection.");
  }
    function uploadFile() {
        var file = document.getElementById('file').files[0];
        var fd = new FormData();
        var key = "events/" + (new Date).getTime() + '-' + file.name;
        fd.append('key', key);
        fd.append('Content-Type', file.type);      
        fd.append('OSSAccessKeyId', 'LTAIBb9nFpfkmENq');
        fd.append('policy', policyBase64)
        fd.append('signature', signature);
        fd.append("file",file);
        var xhr = createXmlHttpRequest()
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("abort", uploadCanceled, false);

        xhr.open('POST', 'http://quixmart-oss.oss-cn-shenzhen.aliyuncs.com', true); //MUST BE LAST LINE BEFORE YOU SEND 
        xhr.send(fd);
      }
</script>
<form id="form1" enctype="multipart/form-data" method="post">
<div class="row">
  <label for="file">Select a File to Upload</label><br />
  <input type="file" name="file" id="file" onchange="uploadFile()"/>
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
  <input type="button" onclick="uploadFile()" value="Upload" />
</div>
<div id="progressNumber"></div>

</body>
</html>
lcgyh / myDocs

前端数据请求方式上传oss案例 #42
