将 Json 对象转换为文件对象答案

【问题标题】：Convert a Json Object to a file Object将 Json 对象转换为文件对象
【发布时间】：2014-03-19 22:06:09
【问题描述】：

我有一些 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
}

感谢您的帮助。

【问题讨论】：

什么是文件对象？你的意思是 JSON 字符串到 JS 对象？如果是，请使用： var myObject = jQuery.parseJSON( jsonString ) ;它将是一个对象
你知道developer.mozilla.org/en-US/docs/Web/API/FileReader吗？
@user3328402：你的意思是<input> 元素？
是文件类型的输入元素

标签： javascript jquery json

【解决方案1】：

我一直在寻找类似的东西。我最终使用了此处提供的解决方案，因为无法序列化 API 对象...https://stackoverflow.com/a/20535454/606810

这是我发现对图像/文件存储有用的另一个来源：https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/

希望对你有帮助！

【讨论】：

【解决方案2】：

什么是文件对象？你的意思是 JSON 字符串到 JS 对象？

如果是，请使用：

var myObject = jQuery.parseJSON( jsonString ) ;

它将是一个对象

重写::

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

为其添加 ID

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

那么你就有了你的对象：

$("#myFile")

【讨论】：

是的，我知道这种方法。但是我正在更改此文件对象，然后将更改后的部分保存到隐藏文件中。我怎样才能将它作为文件对象检索回来？
在你对它做任何事情之后再拿它。您无法将对象保存到隐藏字段。您将它保存在一个变量中并根据需要使用它
这是一个只读属性，不能更改。随着范围的变化，一旦改变，我就无法再次获得它。
到底发生了什么变化？文件输入的值？做另一个隐藏变量并将其发送到那里：<input type="hidden" id="storeHere" value="" /> 并做：$('#storeHere').val($('#myFile').val());
我想将它恢复为文件对象。因为我的一种方法需要它作为文件对象。

【解决方案3】：

这是您正在寻找的解决方案。 :-)

我假设您最终要做的是存储值（其中可能有多个值）。此外，您可能会尝试将它们显示给用户，而不是显示默认文本，例如“选择 4 个文件”。而且，正如您所指出的，您希望能够以编程方式操作选定文件的列表。

问题是无法以您接近它的方式完成。那是因为<input type="file" /> 元素受到保护，并且永远无法访问完整的文件路径。因此，当您尝试获取值时，它们只是文件名本身，而不是完整的文件路径。例如，如果您从桌面选择了一个名为 dog.jpg 的文件，则浏览器知道路径是“file:\c:\windows\users\someuser\desktop\dog.jpg”，但是当您以编程方式尝试检索它时 -你只会得到值“dog.jpg”。仅使用文件名，您无法重建完整的文件路径，因此您无法对它们做任何有意义的事情，最终将它们发送给服务器处理。

因此，我为您设计了一个使用单个文件上传按钮的解决方案。当用户选择一个文件时，它会根据需要添加另一个文件。 In addition, when there are more than one files selected, the user can choose to remove any of them as needed.

您将通过以下方式处理服务器上的选定文件...当表单数据发送到表单操作（在本例中为“/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>

【讨论】：