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

什么是文件对象？你的意思是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 2

以下是您正在寻找的解决方案。： - ）

我假设你最终要做的是存储值（其中可能存在倍数）。此外，您可能正在尝试将它们显示给用户，而不是显示例如“选择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>

Answer 3

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

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

希望它有所帮助！

将Json对象转换为文件Object

3 个答案: