BlueImp插件jQuery文件上传：如何使用fileInput选项，以便fileupload（）可以绑定新动态添加的输入？ [英] BlueImp Plugin jQuery File Upload : How to use the fileInput option so that fileupload() can bind new dynamically added inputs?

问题描述

我使用BlueImp插件上传我的文件。当用户点击添加文件时，用户动态添加新文件输入。
然后，当用户上传文件时，通过AJAX将其存储在我的网络文件夹中。

I use the BlueImp plugin to upload my files. A new file input is added dynamicaly by the user when he clicks on "Add a file".
Then, when the user uploads a file it is stored via AJAX in my web folder.

我的第一个想法是在生成的id上调用fileupload方法（例如： $（'＃files_0'）。fileupload（{// ajax processing} ）;

但是这个解决方案不起作用，因为加载页面时输入不存在。

所以我需要像 $（'＃files_0'）。live（'click，function（{fileupload（{// ajax processing}））}; 但这也不起作用。


所以我查看了文档和论坛，发现这是一个使用 fileInput 选项的解决方案。所以这里我做了什么，但那不行..任何帮助都会很棒！

My first idea was to call the fileupload method on the id generated (for example : $('#files_0').fileupload( { //ajax processing } );
But this solution is not working as the input does not exist when the page is loaded.

So I need something like $('#files_0').live('click, function ({ fileupload( { //ajax processing } ) )}; but that's not working also.

So I check the documentation and forums and found that were a solution using the fileInput option. So here what I've done, but that's not working..Any help would be great !

$('#myDiv').
    fileupload(
    {
        fileInput : $('#files_0),
        dataType: 'json',
        url:'{{ path('MyBundle_ajax_upload_picture') }}',
         progressall: function (e, data) 
         {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css(
                'width',
                progress + '%'
            );
          },
         add: function (e, data) 
         {
            $(this).fileupload('process', data).done(function () {
            data.submit();
            });
          },
         done: function (e, data) 
         {
            $.each(data.result.files, function (index, file) {
            $('<p/>').text(file.name).appendTo(document.body);
            });
         },
        always: function (e, data) 
        {
           console.log(data);
        }
    });

推荐答案

试试这个：

$('#myDiv').on('change', '#files_0', function (e) {
    var $fileupload = $(this);
    $fileupload.fileupload({
        url: {{ path('MyBundle_ajax_upload_picture') }},
        dataType: 'json'
    });

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

这篇关于BlueImp插件jQuery文件上传：如何使用fileInput选项，以便fileupload（）可以绑定新动态添加的输入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！