Question

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

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

我的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

如何使用jquery fileupload取消单个上传？

0 个答案: