Question

我正在使用分配给#fileupload控件的fileupload事件。当我将此代码放在静态页面中时，它运行良好，但我希望此控件加载到这样的javascript模板中：

<script type="text/template" id="propertyCollectionTemplate">
    <span id="firstUpload" class="btn btn-success fileinput-button">
    <i class="glyphicon glyphicon-plus"></i>
    <span>Select files...</span>
    <!-- The file input field used as target for the file upload widget -->
    <input id="fileupload" type="file" name="files[]" multiple>
    </span>    
</script>

在我的阶段中单击一个表格行时加载此模板

$('table.collection tbody tr').click(function (e) {
        e.preventDefault();
        var m = page.properties.get(this.id);
        page.showDetailDialog(m);

});

在我的showDetailDeialog函数中有这段代码：

showDetailDialog: function (m) {

        // show the modal dialog
        $('#propertyDetailDialog').modal({ show: true });
        // ... fecth all data for my other controls....

这是我在静态模式下绑定的上传事件：

 $('#fileupload').fileupload({
     url: page.url,
     dataType: 'json',
     done: function (e, data) {
         alert("hola");
         $.each(data.result.files, function (index, file) {
             $('#propertyimage').val("/propertylocator/upload/server/php/files/" + file.name);
         });
         $('#progress .progress-bar').css('width', 0 + '%');
     },
     progressall: function (e, data) {
         var progress = parseInt(data.loaded / data.total * 100, 10);
         $('#progress .progress-bar').css('width', progress + '%');
     }
 }).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');

如果我在加载模式弹出框的情况下将此事件复制并粘贴到Chrome控制台中，则此工作正常，但我不知道如何在加载模板后委派此事件。

Answer 1

有两种方法：

第一种方式：

最初启动fileupload（插入模板之前）并在更改时设置属性：

$('#fileupload .files').on('change', ':file', function (e) {
    $('#fileupload').fileupload('add', {
        fileInput: $(this)
    });
});

此处有更多详情：https://github.com/blueimp/jQuery-File-Upload/issues/1260

第二种方式：

在在回调中插入模板后绑定fileupload ，例如：

$('table.collection tbody tr').click(function (e) { // your 'click' code e.preventDefault(); var m = page.properties.get(this.id); page.showDetailDialog(m); // bind fileupload $('#fileupload').fileupload({ // ... }); });

此处有更多详情：jQuery File Upload not working when file input dynamically created

委托uploadfile事件来控制动态加载

1 个答案: