0

我在 Rails 3.2 应用程序中使用blueimp jquery-file-upload，通过jquery-fileupload-rails gem，上传多个图像文件。

我在上传模板中显示“取消”按钮。这些按钮成功取消了各自的文件上传。但是，他们也会重新加载页面，这样做会取消所有其他同时上传的文件（并提供糟糕的用户体验）。

我的 javascript 知识是有限的，我正在为文档而苦苦挣扎。使用jquery fileupload上传多个文件时，实现单个上传取消按钮的正确方法是什么。

    #Coffeescript

    jQuery ->
      if $("#new_asset").length
        $("#new_asset").fileupload 
          dataType: "script"
          add: (e, data) ->
            types = /(\.|\/)(jpe?g|png)$/i
            file = data.files[0]
            if types.test(file.type) || types.test(file.name)
              node = data.context = $(tmpl("template-upload", file))
              $('#progress-container').append(data.context)
              jqXHR = data.submit()
              node.find(".cancel").click (e) ->
                e.preventDefault()
                jqXHR.abort()
            else
              alert("#{file.name} is not a jpeg or png image file")
          progress: (e, data) ->
            if data.context
              progress = parseInt(data.loaded / data.total * 100, 10)
              data.context.find('.bar').css('width', progress + '%')
          stop: (e, data) ->
            $('.upload').hide()

# view 
<script id="template-upload" type="text/x-tmpl">  
  <tr class="upload">
    <td class="preview-cell">{%=o.preview%}</td>
    <td class="name-cell">{%=o.name%}</td>
    <td class="progress-cell"><div class="progress"><div class="bar" style="width: 0%;"></div></div></td>
    <td class="cancel-cell"><div class="cancel"><button class="btn info" remote="true"><i class="icon-trash"></i></button></div></td>
  </tr>
</script>

#application.js
    //= require jquery-fileupload
4

0 回答 0