Skip to content

Instantly share code, notes, and snippets.

@ushiboy

ushiboy/index.html

Created June 9, 2014 22:38
Show Gist options
  • Save ushiboy/726284da1ca4b2e63c47 to your computer and use it in GitHub Desktop.
Save ushiboy/726284da1ca4b2e63c47 to your computer and use it in GitHub Desktop.
Download ZIP
blobとcontentTypeの関係
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Blob</title>
</head>
<body>
<input type="file" id="file-field">
<img id="preview" src="" alt="">
<script type="text/javascript">
!function() {
document.getElementById('file-field')
.addEventListener('change', function(evt) {
var file = evt.target.files[0],
originalMimeType = file.type;
console.log(file);
// 元々のcontentTypeを取り除く
// @see https://developer.mozilla.org/en-US/docs/Web/API/Blob.slice
var blob = file.slice(0, file.size, '');
// contentType削ると
// ChromeのDev ToolがResource interpreted as Image but transferred with MIME type text/plain: をはく
//
// document.getElementById('preview').src = URL.createObjectURL(blob);
// contentTypeつけてあげると黙る
document.getElementById('preview').src = URL.createObjectURL(blob.slice(0, blob.size, originalMimeType));
}, false);
}();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment