JavaScript_Online_File_Reader_Writer/fileReader.html at master · scott1028/JavaScript_Online_File_Reader_Writer · 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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!doctype html>
<html lang="zh-TW">
<head>
	<meta charset="UTF-8">
	<title>展示 JavaScript 線上編輯器, 可讀寫 Client 端文件範例 By Scott</title>
</head>
<body>
	<h3>展示 JavaScript 線上編輯器, 可讀寫 Client 端文件範例</h3>
	<input type="file" id="fileinput" />
	<button id="downloadBtn">下載Div內容</button>
	<!-- Read -->
	<script>
		function readSingleFile(evt) {
			// 在使用者選擇檔案後立即讀取該檔案
			var f = evt.target.files[0];

			if (f) {
				var r = new FileReader();
				r.onload = function(e) {
					var contents = e.target.result;
					try{
						console.log( "Got the file.n"
							+"name: " + f.name + "n"
							+"type: " + f.type + "n"
							+"size: " + f.size + " bytesn"
							+ "starts with: " + contents.substr(1, contents.indexOf("n"))
						);
					}
					catch(e){
						console.log(e);
					}

					// 輸出
					console.log(contents);

					// 輸出
					var div;
					if(!document.getElementById('result')){
						div=document.createElement('div');
						div.id="result"
						div.textContent=contents;
						document.body.appendChild(div);
					}
					else{
						div=document.getElementById('result');
						div.textContent=contents;
					}

					// debugger;
				}

				r.readAsText(f);					// 當作 Safe HTML String 讀取
				// r.readAsArrayBuffer(f);			// 也可以當作 ArrayBuffer 再轉 Blob 提供使用者下載
			}
			else {
				alert("Failed to load file");
			}
		};

		document.getElementById('fileinput').addEventListener('change', readSingleFile, false);
	</script>

	<!-- Download -->
	<script>
		function downloadSingleFile(evt){
			var output=document.getElementById('result').textContent;
			var blob=new Blob([output],{type:'application/x-file-to-save'});			// 讓瀏覽器辨識為可下載的連結, 也可以用 "octet/stream"
			var url=window.URL.createObjectURL(blob);			// 要使用 Blob URL, 需要有 Domain Name

			// debugger;

			// 不需要把這個元素加入 document
			var downloadURL=document.createElement('a');
			downloadURL.href=url;
			downloadURL.download='myFileName.txt';			// 指定下載檔名
			downloadURL.click();
		};

		document.getElementById('downloadBtn').addEventListener('click',downloadSingleFile, false);
	</script>
</body>
</html>