dojo 1.10 如何读取用户使用文件选择器选择的文本文件

Question

使用 Dojo 1.10（为了与现有 GUI 保持一致），我希望用户通过文件选择器 select 本地 JSON 文本文件，然后将文件内容读入 JavaScript 变量。必须在 IE9+ 下工作。如果需要，可以使用 RESTful 服务器，但不是强制性的。

我在 dojox.form.Uploader 方面取得了一些有限的成功。文件选择器和上传工作；可以在服务器上读取文件内容，但是无法 return 将文件内容返回给客户端。浏览器还重定向到我不想要的表单 URL 和表单 submit 上的 event.preventDefault()没有解决这个问题。

尝试使用 dojo.request.iframe（根据 this）提交包含 dojox.form.Uploader 的 HTML 表单导致415 不支持的媒体类型错误。

HTML 的 FileReader 看起来最有前途，但在 IE9 中不受支持并且不使用 Dojo。

有办法做到这一点，有人可以帮忙吗？

Answer 1

我成功了。只是为了他人的利益而分享解决方案。使用的技术：

泽西岛 2.x
杰克逊 2.4.x
码头 9
Java 8
道场 1.10.x

下面是包含 dojox.form.Uploader 的 HTML <form>，允许用户选择要上传的文件。请注意，uploadOnSelect 设置为 false，因此我们可以通过 JavaScript:

手动上传

<form id="uploadForm" enctype="multipart/form-data" >
    <input id="myUploader" type="file" name="theFile" data-dojo-type="dojox/form/Uploader" data-dojo-props="uploadOnSelect: false" />
</form>

下面是 Java脚本代码，它挂接到上传器的“change”事件，并使用 dojo.request.iframe 通过 POST 上传到 REST 服务器：

require([
    "dijit/registry", 
    "dojo/on", 
    "dojo/dom", 
    "dojo/request/iframe", 
    "dojo/json", ...], 
function(registry, on, dom, iframe, json){ 
    ...
    var me = this;
    on(registry.byId("myUploader"), "change", function() { me._getFileJSON.apply(me, arguments); });
    ...
    _getFileJSON : function() {
        var me = this;
        var td = iframe.post("rest/getFile", {
            form: dom.byId("uploadForm"),
            preventCache: true
        }).then(function(data) {
            ... use JSON returned
        }, function(error) {
            console.error(error);
        });
    }
    ...
});

下面是处理 POST、读取给定文件和 returns 其 JSON 内容的服务器端方法。非常重要的是，要返回的 JSON 包含在显示的完整 <html> 标记中，包括 <textarea> 以便 dojo.request.iframe可以阅读回复。请参阅 dojox.form.Uploader 文档。

MyPersistenceObj 是一个简单的 POJO，与接收到的文件中的 JSON 结构相匹配。从 JSON 到 POJO 再回到 JSON 的转换不是绝对必要的，但提供了使用 POJO 进行额外处理的能力（为简洁起见未包括在内）。

@POST
@Path("/getFile")
@Consumes(MediaType.MULTIPART_FORM_DATA)
@Produces(MediaType.TEXT_HTML)
public String uploadFile(
    @FormDataParam("theFile") InputStream inData,
    @FormDataParam("theFile") FormDataContentDisposition fileDetail) {

    try {
        ObjectMapper mapper = new ObjectMapper();
        MyPersistenceObj data = mapper.readValue(inData, MyPersistenceObj.class);

        ObjectWriter ow = mapper.writer();
        String dataAsJson = ow.writeValueAsString(data);
        return "<html><head></head><body><textarea>" + dataAsJson + "</textarea></body></html>";
    } catch (Exception e) {
        return "<html><head></head><body><textarea>{ \"error\" : \"invalid JSON: "
            + (e.getMessage() != null ? e.getMessage().replaceAll("[\"'\r\n]", "") : "<N/A>")
            + "\" }</textarea></body></html>";
    }
}

我再次感谢how to upload file using dojo，它提供了部分解决方案。

dojo 1.10 如何读取用户使用文件选择器选择的文本文件

dojo 1.10 How to read text file a user has picked with a file picker

javascript

file-io

dojo