-3
ImageRecognitionServlet.javajQueryのはなし成功
package videotoolkit.deeplearning.servlet;
import com.google.gson.Gson;
import com.google.gson.JsonElement;
import com.google.gson.JsonObject;
import no.cmr.videotoolkit.deeplearning.engine.ClassificationResultJSON;
import no.cmr.videotoolkit.deeplearning.engine.ImageRecognition;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.nio.file.Paths;
/**
* Created by junyong on 10.02.2017.
*/
@WebServlet("/ImageRecognitionServlet")
public class ImageRecognitionServlet extends HttpServlet
{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
{
String rootPath = Paths.get(System.getenv("WMS_HOME"), "dl4ir").toString();
String UploadImageDir = rootPath + File.separator + "upload";
if (ServletFileUpload.isMultipartContent(req))
{
System.out.println("This is multipart data");
}
String imageUrl = req.getParameter("imageUrl");
Part filePart = req.getPart("imageFile");
PrintWriter out = resp.getWriter();
resp.setContentType("text/html");
resp.setHeader("Cache-control", "no-cache, no-store");
resp.setHeader("Pragma", "no-cache");
resp.setHeader("Expires", "-1");
resp.setHeader("Access-Control-Allow-Origin", "*");
resp.setHeader("Access-Control-Allow-Methods", "POST");
resp.setHeader("Access-Control-Allow-Headers", "Content-Type");
resp.setHeader("Access-Control-Max-Age", "86400");
Gson gson = new Gson();
JsonObject resultObj = new JsonObject();
ClassificationResultJSON imageRecognitionResult = new ClassificationResultJSON("result", "test result");
// new ImageRecognition().imageRecognition(imageUrl);
JsonElement result = gson.toJsonTree(imageRecognitionResult);
if (result == null)
resultObj.addProperty("success", false);
else
resultObj.addProperty("success", true);
resultObj.add("imageLabels", result);
out.println(resultObj.toString());
out.close();
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
{
doGet(req, resp);
}
}
index.htmlを
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Deep learning for image recognition</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("input[name$='imageSource']").click(function() {
var source = $(this).val();
$("div.desc").hide();
$("#" + source).show();
});
$("#submitButton").click(function (e) {
e.preventDefault();
var source = $("#inputGroup input[type='radio']:checked").val();
if (source == "inputFile") {
var ext = $("input#imageFile").val().split('.').pop().toLowerCase();
if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg', 'bmp', 'tif', 'tiff']) == -1) {
alert("Seems the selected file is not image, Reselect");
return false;
}
}
var formInput = $("#imageInputForm")[0];
var formData = new FormData(formInput);
$.ajax({
type: "POST",
url: "ImageRecognitionServlet",
data: formData,
processData: false,
contentType: false,
cache: false,
timeout: 600000,
dataType: "json",
//if received a response from the server
success: function (data, textStatus, jqXHR) {
if (data.success) {
var image = $('<img>').attr('src', data.imageUrl);
$("#resultDiv").html("");
$("#resultDiv").append(image);
}
//display error message
else {
$("#resultDiv").html("<div><b>Recognition Wrong!</b></div>");
}
},
//If there was no resonse from the server
error: function (jqXHR, textStatus, errorThrown) {
console.log("Something wrong happened " + textStatus);
$("#resultDiv").html(jqXHR.responseText);
},
//capture the request before it was sent to server
beforeSend: function (jqXHR, settings) {
//adding some Dummy data to the request
settings.data += "&dummyData=whatever";
//disable the button until we get the response
$('#submitButton').attr("disabled", true);
},
//this is called after the response or error functions are finished
//so that we can take some action
complete: function (jqXHR, textStatus) {
//enable the button
$('#submitButton').attr("disabled", false);
$form.find("input:text, input:file, select, textarea").val('');
}
});
});
});
</script>
</head>
<body>
<div id="inputGroup" align="center" style="font-size: 20px">
<p style="color: darkblue; font-size: 24px">
<br> Deep Learning for Image Recognition</br>
</p>
<p>
Image source:
<input type="radio" id="fileRadio" name="imageSource" checked="checked" value="inputFile"/>Upload image
<input type="radio" id="urlRadio" name="imageSource" value="inputUrl"/>Image url
</p>
<form id="imageInputForm" enctype="multipart/form-data">
<div id="inputFile" class="desc">
<input id="imageFile" name="imageFile" type="file">
</div>
<div id="inputUrl" class="desc" style="display: none;">
<input id="imageUrl" name="imageUrl" type="text" size=50>
</div>
<p><input id="submitButton" type="button" value="Submit"/></p>
</form>
</div>
<br style="font-size: 12px"/>
<div id="resultSection">
<fieldset>
<legend>Image recognition results</legend>
<div id="resultDiv"></div>
</fieldset>
</div>
<form name="refresh">
<input name="visited" value="" type="hidden">
</form>
</body>
でマルチいるFormDataを送る上記の私のコードを参照してください。アップロードファイルまたはテキストをサーブレットに送信したい。だから私はjQuery FormDataを使用しています。しかし、サーブレットでは、要求は常にマルチパート・フォーム・データではないと言います。私は間違ったことをしましたか？私はこのことについてほぼすべてのQ & Aをチェックして、いろいろ試しましたが、それでも動作しません。どうもありがとう。
AJAXリクエストで 'dataType： 'json''を削除しました –
私はこれを行いましたが、それでも同じエラーが発生しました。 – Junyong
外部ソースからコードを追加しました –