Aws pre-signed URLs 上传文件，带进度显示

注意：YourUrl，就是获取 pre-signed URLs的地址

<input type="file" id="selector" multiple>
<button onclick="upload()">Upload</button>

<div id="status">No uploads</div>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">

 function upload() {
   [$(‘#selector‘)[0].files].forEach(fileObj => {
     var file = fileObj[0]
     // 从服务器获取一个URL
     retrieveNewURL(file, url => {
       // 上传文件到服务器
       uploadFile(file, url)
     })
   })
 }

 // 发请求到Node.js server获取上传URL。
 function retrieveNewURL(file, cb) {
   $.get(`YourUrl?name=${file.name}`, (url) => {
     cb(url)
   })
 }

 // 使用XMLHttpRequest来上传文件到S3。
 function uploadFile(file, url) {
     var xhr = new XMLHttpRequest ()

     // 加载进度条
     xhr.upload.onprogress = function (e) {
         // For uploads
         if (e.lengthComputable) {
             console.log(e.loaded / e.total);
             $(‘#status‘).text(‘上传进度：‘ + ((e.loaded / e.total)*100).toFixed(2) + ‘%‘);
         }
     };
     xhr.open(‘PUT‘, url, true)
     xhr.send(file)

     xhr.onload = () => {
       if (xhr.status == 200) {
         $(‘#status‘).text(`${file.name} 上传成功。`)
       }
     }
 }

</script>

原文地址：https://www.cnblogs.com/codeaaa/p/10594233.html