生成表单的自定义上传

时间:2015-02-01 16:46:50

标签: javascript jquery html css

我有一个生成的表单,我无法直接向其添加HTML。 此表单有2个上传框,需要自定义样式。我已设法设置上传框的样式,但在测试我需要触发的功能时,不会触发。

澄清一下,这是我的代码和我尝试的内容:

html(即生成的autom):

<div class="controls">       
   <input class="span3" type="file" name="img1" id="img1" />
</div>

这是jQuery

$(document).on('change', 'input[type=file]', function() {
    var input = $(this),
        numFiles = input.get(0).files ? input.get(0).files.length : 1,
        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
    input.trigger('fileselect', [numFiles, label]);
});


$(document).ready(function() {    
    var fileinput = $('input[type=file]', this);
    var file_parent =  fileinput.parent(); // get the parent
    var fileinputhtml = file_parent.html(); // the HTML of the parent (which is input)

    file_parent.replaceWith('<span class="btn btn-file"><span class="btn-class btn-primary">Browse</span>'+fileinputhtml+'<span class="form-control"></span></span>');

    // The upload function has been triggerd
    fileinput.on('fileselect', function(event, numFiles, label) {

        console.log(label); // When the .replaceWith() is active, it doesn't show this log.

        var input = $(this).parent().find('.fileupload-filename');

        console.log(input.val(label));

        if( input.length ) {
          input.val( label );
        }

    });
});

也许它有一个简单的解决方案,但我似乎无法让这个工作。 你的帮助会得到很高的评价

0 个答案:

没有答案