Как отменить отдельные загрузки с помощью 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