Question

我有一个方法可以将数据库中的图像文件保存为BLOB文件。该方法工作正常，但是当我在ExtJS文件域组件中得到回调时，它总是通过失败函数，我不知道我要通过成功函数做什么回应，这是我的代码：

服务器方法：

@POST
@Path("/upload")
@Consumes(MediaType.MULTIPART_FORM_DATA)
@Produces({ MediaType.APPLICATION_JSON })
public ServiceResponse uploadFile(@QueryParam("id") Long iconId, FormDataMultiPart form) {
    CatIcon icon;
    if (iconId != null) {
        icon = catIconBean.getOne(iconId);
    } else {
        icon = new CatIcon();
    }

    byte[] image = form.getField("iconBmp").getValueAs(byte[].class);
    if (image.length != 0) {
        MultivaluedMap<String, String> headers = form.getField("iconBmp").getHeaders();
        String type = headers.getFirst("Content-type");
        List<String> list = Arrays.asList("image/gif", "image/png", "image/jpg", "image/jpeg",
                "image/x-icon", "image/bmp");
        if (list.contains(type)) {
            icon.setIconBmp(image);
            icon.setType(type);
        }
    }

    icon.setDescription(form.getField("description").getValue());
    icon.setFileName(form.getField("fileName").getValue());
    icon = catIconBean.saveIcon(icon);

    ServiceResponse sr = new ServiceResponse();
    sr.httpResponse = true;
    return sr;
}

我必须在上面的代码中返回什么？

客户端：

uploadIcon : function(item, e, eOpts) {
    var me = this;
    var form = this.getDetail().getForm();
    var valid = form.isValid();
    if (!valid) {
        return false;
    }
    var values = form.getValues();
    if(values) {
        form.submit({
            url : myApplication.defaultHost() + 'icon/upload?id=' + values.id,
            waitMsg : 'Uploading...',
            success : function(form, action) {
                me.onCompleteSaveOrDelete();
            },
            failure : function(form, action) {
                me.onCompleteSaveOrDelete();
            }
        });
    }
},

我在两个回调函数中编写了相同的函数me.onCompleteSaveOrDelete()以使其被调用，这就是我想要成功调用的方法。

问候。

更新：

我做了几乎相同的Alexander.Berg回答。唯一的区别是我写@Produces({ MediaType.APPLICATION_JSON })而不是@Produces({ MediaType.TEXT_HTML })，因为我需要Json Response。但是当我在chrome中调试并检查响应时，我得到了这个：

失败：

failure : function(form, action) {
  me.onCompleteSaveOrDelete();
}

在行动参数中，responseText：

"{"data":"{\"success\":true}","httpResponse":true,"totalCount":0}"

但它还在经历failure ......我想我很亲密，有什么帮助？

问候。

Answer 1

Extjs中的文件上载更加棘手，因为它使用iframe并提交，而不是真正的ajax请求来上传文件。

在服务器方法上试试这个：

@POST
@Path("/upload")
@Consumes(MediaType.MULTIPART_FORM_DATA)
@Produces(MediaType.TEXT_HTML)
public String uploadFile(@QueryParam("id") Long iconId, FormDataMultiPart form) {
    (...)
    JSONObject json = new JSONObject();
    json.put("success", true);
    json.put("msg", "Success");
    return json.toString();
}

这是因为上传接受Content-Type text / html，

参见http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.File的示例 - ＆gt;示例用法 - ＆gt;实时预览

将Firefox浏览器与Firebug插件一起使用，并在网络选项卡上使用以下网址 - ＆gt; http://docs.sencha.com/extjs/4.2.2/photo-upload.php

Response Headersview source
(...)
Content-Type    text/html
(...)

Request Headersview source
Accept  text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
(...)

使用Jersey和ExtJS响应文件上传

1 个答案: