如何在不调用服务器的情况下，从用户上传的文件（不考虑文件类型）动态创建可下载链接？

Question

HTML：

<input id="browse" type="file" multiple>
<div id="preview"></div>

JavaScript：

var elBrowse = document.getElementById("browse");
var elPreview = document.getElementById("preview");

function readFile(file) {
    //Create downloadable link and generate DOM elements.
    var fileName = file.name;
    elPreview.insertAdjacentHTML("beforeend", "<a>" + fileName + '</a>');
    elPreview.insertAdjacentHTML("beforeend", "<a>Delete</a><br>");
}

elBrowse.addEventListener("change", function () {
    var files = this.files;

    // Check for `files` (FileList) support and if contains at least one file:
    if (files && files[0]) {

        // Iterate over every File object in the FileList array
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            readFile(file);
        }
    }

});

我面临着一个新的需求，但是我在JavaScript方面没有太多的经验。基本上，我希望用户能够通过点击浏览按钮上传文件，并显示文件名与可下载链接。用户可以上传任何类型的文件，并可以下载文件回来。

整个过程不能触发后端服务器，所有事情都必须在javascript或jQuery中完成。有谁能帮忙吗？谢谢.

系统和用户交互：

>

用户上载文件

系统将文件保存在javascript中，并显示文件名和可下载链接。

用户删除它。

系统将其从DOM和javascript中删除

用户可以重复步骤1-4。整个过程根本不触发服务器。

最终，用户通过单击其他地方将所有文件提交到服务器（此步骤不在本文的讨论范围内）

Answer 1

如果您使用的是现代浏览器，那么您可以使用HTML5文件读取器。我用过它，但在这里发现了一个更适合你的问题的例子。

您可以使用FileReader读取客户端上的文件，并将其存储在sessionStorage、localStorage中，甚至是一个变量中。但需要注意的是，您可能会耗尽RAM，因为JavaScript的设计并不是真正用于在RAM中保留大blob。

null

window.onload = function() {
		var fileInput = document.getElementById('fileInput');
		var fileDisplayArea = document.getElementById('fileDisplayArea');

		fileInput.addEventListener('change', function(e) {
			var file = fileInput.files[0];
			var textType = /text.*/;

			if (file.type.match(textType)) {
				var reader = new FileReader();

				reader.onload = function(e) {
					fileDisplayArea.innerText = reader.result;
				}

				reader.readAsText(file);	
			} else {
				fileDisplayArea.innerText = "File not supported!"
			}
		});
}

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 100%;
  background: #333;
}

#page-wrapper {
  width: 600px;
  background: #FFF;
  padding: 1em;
  margin: 1em auto;
  min-height: 300px;
  border-top: 5px solid #69c773;
  box-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

h1 {
	margin-top: 0;
}

img {
  max-width: 100%;
}

#fileDisplayArea {
  margin-top: 2em;
  width: 100%;
  overflow-x: auto;
}

<div id="page-wrapper">

		<h1>Text File Reader</h1>
		<div>
			Select a text file: 
			<input type="file" id="fileInput">
		</div>
		<pre id="fileDisplayArea"><pre>

	</div>