jspからjavaServletへAjaxを使った画像ファイルの非同期通信を仕方を教えてください。

###前提・実現したいこと
http://kuwalab.hatenablog.jp/entry/20120424/1335266757
上記のサイトを参考にJava EEで画像アップロード処理を作成したのですが
画像をアップロードするとalertでエラーが表示され画像がアップロードされません。

修正方法または、参考になるサイトを教えていただけると助かります。
よろしくお願いいたします。

###該当のソースコード

java
1package servlet;
2
3import java.io.IOException;
4import java.io.PrintWriter;
5
6import javax.servlet.RequestDispatcher;
7import javax.servlet.ServletException;
8import javax.servlet.annotation.MultipartConfig;
9import javax.servlet.annotation.WebServlet;
10import javax.servlet.http.HttpServlet;
11import javax.servlet.http.HttpServletRequest;
12import javax.servlet.http.HttpServletResponse;
13import javax.servlet.http.Part;
14
15/**
16 * Servlet implementation class UploadServlet
17 */
18@WebServlet(asyncSupported = true, urlPatterns = { "/UploadServlet" })
19@MultipartConfig(fileSizeThreshold = 5000000, maxFileSize = 700 * 1024 * 1024, location = "D:/")
20public class UploadServlet extends HttpServlet {
21	private static final long serialVersionUID = 1L;
22
23    /**
24     * @see HttpServlet#HttpServlet()
25     */
26    public UploadServlet() {
27        super();
28        // TODO Auto-generated constructor stub
29    }
30
31	/**
32	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
33	 */
34	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
35		// TODO Auto-generated method stub
36		request.setCharacterEncoding("Windows-31");
37		response.setCharacterEncoding("Windows-31J");
38
39		RequestDispatcher rd = request.getRequestDispatcher("upload.jsp");
40		rd.forward(request, response);
41	}
42
43	/**
44	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
45	 */
46	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
47
48        request.setCharacterEncoding("Windows-31J");
49        Part part = request.getPart("file");
50        String name = getFilename(part);
51        part.write(name);
52
53        response.setCharacterEncoding("Windows-31J");
54        response.setContentType("application/json");
55
56        PrintWriter pw = response.getWriter();
57        pw.println("{\"result\":\"ok\"}");
58        pw.flush();
59        pw.close();
60    }
61
62    private String getFilename(Part part) {
63        for (String cd : part.getHeader("Content-Disposition").split(";")) {
64            if (cd.trim().startsWith("filename")) {
65                return cd.substring(cd.indexOf('=') + 1).trim()
66                        .replace("\"", "");
67            }
68        }
69
70        return null;
71    }
72
73}
74

jsp
1<%@ page language="java" contentType="text/html; charset=Windows-31J"
2	pageEncoding="Windows-31J"%>
3<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4<html>
5<head>
6<title>upload</title>
7<meta http-equiv="Content-Type" content="text/html; charset=Windows-31J">
8</head>
9 <body>
10  <input type="file" id="file"><input type="button" id="stop" value="停止">
11  <div id="fileInfo"></div>
12  <div id="ajaxStatus"></div>
13  <div id="status"></div>
14  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
15  <script type="text/javascript">
16(function() {
17    var ajax; // 途中で停止する場合に必要。
18    var ajaxSettings = {
19        xhr: function() {
20            var xhr = new window.XMLHttpRequest();
21            // アップロードの進捗状況を取得
22            xhr.upload.addEventListener("progress", function(event) {
23                if (event.lengthComputable) {
24                    $('#status').html(parseInt(parseInt((event.loaded / event.total) * 100)) + '%');
25                }
26            }, false);
27            // 中止の際に何かしたい場合
28            xhr.addEventListener("abort", function(event) {
29            }, false);
30
31            return xhr;
32        },
33        type: 'post',
34        url: 'upload',
35        processData: false,
36        contentType: false, // 送信するデータをFormDataにする場合、こうしないといけない。
37        cache: false,
38        dataType: 'json',
39        success: function(data) {
40            if (data && data.result == 'ok') {
41                $('#ajaxStatus').html('アップロード完了');
42            } else {
43                $('#ajaxStatus').html('アップロード失敗');
44            }
45            ajax = null;
46        },
47        error: function(xhr, textStatus, errorThrown) {
48            alert('エラー\n' + textStatus);
49            ajax = null;
50        }
51    };
52
53    // ファイルが選択されたらアップロードする。
54    $('#file').bind('change', onChangeFile);
55
56    function onChangeFile() {
57        // ファイルの情報を取得
58        var uploadFile = $('#file')[0].files[0];
59        $('#fileInfo').html(uploadFile.name + ' サイズ:' + uploadFile.size);
60        var formData = new FormData();
61        formData.append("file", uploadFile);
62        ajaxSettings.data = formData;
63
64        ajax = $.ajax(ajaxSettings);
65    }
66
67    $('#stop').click(function() {
68        if (ajax) {
69            // abortで送信を停止。
70            ajax.abort();
71        }
72    });
73}());
74  </script>
75 </body>
76</html>
77

行動規範の内容に同意します

回答1件

ベストアンサー

ajax命令の中の、post先指定「url: 'upload',」が、正しいURLではない気がしますが・・。
ご自身が公開しているサーバのコンテキストパスと、/uploadでアクセスできますか？
ブラウザでアクセスするのであれば、
http://localhost/upload
か、あるいは、ポート指定を含んで、
http://localhost:8080/upload
あたりではないでしょうか。

投稿2016/11/07 00:06