sandbox/blobFileSliceRepro.html at master · dmurph/sandbox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<!--multiple is set to allow multiple files to be selected-->

<input id="myfiles" type="file">
<div id="result">
</div>

</body>

<script>

var pullfiles=function(){
    // love the query selector
    var fileInput = document.querySelector("#myfiles");
    var files = fileInput.files;
    // cache files.length
    var fl=files.length;
    var i=0;

    var file = files[0];
    var result = document.querySelector("#result");
    var size = file.size;
    result.innerHTML += "<p>File " + file.name + " with size " + file.size + "</p>";
    result.innerHTML += "<p>Create a blob with that file, with \'blobText\' appended.</p>";

    var reader = new FileReader();
	reader.addEventListener("loadend", function() {
	   result.innerHTML += "<p>File: " + reader.result + "</p>";
	});
	reader.readAsText(file);

    var blob = new Blob([file, "blobText"], {type: "text/plain"});

    var newBlob = blob.slice(size / 2, size + 8);
    var reader2 = new FileReader();
	reader2.addEventListener("loadend", function() {
	   result.innerHTML += "<p>Combined result: " + reader2.result + "</p>";
	});
	reader2.readAsText(newBlob);
}

// set the input element onchange to call pullfiles
document.querySelector("#myfiles").onchange=pullfiles;

//a.t
</script>

</html>