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

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

javascript file-io dojo

Javascript dojo 1.10如何读取用户使用文件选择器拾取的文本文件,javascript,file-io,dojo,Javascript,File Io,Dojo,使用Dojo1.10（为了与现有GUI保持一致），我希望用户通过文件选择器选择一个本地JSON文本文件，然后将文件内容读入JavaScript变量。必须在IE9+中工作。如果需要，可以使用RESTful服务器，但不是强制性的我在dojox.form.Uploader方面取得了一些有限的成功。文件拾取和上传工作正常；可以在服务器上读取文件内容，但无法将文件内容返回到客户端。浏览器还重定向到了我不想要的表单URL，表单提交上的event.preventDefault（）没有解决此问题尝试使用do

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

我在dojox.form.Uploader方面取得了一些有限的成功。文件拾取和上传工作正常；可以在服务器上读取文件内容，但无法将文件内容返回到客户端。浏览器还重定向到了我不想要的表单URL，表单提交上的event.preventDefault（）没有解决此问题

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

HTML看起来最有前途，但IE9不支持，也不使用Dojo

有一种方法可以做到这一点，有人能帮忙吗？

我让它起作用了。只是为了他人的利益而分享解决方案。使用的技术：

泽西2.x
杰克逊2.4.x
码头9
爪哇8
Dojo1.10.x

下面是包含dojox.form.Uploader的HTML

，允许用户选择要上载的文件。请注意，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>

下面是处理POST、读取给定文件并返回其JSON内容的服务器端方法。非常重要的是，要返回的JSON被包装在所示的完整的

标记中，包括

，以便dojo.request.iframe可以读取响应。请参阅文档

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

@POST
@路径（“/getFile”）
@使用（MediaType.MULTIPART\u FORM\u数据）
@生成（MediaType.TEXT\u HTML）
公共字符串上载文件(
@FormDataParam（“theFile”）输入流inData，
@FormDataParam（“theFile”）FormDataContentDisposition文件详细信息）{
试一试{
ObjectMapper mapper=新的ObjectMapper（）；
MyPersistenceObj data=mapper.readValue（inData，MyPersistenceObj.class）；
ObjectWriter ow=mapper.writer（）；
字符串dataAsJson=ow.writeValueAsString（数据）；
返回“+dataAsJson+”；
}捕获（例外e）{
返回“{\”错误\:\”无效的JSON:“
+（e.getMessage（）！=null？e.getMessage（）.replaceAll（“[\”\\r\\n]”，“”）：“”）
+ "\" }";
}
}

我再次承认，这是部分解决方案

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
@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>";
    }
}