Question

到目前为止，在Linux，OSX和Windows上的Chrome以及Windows上的IE上都可以上传，但在所有操作系统的Firefox中都无法上传。

问题似乎是没有事件被绑定到附件文件链接，这可以在使用Allan Jardine的Visual Event插件时看到。

然而，在在线演示http://plupload.com/example_custom.php中，可以使用插件看到绑定到click事件的事件。

知道为什么firefox在这种情况下失败了吗？

<form action="/notes" class="new_note" data-remote="true" id="new_note" method="post">
  <h3>Create Note</h3>
  <textarea cols="40" id="note_content" name="note[content]" rows="1"></textarea>
  <table>
    <tr>
      <td id='attachments'>
        <a href="#" id="attach-files" style="display:none">Add Attachment</a>
        <a href="#" id="upload-files" style="display:none">Upload Files</a>
      </td>
      <td id='button'>
        <input class="button button-green" disabled="disabled" id="note_submit" name="commit" type="submit" value="Post Note" />
      </td>
    </tr>
  </table>
</form>

的javascript

bind_plupload: function(url) {
  // plupload setup
  var uploader = new plupload.Uploader({
    runtimes : 'html5,flash,silverlight',
    browse_button : 'attach-files',
    container : 'attachments',
    max_file_size : '2mb',
    url : url,
    multipart: true,   
    flash_swf_url : '/javascripts/plugins/plupload/plupload.flash.swf',
    silverlight_xap_url : '/javascripts/plugins/plupload/plupload.silverlight.xap',
    filters : [
      {title : "Images", extensions : "jpg,gif,png"},
      {title : "Documents", extensions : "pdf,doc,docx,odt,txt,xls"}
    ]
  });

  // push files to server after file is selected
  if ($.browser.msie) {
    $("#upload-files").show().click(function() {
      uploader.start();
      return false;
    });
  }
  else {
    $("#upload-files").remove()
    $(":file").live("change", function(e) {
      uploader.start();
    });
  }

  uploader.bind('FilesAdded', function(up, files) {
    $.each(files, function(i, file) {
      var msg = sprintf("<div id=\"%s\">%s <b></b></div>", file.id, file.name);
      $('#attachments').append(msg);
    });
    up.refresh(); // Reposition Flash/Silverlight
  });

  uploader.bind('UploadProgress', function(up, file) {
    $('#' + file.id + " b").html(file.percent + "%");
  });

  uploader.bind('Error', function(up, err) {
    var msg = sprintf("<div>%s%s</div>", err.message, (err.file ? " "+err.file.name : ""))
    $('#attachments').append(msg);
    up.refresh(); // Reposition Flash/Silverlight
  });

  uploader.bind('FileUploaded', function(up, file) {
    $('#' + file.id + " b").html("100%");
  });

  uploader.init();
} // bind plupload

Answer 1

~~ID不应包含连字符。~~

~~尝试将ID更改为attach_files，upload_files等，看看是否有效。~~

没关系。（见评论。）

Answer 2

在Firefox中，当'attachments'id从元素移动到新嵌套的标签时，事情就有效了。

<td>
    <div id='attachments'>
        <a href="#" id="attach-files" style="display:none">Add Attachment</a>
        <a href="#" id="upload-files" style="display:none">Upload Files</a>
    </div>
</td>

我认为这会被视为一个错误。

Firefox中没有绑定附加文件链接的Click事件

2 个答案: