Question

我有一张表格：

<form>
    <input type="text" placeholder="name">
    <input id="picture" type="text" placeholder="/images/picture.png">
    <input type="file">
    <button type="submit">Save Changes</button>
</form>

现在我实际上正在使用bootstrap文件上传，表单要复杂得多，但出于演示目的，我将其剥离了。文件输入区域以两种不同的方式显示：

{{#if profile.picture}}
    Shows a version of the file upload that has the thumbnail of the picture.
    Also has a button to remove/change the picture.
{{else}}
    Shows a fresh upload because profile.picture from the data is empty.
{{/if}}

辅助

Template.profile.helpers({
    profile: function() {
        return Profile.findOne(id);
    }
});

所以你可以看到我是如何使用空格键来确定在页面中显示的内容。

事件

Template.profile.events({
    "change #picture-select input": function(event, template) {
        var filesList = event.currentTarget.files;
        if (filesList.length) {
            $('#picture').val("/images/" + filesList[0].name);
        } else {
            $('#picture').val("");
        }            
    }
});

所以我可以检索文件并将它们发送到我的方法来保存文件并更新文档。到目前为止没问题。

所以我面临的问题是，在表单提交上执行此操作的正确方法是什么，而不是在文件输入更改时立即执行此操作？

逻辑：

"submit form": function(event, template) {
    // ONLY perform file upload if filesList has a length ( as in the input for the file upload )
    // Also, best way to retrieve this? Like I did in the "change #picture-select input" function
});

我很想通过jquery使用传统方法来解析表单，但我有一种直觉，我应该使用某种类型的被动存储的true / false / filesList值，我可以使用events / rendered /轻松检索回调/某种方法。

我尝试在保存时查看event.target，但是嵌入/大量的数组是压倒性的，无法通过查看。

所以我想我的问题是，我应该怎么做：

"change #picture-select input": function(event, template) {});

是否存储了适当的数据来查询表单提交？

希望这一切都有意义......也许我太复杂了。

谢谢。

Answer 1

如果我没有弄错的话，你不需要一个反应变量。

你可以简单地在文件的顶部声明一个var，它只对文件是全局的（所以不用担心污染全局命名空间）。每当＆＃34;改变＆＃34;事件运行，将此var设置为event.currentTarget.files的值，然后您可以在＆＃34;提交＆＃34;事件就像任何正常变量一样。

Answer 2

我想通了这个答案：https://stackoverflow.com/a/26186384/1447679这恰好是我的另一个问题。无论出于何种原因，在这种情况下它都没有点击如何使用它。

Template.profile.created = function() {
    var files = [];
    this.filesList = new ReactiveVar(files);
};

然后，在输入更改的情况下，我可以获取该文件列表并更改reactiveVar。太酷了。

"change #picture-select input": function(event, template) {
    var filesList = event.currentTarget.files;
    if (filesList.length) {
        $('#picture').val("/images/" + filesList[0].name);
        template.filesList.set(filesList);
    } else {
        $('#picture').val("");
        template.filesList.set([]);
    }
});

最后，在表单提交上，我可以轻松访问它：

"submit form": function(event, template) {
    event.preventDefault();
    var form = event.target;
    var filesList = template.filesList.curValue;
    // so now I have it, filesList. 


},

Answer 3

我不知道我是否理解正确，如果不是忽略它，在上传文件后你想等待动作直到提交表格？如果是这样，可能会尝试收集您希望在某种会话中传递的数据。

使用Meteor，如何在表单提交时存储要检索的文件上传输入值？

3 个答案: