Question

我正在设置一个Knockout数组，其中一个人可以添加多个项目，每个项目都可以选择上传文件附件。我有按钮工作，我可以从DOM中的任何地方上传文件，但现在我需要知道点击了哪个上传按钮，所以我可以将文件信息附加到正确的数组项目。每个按钮都有自己的ID。有关我如何确定这一点的想法吗？

我不确定我是否可以使用uploadify执行jsFiddle。这是来源：

function PetOwner() {
    var self = this;
    self.FirstName = ko.observable('');
    self.MiddleName = ko.observable('');
    self.LastName = ko.observable('');
    self.Address = ko.observable('');
    self.City = ko.observable('Mankato');
    self.State = ko.observable('MN');
    self.ZipCode = ko.observable('56001');
    self.HomePhone = ko.observable('');
    self.WorkPhone = ko.observable('');
    self.MobilePhone = ko.observable('');
    self.Email = ko.observable('');
    self.Pets = ko.observableArray([new PetVM()]);

    self.Message = ko.observable('');

    // Add an additional pet to the application
    self.AddPet = function () {
        self.Pets.push(new PetVM());
        $("input[type=file]").uploadify(uploadifyConfig);
    };
}

// Individual pet view model (included in AnimalLicenseVM)
function PetVM() {
    var self = this;
    self.Type = ko.observable('');
    self.Name = ko.observable('');
    self.Sex = ko.observable('');
    self.Breed = ko.observable('');
    self.SpayedOrNeutered = ko.observable('');
    self.Age = ko.observable('');
    self.Color = ko.observable('');
    self.Marks = ko.observable('');
    self.RabiesTag = ko.observable('');
    self.DateOfVacc = ko.observable('');
    self.Expiration = ko.observable('');
    self.Microchip = ko.observable('');
    self.ImgUrl = ko.observable('');
}

var uploadifyConfig = {
    'swf': "/jquery/uploadify/uploadify.swf",
    'uploader': "/my/uploader/",
    'fileTypeDesc': 'Image Files',
    'fileTypeExts': '*.gif; *.jpg; *.png',
    'fileSizeLimit': '5MB',
    'buttonText': 'Choose Image',
    'scriptAccess': 'always',
    'uploadLimit': 1,
    'height': 20,
    'width': 100,
    //'buttonClass': 'uploadify-button',
    'onUploadSuccess': function (file, data, response) {
        var json = jQuery.parseJSON(data);
        if (json.IsSuccessful) {
            // TODO
        } else {
            alert(json.Message);
        }
    }
}

以下是相关的HTML。

<div class="pet-row" data-bind="foreach: Pets"> 
    <input class="required" type="text" title="Please include a pet name" data-bind="value: Name, uniqueName: true" />
    <input type="file" accept="image/*" class="fileUpload" data-bind="attr: {id: 'petFile-' + $index() }" />
    <input type="hidden" data-bind="value: ImgUrl, uniqueName: true" />
</div>

Answer 1

首先，我建议你将uploadify初始化移动到自定义绑定处理程序，因为目前你每次添加新宠物时都会初始化所有文件输入，并且这是一个不混合的好习惯使用视图模型进行DOM操作。所以你的自定义绑定处理程序看起来像这样：

(function(ko, $) {   
    ko.bindingHandlers.uploadify = {
        init: function(element, valueAccessor) {
            console.log($(element).attr('id') + ' is initialized');
            // Here should be your initialization of
            // uploadify, something like $(element).uploadify(valueAccessor());
        }
    }
})(ko, jQuery);

在标记中有类似的东西：

<input type="file" data-bind="click: $parent.signalUpload, attr: {'id': id}, uploadify: $parent.uploadifyConfig" />

我使用了简化版的视图模型，只是为了演示如何确定单击了哪个上传按钮：

function ViewModel() {
    var self = this;
    self.counter = 1;
    self.buttons = ko.observableArray([]);
    self.addNewItem = function() {
        self.buttons.push({id : self.counter, name: 'New item ' + self.counter++});
    };
    self.signalUpload = function(data) {
        console.log(data.name);
        return true;        
    };
    self.uploadifyConfig = {};
}

Working demo。

单击上传按钮时，控制台将记录当前项目的名称，该名称从data参数接收，并传递给点击回调。

Answer 2

@Ilya Luzyanin回答的唯一问题是Uploadify使用flash，因此点击事件无效。

然而，他确实让我走上了正确的道路。以下是我必须做的事情：

我独自离开了PetOwner()。我没有必要修改它。
我将我的Uploadify配置移至PetVM()并将其命名为self.UploadifyConfig，其中包含我的配置。
在我onUploadSuccess()的{{1}}方法中，我可以使用UploadifyConfig。
我确实使用了bindingHandler，但我必须使用self.ImgUrl，因为update在初始化时还没有id。

我的bindingHandler：

init

完成ko.bindingHandlers.uploadify = { update: function (element, valueAccessor) { if ($(element).attr('id') !== '') { $(element).uploadify(valueAccessor()); } } };

PetVM()

我希望将来能有所帮助。

多个Uploadify按钮，添加了一个文件？

2 个答案:

Working demo。