在Windows Metro中讀取文件javascript app

這是正確讀取filepicker所選文件內容的方式嗎？我需要讀取圖像數據才能將其發送到我的Windows Metro Javascript應用程序中的web服務。我使用ReadFile函數與返回EVT參數的回調，然後使用encodeURIComponent方法（evt.target.result）：在Windows Metro中讀取文件javascript app

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>

提前致謝。

來源

2013-11-26 Simon

更好的解決方案是：

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

});

來源

2013-12-02 21:22:06 Simon

這裏有幾個問題：

讀文件作爲文本的內容和發送到Web服務是不是一個好主意。
使用input type="file"不會在應用中提供原生的外觀和風格來選擇圖像。

取而代之的是選擇和預覽這個msdn walk through行的圖像是很好的。與此同時，上傳WinJS.xhr調用看起來會有所不同。

在場景中還可能有其他相關的要求，例如顯示上傳圖像到Web服務的預覽。將圖像上傳到服務時，我必須考慮我們的winjs應用程序的許多其他要求。 This post可能與您的代碼清單相關，並從整體上考慮這一點。

來源

2013-11-27 08:01:44 Sushil

謝謝您的回答，它已經幫助我瞭解一些更多的方法。但爲什麼將圖像作爲文本發送到Web服務（WS將其存儲爲數據庫中的斑點）是一個糟糕的主意？（第二篇）文章的作者使用MSApp.createFileFromStorageFile（file）;創建一個文件併發送它。但是這是metro應用程序中的一個目標文件，它沒有可以存儲在數據庫中的內容數據，或者我在這裏錯了嗎？ – Simon

當發送圖像爲文本時，base64編碼需要不丟失數據。 [這個問題]（http://stackoverflow.com/questions/11402329/base64-encoded-image-size）給出了存儲n個發送圖像的數據abt base64的缺點。數據將通過xhr作爲[blob有效載荷]（http://msdn.microsoft.com/en-us/library/windows/apps/ms536736.aspx）發送。 Web服務器將可以讀取http請求二進制有效負載。例如在nodejs服務器中，二進制數據以[Buffer]（http://nodejs.org/api/buffer.html）的形式提供。 – Sushil

關於保存到數據庫，請檢查您的數據庫文檔。 sql server支持[blob數據類型]（http://msdn.microsoft.com/en-us/library/0t1k839z（v = vs.80）.aspx） – Sushil

在Windows Metro中讀取文件javascript app

回答

相關問題