411   1 วิธีแก้เมื่อไม่สามารถ Download file ที่เป็น BLOB URL บน IE11



bamossza


พลังงานการช่วยเหลือ
( Level 3 )


คะแนนขอบคุณจากสมาชิก
( 15 )


ตอบกระทู้ ( 97 )
เขียนบทความ ( 27 )

Download a blob from HTTP URL in IE 11

URL.createObjectURL() function doesn't work in IE 11

ตัวอย่างการเขียนโปรแกรม Upload และ Download File แบบ Blob Support IE11 and other Browser

Step 1:  insert <head> tag 

<link rel="stylesheet" href="/static/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>


Step 2:  insert <body> tag 

<div class="container">
  <div class="row">
    <div class="col-md-12">
    <form id="form-test-bmz" method="post" enctype="multipart/form-data">
      <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" name="fileUpload" id="fileUpload">
      </div>
      <a href="#" class="hidden" id="filedownload" download="#">loadF</a>
      <button type="button" class="btn btn-success" id="btnAttachFile">
        <span class="glyphicon glyphicon-save" aria-hidden="true"></span> 
        Upload File
      </button>
    </form>
    </div>
    <hr>
    <div class="col-md-12">
      <table class="table table-bordered" id="table-file-upload">
        <thead>
          <th class="text-center">File name</th>
          <th class="text-center">File size</th>
          <th class="text-center">Download</th>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>
</div>


Step 3:  insert before </body> tag 

$(document).ready(function(){

	$('button#btnAttachFile').on('click', function() {

		if($('input#fileUpload').val() == ''){
	      alert('Please choose a file.');
	      return false;
	    }

	    let fileUpload = $('input#fileUpload');
	    let fileName = fileUpload[0].files[0].name;
	    let fileSize = fileUpload[0].files[0].size;

	    fileSize = Math.ceil(fileSize/1024);

	    $('table#table-file-upload').find('tbody').empty();

	    var rowTr = $('<tr>'
	        +'<td class="text-left">'+fileName+'</td>'
	        +'<td class="text-center">'+fileSize+' KB</td>'
	        +'<td class="text-center"><a href="" id="clickLoadFile"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span></a></td>'
	        +'</tr>');
	        
	    rowTr.find('a#clickLoadFile').on('click', function(e) {
			btnAttachFileDownload();
			e.preventDefault();
	    });
	    $('table#table-file-upload').find('tbody').append(rowTr);
	});

	function btnAttachFileDownload() {
				
		var fileName = fileUpload[0].files[0].name;
		var fileSize = fileUpload[0].files[0].size;
		
		var reader = new FileReader();
		reader.readAsDataURL(fileUpload[0].files[0]);
		reader.onload = function () {
			var blob = global.b64toBlob(reader.result);
			if(window.navigator.msSaveOrOpenBlob) {
				// IE 11
				window.navigator.msSaveOrOpenBlob(blob, fileName);
			} else {
				// Google chome, Firefox, ....
				var url = (window.URL || window.webkitURL).createObjectURL(blob);
				$('#filedownload').attr('download', fileName);  
	            $('#filedownload').attr('href', url);  
	            $('#filedownload')[0].click();
	        }
	   };
	   reader.onerror = function (error) {
		   console.log('Error: ' + error);
	   };
	};

	function b64toBlob(base64, sliceSize) {
		sliceSize = sliceSize || 512;
	    var block = base64.split(";");
		var contentType = block[0].split(":")[1];
		var b64Data = block[1].split(",")[1];
		contentType = contentType || '';
	    var byteCharacters = atob(b64Data);
	    var byteArrays = [];
	    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
	        var slice = byteCharacters.slice(offset, offset + sliceSize);
	        var byteNumbers = new Array(slice.length);
	        for (var i = 0; i < slice.length; i++) {
	            byteNumbers[i] = slice.charCodeAt(i);
	        }
	        var byteArray = new Uint8Array(byteNumbers);
	        byteArrays.push(byteArray);
	    }
		var blob = new Blob(byteArrays, {type: contentType});
		return blob;
	}
});
ความคิดเห็นที่ 1
อ้างอิงความเห็น


bamossza


พลังงานการช่วยเหลือ
( Level 3 )


คะแนนขอบคุณจากสมาชิก
( 15 )


ตอบกระทู้ ( 97 )
เขียนบทความ ( 27 )

Test program : JSFiddle Demo

แสดงความเห็น

อัพโหลดรูปภาพ..คลิก *** เพื่อความปลอดภัยในด้านสิทธิ ไม่อนุญาติให้นำลิ้งรูปภาพจากที่อื่นมาแปะ ถ้าพบเจอ ลบกระทู้ ทันที ***

Back to Top