在JavaScript中克隆FileList对象以进行文件上传?

7

好的,这是我的情况。我有一个处理AJAX表单提交和其他相关同步和异步请求的JavaScript类。它收集数据,然后将这些数据设置为请求的临时存储,然后使用临时存储的数据进行请求。

例如:

  • 用户开始构建请求,将名字和姓氏放入表单中
  • 这些数据被放入一个对象变量SUBMITDATA中
  • 当请求被发出时,这些数据被克隆到另一个变量TEMPSUBMITDATA中
  • 一旦请求完成,用于发出请求的数据仍然可用(用于调试或其他目的)

这意味着,如果通过同一对象同时进行两个请求,则仍然可以访问用于进行这些请求的数据。

一切都按预期工作,直到我想要使用HTML5 FileList和FormData。虽然我可以相对容易地在JavaScript中克隆对象,但我无法克隆FileList。以下是一个例子:

<html>
<head>
    <script type="text/javascript">
        // This method is used to clone data objects
        function clone(object){
            if(object==null || typeof(object)!=='object'){
                return object;
            }
            // This line throws the error when FileList data is attempted to be cloned
            var tmp=object.constructor();
            for(var key in object){
                tmp[key]=clone(object[key]);
            }
            return tmp;
        }

        // This is an example data storage
        var submitData=new Object();
        submitData['some-data']='abc';

        function uploader(files){

            submitData['my-files']=files;

            // This clones the object and leads to the error because of FileList
            var tempSubmitData=clone(submitData);

            // HERE WOULD THE ACTUAL FORM SUBMIT HAPPEN
            // THIS EXAMPLE IS SHOWN FOR EASIER READING OF
            // THE PROBLEM EXPLAINED ABOVE

        }
    </script>
</head>
<body>
    <input type="file" name="myfile" value="" onchange="uploader(this.files);"/>
</body>

这让我想到了一个问题,我是否可以以任何方式克隆这种类型的数据,以便在请求完成之前将其存储?还是说真的唯一的方法是每次都创建一个新对象?

对我来说,新对象的解决方案并不好,因为我的类就像一个独立的应用程序,它有一个日志和其他有用的数据,可用于以后跟踪请求,并且在每种情况下都非常有效 - 直到我遇到HTML5 FileList和FormData使用。

任何帮助都将不胜感激!

1个回答

3
如果您使用的是 jQuery ,您可以使用 extend 方法来克隆一个对象,如下所示。
var clonedObject = $.extend(true,{},yourObject);

如果你不是,也许可以在这种情况下使用本地的Object.create()

var clonedObject = Object.create(yourObject);

最后一个不是副本(而是一个带有前一个对象属性和函数作为其原型的对象,如果我没有记错),但它很相似,我认为在这种情况下它会起作用。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接