0

在执行多个文件的 jquery.ajax 发布后，我无法加载一些由 servlet 返回的 html。

我可以上传文件（图片）就好了。我有一个 servlet，它对照片进行一些处理并从图片中提取一些元数据。处理完照片后，我想将一些提取的元数据传递给 JSP，最终返回给浏览器。

所有这一切都很好。我用我的数据加载请求对象并将其重定向到我的 JSP。但是……只要 JSP 响应浏览器，页面就不会被加载。

使用 firebug 我可以看到 JSP 以我想要的方式正确生成了 HTML，并且浏览器在响应中获取了 html 文本......它只是不加载页面。页面保持原样，我可以简单地在 Firebug 中查看响应中的 HTML 文本。

任何想法可能是什么问题？这是一些相关的代码...

将文件上传到 servlet 的 Javascript 函数...

function uploadPictures() {
    var input = document.getElementById('filesToUpload');
    var fileList = [];
    var files = new FormData();

    for(var i = 0; i < input.files.length; i++) {       
        files.append("file", input.files[i]);
    }

    $.ajax({
        type        :   "POST",
        url         :   "/uploadPhotos",
        data        :   files,
        dataType    :   "HTML",
        processData :   false,
        contentType :   false
    });
}

小服务程序代码

@MultipartConfig
public class UploadPhotosServlet extends HttpServlet {

    @Override
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
        String url = "/uploadForm.jsp";
        RequestDispatcher dispatcher = 
            getServletContext().getRequestDispatcher(url);
        String basePath = getInitParameter("photosRoot");
        HashMap<String,String> files = new HashMap<String,String>();

        java.util.Collection<Part> parts = request.getParts();
        for (Part part : parts) {
            String filename = getFilename(part);
            InputStream fileContent = part.getInputStream();

            OutputStream outFile = new FileOutputStream(new File(basePath + "screen/" + filename));
            int read = 0;
            byte[] bytes = new byte[1024];

            while((read = fileContent.read(bytes)) != -1) {
                outFile.write(bytes, 0, read);
            }

            fileContent.close();
            outFile.flush();
            outFile.close();

            File img = new File(basePath + "screen/" + filename);
            File thumb = new File(basePath + "screen/thumbnails/" + filename);

            try {
                Metadata metadata = ImageMetadataReader.readMetadata(img);

                for(Directory directory : metadata.getDirectories()) {
                    if(directory.containsTag(ExifSubIFDDirectory.TAG_DATETIME_ORIGINAL)) {
                        Date date = directory.getDate(ExifSubIFDDirectory.TAG_DATETIME_ORIGINAL);
                        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
                        files.put(filename, sdf.format(date));
                        break;
                    } else if(directory.containsTag(ExifIFD0Directory.TAG_DATETIME)) {
                        Date date = directory.getDate(ExifIFD0Directory.TAG_DATETIME);
                        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
                        files.put(filename, sdf.format(date));
                        break;
                    }
                }

                BufferedImage buffImg = ImageIO.read(img);
                BufferedImage buffThumb = Scalr.resize(buffImg, 150);

                ImageIO.write(buffThumb, "jpg", thumb);
            } catch (IOException e) {
                e.printStackTrace();
            } catch (ImageProcessingException e) {
                e.printStackTrace();
            }
        }

        request.setAttribute("files", files);
        dispatcher.forward(request, response);
    }

    private static String getFilename(Part part) {
        for (String cd : part.getHeader("content-disposition").split(";")) {
            if (cd.trim().startsWith("filename")) {
                String filename = cd.substring(cd.indexOf('=') + 1).trim().replace("\"", "");
                return filename.substring(filename.lastIndexOf('/') + 1).substring(filename.lastIndexOf('\\') + 1); // MSIE fix.
            }
        }
        return null;
    }
}

如上所述，重定向到 ( uploadForm.jsp) 的 JSP 生成得很好。Firebug 将在对 servlet 的调用的响应中向我显示 HTML 代码……但是，浏览器停留在上传表单所在的页面上。

谢谢你的帮助。

4

3 回答 3

2

看起来你真正想要的比你目前正在做的要简单得多。

<form action="/uploadPhotos" method="post" enctype="multipart/form-data">
    <input type="file" multiple name="filesToUpload" />
    <button type="submit">Upload</button>
</form>
于 2013-07-11T21:39:13.027 回答
0

AJAX方法不应该刷新页面。window.location如果您想在请求的success功能中使用，您可以使用ajax

$.ajax({
    type        :   "POST",
    url         :   "/uploadPhotos",
    data        :   files,
    dataType    :   "HTML",
    processData :   false,
    contentType :   false,
    success: function(){
        window.location = "uploadForm.jsp";
    }
});
于 2013-07-11T21:21:50.000 回答
0

ajax 不会为您重新加载页面，这就是使用 ajax 的全部目的。complete但是，您可以使用此处记录的 ajax 设置强制页面重新加载http://api.jquery.com/jQuery.ajax/

complete无论结果如何（成功或失败），ajax 的回调总是在 ajax 响应返回后调用

总而言之，您需要执行以下操作：

$.ajax({
    type        :   "POST",
    url         :   "/uploadPhotos",
    data        :   files,
    dataType    :   "HTML",
    processData :   false,
    contentType :   false,
    complete: function () {
         location.reload(); //or other browser specific reload method
    }
});

如果complete不是您想要的，请尝试使用successorerror代替。

success返回 HTML 状态码为 2xx 或 3xx 时调用

error返回 HTML 状态码为 4xx 或 5xx 时会调用

根据您的需要使用它

于 2013-07-11T21:20:35.403 回答