Как отменить отдельные загрузки с помощью jquery fileupload?

Я использую https://github.com/blueimp/jQuery-File-Upload в приложении Rails 3.2 через гем https://github.com/tors/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

0 ответов

Другие вопросы по тегам