Question

我在当前项目中使用blueimp jquery文件上传。

我想复制现有的文件上传表。在新克隆上，我应该能够进行更改，这些更改不会影响第一个表。

表单可能包含一些上传到浏览器但未发送到服务器的文件。

正如此问题How to I preload existing files and display them in the blueimp upload table?中所示，我可以创建一个新表单并添加上传到服务器的照片，如下所示：

$(this).fileupload('option', 'done').call(this, null, {result: result});

但在我的情况下，照片不会发送到服务器，而是保存在现有的表格/表格中。

注意：我将在编辑视图中使用克隆。编辑视图有一个取消按钮。如果用户按下取消，我希望能够返回原始状态。

Answer 1

使用插件的“程序化文件上传”功能，我能够在新表中显示以前表格的文件和fileInputs，如下所示：

$('#fileupload').fileupload('add', {
    files: filesList,
    fileInput: $(this)
});

https://github.com/blueimp/jQuery-File-Upload/wiki/API#programmatic-file-upload https://github.com/blueimp/jQuery-File-Upload/wiki/API#programmatic-file-uploads-for-browsers-without-support-for-xhr-file-uploads

注意我可以使用插件的“fileuploadadded”事件从previos表中收集文件和fileInputs

$('#fileupload').bind('fileuploadadded', function (e, data) {/* ... */});

https://github.com/blueimp/jQuery-File-Upload/wiki/Options#additional-callback-options-for-the-ui-version

Answer 2

我们可能需要更多信息或更多代码才能真正提供帮助，但我的印象是您只是尝试创建第二个为用户添加功能的html表。用户可以进行更改，如果按下“确认”按钮，则编辑将应用于原始表。如果是这种情况，那么blueimp框架，甚至文件最终可能或可能不会上传到服务器的事实，都不应被视为此UI场景的因素。

Jquery有一个方法clone，它允许你复制一个表并将其附加到你想要的DOM。然而，这个新表将具有新功能的事实让我认为简单的克隆不是你想要的。最好使用其所有功能预先制作另一个“编辑表”并默认隐藏。然后，当用户想要编辑特定项目时，您将使用必要数据和show更新“编辑表”。如果用户点击“取消”，只需隐藏编辑表，如果用户点击“确认”隐藏编辑表并将编辑内容保存到该项目的js对象，则更新原始表格以匹配编辑。

我的答案是缺乏任何代码示例，因为这个最终产品的实际代码可能会逐个项目地大不相同。如果您想在jsFiddle上整理项目的简化版本，则可能对其他人有所帮助。

克隆现有的blueimp文件上传表

2 个答案: