正在读取Windows Metro javascript应用程序中的文件

Reading file in Windows Metro javascript app

本文关键字：应用程序 文件 javascript Metro 读取 Windows      更新时间：2023-10-16

这是读取文件选择器所选文件内容的正确方法吗？我需要读取图像数据，以便将其发送到我的Windows Metro Javascript应用程序中的Web服务。我使用带有回调的readFile函数，该函数返回evt参数，然后使用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>

提前谢谢。

更好的解决方案是：

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);
           });
 });

这里有几个问题：

  1. 将文件内容以文本形式读取并发送到Web服务不是一个好主意
  2. 使用input type="file"不会在用于拾取图像的应用程序中提供原生外观和感觉

相反，在这个msdn遍历的行上拾取和预览图像是很好的。除此之外，上传WinJS.xhr调用看起来也没有什么不同。

还有其他可能与场景相关的要求，例如向web服务显示上传图像的预览。在将图像上传到服务时，我必须考虑我们的winjs应用程序的许多其他要求。这篇文章可能与你列出代码和全面思考这一点有关。

相关文章：