java - 使用值 ajax upload 和 OctetStreamReader 上传的图片在 IE 中不起作用 - Java/JSP

Question

我在 Internet Explorer 7、8 和 9 中上传图片时遇到问题(尚未测试其他版本)。它在 FF 和 Chrome 中工作正常，但由于某种原因，当我尝试在任何版本的 IE 中上传图片时，图片上传错误。

我的意思是，文件以正确的名称上传到正确的目录中，但我无法在任何图片编辑程序中打开它。

此外，当我在 Notepad++ 中打开图片时，我看到图片显示了一些元数据，如下所示:

----------------------------7db1f6c907fe内容处置:表单数据；名称=“QQ文件”；文件名=“jingjang.jpg”内容类型:图像/jpeg

(这里是哈希码)

----------------------------7db1f6c907fe--

如果我删除代码，图片就可以正常工作!那么谁能告诉我什么在生成代码以及如何停止它？ :)

我在 JSP 页面上使用 Valums Ajax Upload:

var imageFolder = "images/upload/<%=user.getUsername()%>/temp/";
new qq.FileUploader({

element: document.getElementById('TempUploadButton'),
action: 'OctetStreamReader',
debug: false,
multiple: false,
params: {"type" : "user"},

onComplete: function(id, fileName) {    
    var d = new Date();
    $("#UserPageAvatarPic a img").attr("src", imageFolder+"<%=user.getUsername()%>.jpg?cache="+d.getTime() );
},
onSubmit : function(id, fileName) {
    // hide all prev elements
    $('#TempUploadButton ul.qq-upload-list li').each(function() {
        $(this).hide();
    });
}

});

OctetStreamReader 作为我的 servlet

    public class OctetStreamReader extends HttpServlet {

private static final long serialVersionUID = 6748857432950840322L;
private static final String DESTINATION_DIR_PATH = "files";
private static String realPath;
UserService userService = UserService.getService();

/**
 * {@inheritDoc}
 * @param config
 * @throws ServletException
 */
@Override
public void init(ServletConfig config) throws ServletException {
    super.init(config);
    realPath = getServletContext().getRealPath(DESTINATION_DIR_PATH) + "/";
}

/** 
 * Handles the HTTP <code>POST</code> method.
 * @param request servlet request
 * @param response servlet response
 * @throws ServletException if a servlet-specific error occurs
 * @throws IOException if an I/O error occurs
 */
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException {
    User user = userService.getUser(((Integer) request.getSession().getAttribute("user")).intValue());
    String type = request.getParameter("type");
    String username = user.getUsername();
    PrintWriter writer = null;
    InputStream is = null;
    FileOutputStream fos = null;
    type = "user";
    try {
        writer = response.getWriter();
    } catch (IOException ex) {
        log(OctetStreamReader.class.getName() + "has thrown an exception: " + ex.getMessage());
    }

    try {
        String filename = "";
        if (type.equals("user")) {
            realPath = getServletContext().getRealPath("/images/upload/" + username + "/temp/");
            is = request.getInputStream();
            String strDirectoy = getServletContext().getRealPath("/images/upload/" + username + "/temp/" );
            boolean success = (new File(strDirectoy)).mkdir();
            File f1 = new File(strDirectoy);
            File[] children = f1.listFiles();
            filename = username + ".jpg";
        }
        if (type.equals("post"))  {
            realPath = getServletContext().getRealPath("/images/upload/" + username + "/post/");
            is = request.getInputStream();
            String strDirectoy = getServletContext().getRealPath("/images/upload/" + username + "/post/" );
            boolean success = (new File(strDirectoy)).mkdir();
            File f1 = new File(strDirectoy);
            File[] children = f1.listFiles();
            filename = Calendar.getInstance().getTimeInMillis()+".jpg";
        }
        if (type.equals("editpost"))  {
            realPath = getServletContext().getRealPath("/images/upload/" + username + "/editpost/");
            is = request.getInputStream();
            String strDirectoy = getServletContext().getRealPath("/images/upload/" + username + "/editpost/" );
            boolean success = (new File(strDirectoy)).mkdir();
            File f1 = new File(strDirectoy);
            File[] children = f1.listFiles();
            filename = Calendar.getInstance().getTimeInMillis() + ".jpg";
        }


        fos = new FileOutputStream(new File(realPath + "/" + filename), false);
        IOUtils.copy(is, fos);
        response.setStatus(response.SC_OK);
        writer.print("{success: true, filename: \"" + filename + "\"}");
    } catch (FileNotFoundException ex) {
        response.setStatus(response.SC_INTERNAL_SERVER_ERROR);
        writer.print("{success: false}");
        log(OctetStreamReader.class.getName() + "has thrown an exception: " + ex.getMessage());
    } catch (IOException ex) {
        response.setStatus(response.SC_INTERNAL_SERVER_ERROR);
        writer.print("{success: false}");
        log(OctetStreamReader.class.getName() + "has thrown an exception: " + ex.getMessage());
    } finally {
        try {
            fos.close();
            is.close();
        } catch (IOException ignored) {
        }
    }
 writer.flush();
    writer.close();
}
}

另外，在 fileuploader.js 中，我尝试将内容类型从 application/octet-stream 更改为 multipart/form-data

        /**
 * Sends the file identified by id and additional query params to the server
 * @param {Object} params name-value string pairs
 */    
_upload: function(id, params){
    var file = this._files[id],
        name = this.getName(id),
        size = this.getSize(id);

    this._loaded[id] = 0;

    var xhr = this._xhrs[id] = new XMLHttpRequest();
    var self = this;

    xhr.upload.onprogress = function(e){
        if (e.lengthComputable){
            self._loaded[id] = e.loaded;
            self._options.onProgress(id, name, e.loaded, e.total);
        }
    };

    xhr.onreadystatechange = function(){            
        if (xhr.readyState == 4){
            self._onComplete(id, xhr);                    
        }
    };

    // build query string
    params = params || {};
    params['qqfile'] = name;
    var queryString = qq.obj2url(params, this._options.action);

    xhr.open("POST", queryString, true);
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhr.setRequestHeader("X-File-Name", encodeURIComponent(name));
    xhr.setRequestHeader("Content-Type", "multipart/form-data");
    xhr.send(file);
},

Answer 1

HTML文件上传默认使用the multipart/form-data request encoding (这是为了能够上传多个文件和/或在一个请求中混合正常的输入字段值)。然而，您并不是从请求正文中解析和提取各个表单数据部分，而是读取整个请求正文并将其写入未修改的文件中。

is = request.getInputStream();
fos = new FileOutputStream(new File(realPath + "/" + filename), false);
IOUtils.copy(is, fos);

这确实行不通。你说它可以在 FF/Chrome 中运行，这超出了我的范围。也许您误解了结果，或者根本没有在那些带有二进制文件的浏览器中对其进行测试。

您需要使用Apache Commons FileUpload从 multipart/form-data 请求中提取部分。或者，当您已经使用 Servlet 3.0 时，您也可以使用提供的 Servlet API HttpServletRequest#getParts()方法。

另请参阅:

• How to upload files to server using JSP/Servlet?
• HTML5 File Upload to Java Servlet

<小时/>

与具体问题无关，到目前为止发布的代码还有另一个问题。您将上传的文件存储在扩展 WAR 的 Web 内容中。这距离坚固的永久存储位置还很远。每次重新部署新的 WAR 时，所有这些文件都会丢失。您每次都需要备份它们，这非常笨拙且容易出错。而是将它们存储在扩展的 WAR 文件夹之外的固定位置。

另请参阅:

• Java EE - Best way to get real path to uploaded files?