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;
}
});
คะแนนขอบคุณจากสมาชิก
รอสักครู่....
bamossza
พลังงานการช่วยเหลือ
( Level 3 )
( 16 )
ตอบกระทู้ ( 112 )
เขียนบทความ ( 28 )
Test program : JSFiddle Demo