Question

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

我使用 dojox.form.Uploader 取得了一些有限的成功。文件选择器和上传工作;文件内容可以在服务器上读取，但无法将文件内容返回给客户端。浏览器还重定向到表单的URL，我不想要， event.preventDefault（）表单上的提交没有＆＃ 39;解决这个问题。

尝试使用 dojo.request.iframe （根据this）提交包含dojox.form.Uploader的HTML表单会导致 415 Unsupported Media Type错误< / em>的

HTML＆＃39; FileReader看起来最有希望，但在IE9中并不支持，并且不使用Dojo。

是一种方法，有人可以帮忙吗？

Answer 1

我让这个工作。只是为了他人的利益而共享解决方案。使用的技术：

泽西岛2.x
Jackson 2.4.x
Jetty 9
Java 8
Dojo 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>

以下是挂钩到Uploader的“ change ”事件的JavaScript代码，并使用 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的服务器端方法，读取给定文件并返回其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如何阅读用户使用文件选择器

1 个答案: