Question

我正在尝试在Windows 8 Javascript应用程序中找到存储在我的计算机上的图像文件，并通过WinJS.xhr将其发布到Java servlet中，其中数据被插入到mysql数据库中。

问题的原因可能是 1）通过.xhr方法使用as参数 encodeURIComponent（evt.target.result）或<发送数据时通过Java servlet将此数据插入mysql db时强> 2）。该错误实际发生在2），因为它只在使用1）时插入空值，但对于其他值，servlet完美地工作（参见Ad 2）。

广告1）：我不确定在以下上下文中使用encodeURIComponent（evt.target.result）是否是获取存储文件内容并为其准备的合适方法发布请求：

document.getElementById("btnUpload").onclick = function () {
            var input = document.getElementById("file_input");
            readFile(input.files[0], function(file, evt)
            {
                WinJS.xhr({
                    type: "post",
                    url: "http://servlett.domain.com:8080/Servlet/addImage",
                    headers: { "Content-type": "application/x-www-form-urlencoded" },
                    data: "fk_floor_id=" + currentFloorId + "&map=" + encodeURIComponent(evt.target.result)
                }).then(
                    function (xhr) {
                        var success = xhr.response;
                        }, function (xhr) {
                        var error = xhr.response;
                    }
                );
            });

通过以下方法检索参数evt.target.result：

        function readFile(file, callback) {
        var reader = new FileReader();
        reader.onload = function (evt) {
            if (typeof callback == "function")
                callback(file, evt);
        };
        reader.readAsText(file);
    }

其中file_input是以下格式中的输入组件：

<form action="" method="post">
        <input type="file" id="file_input" />
        <button type="button" id="btnUpload">Upload</button>
    </form>

顺便说一句：这样做我从以下教程获得了每个javascript的文件上传：http://www.tutorials.de/content/1239-file-upload-per-javascript-html-5-file-api.html

广告2）现在我的servlet会侦听并处理数据，但他只会将空值存储到数据库中。如果我从1）中删除参数“＆amp; map =”+ encodeURIComponent（evt.target.result）并将其替换为“＆amp; map = test”，则servlet会将值完美地存储到数据库中。这里是servlet代码：

stmt = conn.createStatement();
        stmt.executeUpdate("INSERT INTO maps (fk_floor_id,map) VALUES ("+request.getParameter("fk_floor_id")+",'"+request.getParameter("map")+"')");

属性映射被定义为mysql中的blob。

也许有人看到错误或者可以告诉我如何以不同的方式在javascript中上传图片。

Answer 1

更好的解决方案是：

var picker = new Windows.Storage.Pickers.FileOpenPicker();
picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
picker.pickSingleFileAsync().then(progressResults, displayError);

function progressResults(file) {
    file.openAsync(Windows.Storage.FileAccessMode.read).done(function (stream) {
     var inputStream = stream.getInputStreamAt(0);
     var reader = new Windows.Storage.Streams.DataReader(inputStream);
     var size = stream.size;
     if (size > 0) {
          reader.loadAsync(size).then(function () {
          var b = reader.readBuffer(size);
          var s = Windows.Security.Cryptography.CryptographicBuffer.encodeToBase64String(b);
                var xhrOptions = {
                    type: 'post',
                    url: "http://servlet.domain.com:8080/Servlet/addImage",
                            headers: { "Content-type": "application/x-www-form-urlencoded" },
                            data: "fk_floor_id=" + currentFloorId + "&map=" + s
                 }
                 WinJS.xhr(xhrOptions);
           });

 });

通过WinSerS通过Java Servlet将图像存储到mysql数据库中

1 个答案: