使用粘贴的字符串或文件上传答案

【问题标题】：Using pasted string or file upload使用粘贴的字符串或文件上传
【发布时间】：2016-10-12 05:52:59
【问题描述】：

我有一个网络表单，用户在其中上传一到两个文件。每个文件都可以通过文件输入或将文本粘贴到文本框中来给出。

如何标准化输入，使其以相同的方式发送到服务器，而不管用于输入的方法是什么？我想始终向服务器发送一种类型的数据，可以是带有文件的多部分请求，也可以是带有文件作为字符串的 JSON 请求。怎么样？

现在，我正在尝试使用 FileReader 读取文件，但我对处理异步读取感到困惑。

function getPrimaryFileString() {
    if(pasted()) {
        return document.getElementById("pastedPrimaryInputFile").value;
    } else {
        var reader = new FileReader();
        var file = document.getElementById("primaryInputFile").files[0];
        reader.readAsText(file);

        filestring = reader.contents;

        return filestring;
    }
}

我知道我应该有一个onload 回调，但我不知道我将如何做到这一点并且能够像这样返回文件字符串。

【问题讨论】：

标签： javascript forms file web

【解决方案1】：

因此，对于其他为此苦苦挣扎的人，我找到了解决方案。我为每个文件输入添加了一个 onchange 方法，如下所示。

 <input type="file" 
        id="primaryInputFile" 
        name="primaryInputFile" 
        size="10"
        onchange="mainFileChanged()" />

该函数只是告诉全局声明的FileReader 读取更新后的值。

function mainFileChanged() {
    console.log("Main file change recorded");
    mainFileInput.readAsText(document.getElementById('primaryInputFile').files[0]);
}

然后我只是在需要时返回了读者的内容。这不是一个完美的解决方案，但它确实有效。

【讨论】：