將Json對象轉換爲文件對象

Question

我有一些java腳本功能。我正在使用輸入類型文件來選擇多個文件。在on-change事件中，我得到一個上傳的列表文件對象，然後我將這些對象存儲在一個隱藏的字段中。我想僅將這些對象作爲文件對象進行檢索。我怎麼能做到這一點？

我使用的代碼如下： -

<input type="file" multiple onchange="ehDisplayFileNames(event);" /> 

function ehDisplayFileNames(event) { 
    myFilesList = $('#' + event.target.id)[0]; // $('#chooseFiles')[0] gives the DOM element of the HTML Element as opposed to $('#store-input') which gives the jQuery object 

    $("#FilesToUpload").val(JSON.stringify(filesToUpload)); 
} 

function getAllFiles(){ 
    var filesToUpload = []; 
    filesToUpload = $.parseJSON($("#FilesToUpload").val()); // returns json objects instead i need file objects 
} 

謝謝你的幫助。

Answer 1

我一直在尋找類似的事情。我結束了使用所提供的解決方案這裏沒有辦法序列化API對象... https://stackoverflow.com/a/20535454/606810

這裏是另一個我發現對圖像/文件存儲有用的來源：https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/

希望它有幫助！

Answer 2

什麼是文件對象？你的意思是JS對JSON字符串？

如果是隻是用：

var myObject = jQuery.parseJSON(jsonString) ; 

，這將是一個對象

REWRITE ::

<input type="file" multiple onchange="ehDisplayFileNames(event);" /> 

ID添加到它

<input type="file" id="myFile" multiple onchange="ehDisplayFileNames(event);" /> 

那麼你有你的對象：

$("#myFile") 

Answer 3

這裏是你正在尋找的解決方案。 :-)

我假設你最終試圖做的是存儲值（可能有多個值）。另外，您可能試圖將其顯示給用戶，而不是顯示例如顯示「4個文件被選中」的默認文本。而且，正如您所指出的那樣，您希望能夠以編程方式操縱選定文件的列表。

問題在於，無法按照接近它的方式完成。這是因爲<input type="file" />元素受到保護，並且完整的文件路徑永遠不可訪問。因此，當您嘗試獲取值時，它們只會是文件名本身，而不是完整的文件路徑。例如，如果您從桌面上選擇了一個名爲dog.jpg的文件，瀏覽器就知道路徑是「file：\ c：\ windows \ users \ someuser \ desktop \ dog.jpg」，但是當您以編程方式嘗試檢索它時，你只會得到「dog.jpg」的價值。只有文件名，你不能重建完整的文件路徑，所以你不能對它們做任何有意義的事情，最終將它們發送給服務器進行處理。

因此，我爲您製作了一個使用單個文件上傳按鈕的解決方案。當用戶選擇一個文件時，它會根據需要添加另一個文件。另外，當選擇多個文件時，用戶可以根據需要選擇刪除它們中的任何一個。

您將按以下方式處理服務器上選定的文件...當表單數據發送到表單動作（在本例中爲「/ sendfiles」）時，您的服務器端代碼將處理傳入數據每個表單元素。在下面的例子中，類型文件（具有名稱屬性「myFiles」）的輸入元素將作爲數組發送，其中每個數組元素將包含用戶指定的每個文件數據。

jQuery代碼：

var getUploadFragment = function(){return $('<div class="files-cont"><input type="file" name="myfiles" class="files" /></div>')}; 
$(document).ready(function(){ 
    $("#my_form") 
     .append(getUploadFragment()) 
     .on("change", "input[name=myfiles]:last", function(){ 
      var lastFileContainer = $(".files-cont:last"); 
      lastFileContainer.after(getUploadFragment()); 
      if($(".files-cont").length > 1){ 
       lastFileContainer.append('[<a href="#" class="remove">Remove</a>]'); 
      } 
     }) 
     .on("click", ".remove", function(){ 
      if($(".files-cont").length > 1){ 
       $(this).parent().remove(); 
      }else{ 
       $(this).remove(); 
      } 
     }); 
    }); 

在體內定義的格式如下：

<form id="my_form" action="/sendfiles" method="post"></form>