Question

亲爱的社区，你好。

我有一个问题似乎无法解决。让我解释一下我的尝试。

我有一个简单的JSF-Site，其中包含选择文件对话框和提交按钮。当用户选择文件并单击提交按钮时，该文件将被发送到我的服务器上的servlet，并在本地保存，并且应创建指向文件位置的db条目。听起来很简单吧？到目前为止，这是我的解决方案：

JavaScript：

function postUploadedFile() {
    var servlet = "UploadImageToServer";
    var inputElement = document.getElementById('filedataDecoded');
    var fileTypeElement = document.getElementById('filedataType');
    var encodedFile = inputElement.textContent;
    var fileType = fileTypeElement.textContent;
    inputElement.textContent = "";
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("POST", "http://localhost:8080/TestJSF/" + servlet + "?fileType="+fileType , true);
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlhttp.onreadystatechange = function () {
        if ((xmlhttp.readyState == 4)) {
              // handle callback
              console.log("done");
        }
     }
    xmlhttp.send(encodedFile);
    console.log();
}

我的Servlet：

public class UploadImageToServer extends HttpServlet {
    private static final long serialVersionUID = 1L;

    private static Logger logger = Logger.getLogger(UploadImageToServer.class);

    private String dbUser = "xxxx";

    private String dbPw = "xxxx";

    public UploadImageToServer() {
        super();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        PreparedStatement stm = null;
        Connection con = null;
        InputStream fileDataStream = request.getInputStream();
        int fileContentLength = request.getContentLength();
        String fileType = (request.getParameter("fileType")).split("\\.")[1];
        ByteArrayOutputStream buffer = new ByteArrayOutputStream();
        byte[] fileDataBytes64 = new byte[fileContentLength];
        byte[] bufferTemp = new byte[1024];
        int nRead;
        while ((nRead = fileDataStream.read(bufferTemp, 0, bufferTemp.length)) != -1) {
          buffer.write(bufferTemp, 0, nRead);
        }
        buffer.flush();
        String tempString = buffer.toString();
        String base64String = tempString.split("base64,")[1];
        System.out.println("test");
        Double newRandom = (double) -1;
        while(newRandom < 5000 || newRandom > 1000000) {
            newRandom = Math.random() * 10000;
        }
        String valueOf = String.valueOf((newRandom));
        String fileName = (valueOf.split("\\."))[0] + "." + fileType;
        File tempFile = new File("C:\\storage\\" + fileName);
        byte[] fileDataDecoded = Base64.decodeBase64(base64String);
        tempFile.getParentFile().mkdir();
        tempFile.createNewFile();
        FileOutputStream foS = new FileOutputStream(tempFile);
        foS.write(fileDataDecoded);
        foS.close();
        String driver = PossibleDbDriver.MYSQL.getIdentifier();
        try {
            Class.forName(driver);
        } catch (ClassNotFoundException e2) {
            logger.error("Error - no valid Driver-Class specified - [" + driver + "]");
            logger.error("Message - [" + e2.getMessage() + "]");
        }
        String dbURL = "jdbc:mysql://localhost:3306/imagetest";
        try {
            con = (Connection) DriverManager.getConnection(dbURL,dbUser,dbPw);
            stm = con.prepareStatement("INSERT INTO images (image_name,image_path,image_likes,image_dislikes,image_timestamp) VALUES(?,?,?,?,?)");
            stm.setString(1, tempFile.getName());
            stm.setString(2, tempFile.getPath());
            stm.setDouble(3, 0);
            stm.setDouble(4, 0);
            stm.setTimestamp(5, new Timestamp(GregorianCalendar.getInstance().getTimeInMillis()));
            stm.execute();
         } catch (SQLException e) {
                logger.error("Error - Connection could not be established.");
                logger.error("Message - [" + e.getMessage() + "]");
         } 
    }
}

Servlet映射：

  <servlet>
    <description></description>
    <display-name>UploadImageToServer</display-name>
    <servlet-name>UploadImageToServer</servlet-name>
    <servlet-class>mk.imageboard.servlets.UploadImageToServer</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>UploadImageToServer</servlet-name>
    <url-pattern>/UploadImageToServer</url-pattern>
  </servlet-mapping>

文件数据来自另一个脚本，该脚本将其作为Base64-String读取并将其写入TextArea-Element'legineataDecoded'（只是为了澄清这一点）。 Application Server是Tomcat 6.0.36，JSF实现是MyFaces 2.1.13。一切都在同一台机器上运行（我的电脑）。

现在我的实际问题...... 当我让Tomcat以正常模式运行并访问我的网站并尝试上传文件时，不会发送XmlHttpRequest。但是，当我在Chrome中打开的JavaScript控制台执行相同的操作并将断点设置为：

            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("POST", "http://localhost:8080/TestJSF/" + servlet + "?fileType="+fileType , true);
            xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xmlhttp.onreadystatechange = function () {
                if ((xmlhttp.readyState == 4)) {
                      // handle callback
                      console.log("done");
                }
             }
            xmlhttp.send(encodedFile);

并逐步执行脚本，发送请求并且servlet正常工作。我搜索了stackoverflow的解决方案，但找不到任何解决方案。与互联网相同。这是一个奇怪的错误，我无法理解为什么它不起作用。如果有人可以帮助我，我会非常感激。

提前致谢

克里斯

Answer 1

尝试使用相对路径而不是绝对路径。

xmlhttp.open("POST", "TestJSF/" + servlet + "?fileType="+fileType , true);

或

xmlhttp.open("POST", "" + servlet + "?fileType="+fileType , true);

更新

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

doPost(request,response);
    }

xmlhttp.open("GET", "TestJSF/" + servlet + "?fileType="+fileType , true);

或

xmlhttp.open("GET", "" + servlet + "?fileType="+fileType , true);

Answer 2

确定。我想我找到了解决方案或问题的原因。

不知何故，围绕实际提交按钮触发javascript的<h:form>...</h:form>阻止了请求的发送，但至于它为什么会这样做，我不知道。我删除了表单，现在可以正常使用。

有人猜测导致这个问题的原因吗？我真的很想知道。

但无论如何，谢谢你们。祝新年快乐：）

亲切的问候

克里斯

编辑：我的网站缺少HTML-Snipped。对不起我应该添加它，我的不好！

<ui:define name="content">
        <!-- Testbereich -->
            <fieldset>
                <input type="file" id="file" name="file" enctype="multipart/form-data" onchange=""/>
                <input type="submit" value="Verschluesseln" onclick="loadUploadedFile();"/>
            </fieldset>
            <fieldset>
                <div> Uploaddaten nicht verschluesselt:</div>
                <h:inputTextarea id="filedataType" styleClass="textareaOutput" disabled="true"/>
                <h:inputTextarea id="filedataDecoded" styleClass="textareaOutput" disabled="true"/>
            </fieldset>
            <!-- <h:form id="uploadForm"> -->
                <fieldset>
                    <input type="submit" onclick="postUploadedFile();"/>
                </fieldset>
            <!-- </h:form> -->
    </ui:define>

澄清loadUploadedFile()是读取文件并返回Base64字符串的javascript。

发送XmlHttpRequest的JavaScript仅适用于Debug Console

2 个答案: