javascript - 我的 pdf 文件一开始未被选中，仅在 Internet Explorer 中被选中

Question

我有一个输入文件来选择 pdf。选择 pdf 后，会打开文本框为每个 pdf 提供标题。

谷歌浏览器中一切正常。

在 Internet Explorer 中，我遇到了一个问题，我无法弄清楚原因以及如何解决。

我的问题:

在 Internet Explorer 中，当我第一次选择 pdf 时，没有任何反应，该 pdf 未被选中。

我需要选择其他 pdf，但不能是第一个选择的 pdf，当我选择其他 pdf 时它可以工作。

然后开始工作总是很好，但第一次选择 pdf 时我总是遇到这个错误。

您可以在此处查看我的问题的完整示例:http://jsfiddle.net/j5yeq/3/ (但要查看我的问题，您需要在 Internet Explorer 中进行测试)

我的 HTML:

<div class="galerry">               
    <div class="label" style="margin:0;">
        <span class="field">PDFS:</span>
        <input type="file" name="pdfs[]" class="j_galleryp" multiple="multiple" accept="application/pdf"  />
        <div class="j_gfalsep">Selecione quantos pdfs quiser</div>
        <img src="img/upload.png" class="j_gsendp" alt="Enviar Capa" title="Enviar Capa" style="margin:0 0 10px 10px;" />   
        <div class="label" id="teste"></div> 
    </div>
</div>

我的 jQuery:

$('.j_gsendp').click(function(){
    $('.j_galleryp').click().change(function(){
         var allFiles = this.files;  
         var numFiles = this.files.length;

        $('.j_gfalsep').animate({width:'500'}, 500, function(){
            $(this).html('You selected<strong>'+ numFiles +'</strong> files.'); 

            for(var i = 0; i<numFiles; i++) {
                var file = allFiles[i],
                    name = file.name;
                $('#test').append('<div class="message">Give a title to pdf <strong>'+name+':</strong></div><span>Title for pdf '+name+':</span><input type="text" name="title[]" value=""/><br><br>');
             } 
            });
              this.val('');
        });
    });
});

Answer 1

您的 jquery 代码有一些错误。我目前找不到 IE 的解决方案，但即使在 chrome 和 firefox 中，此代码也会从第二次开始上传 pdf 两次。我已经修改了jquery以使其正常工作。

$('.j_gsendp').click(function(){
    $('.j_galleryp').trigger('click');
});

$('.j_galleryp').change(function () {
    update();    
});

function update(){
    var input = $('.j_galleryp')[0];
    var allFiles = input.files;
    var numFiles = input.files.length;
    alert(numFiles);
    $('.j_gfalsep').animate({
        width: '400'
    }, 500, function () {
        $(this).html('You select <strong>' + numFiles + '</strong>files.');
        for (var i = 0; i < numFiles; i++) {
            var file = allFiles[i],
                name = file.name;
            $('#test').append('<span class="field">Title of pdf ' + name + ':</span><input type="text" name="title[]" value="' + name + '"/><br><br>');
        }
    });
}

使用此 jquery 代码，并且不要将事件处理程序绑定(bind)到其他事件处理程序内。您最终可能会多次绑定(bind)同一事件。

注意:我无法编辑该问题，因此我将此作为解决方案进行回答。