2014-02-04 2 views
2

Я следил за эпизодом Railscasts (http://railscasts.com/episodes/381-jquery-file-upload), чтобы загрузить файлы на моем сайте. Все работает так, как планировал учебник, но я хотел бы изменить одно и не добился успеха до сих пор.Использование загрузки файла jQuery с Rails

Я бы хотел, чтобы форма не была отправлена ​​до тех пор, пока они не нажали кнопку отправки. Прямо сейчас, и я верю в следующие js, форма отправляется, когда пользователь находит файл.

#Snippet 
data.submit() 


#Whole JS File 
jQuery -> 
    $('#new_update').fileupload 
    dataType: "script" 
    add: (e, data) -> 
     types = /(\.|\/)(gif|jpe?g|png)$/i 
     file = data.files[0] 
     if types.test(file.type) || types.test(file.name) 
     data.context = $(tmpl("template-upload", file)) 
     $('#new_update').append(data.context) 
     data.submit() 
     else 
     alert("#{file.name} is not a gif, 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 + '%') 

Я бы предпочел, чтобы удалить это и использовать кнопки вместо того, чтобы, потому что у меня есть текстовое поле, что я хочу пользователю заполнить перед отправкой формы.

Как приостановить загрузку изображения до тех пор, пока пользователь не нажмет кнопку?

Update

Полный JS файл

jQuery -> 
    $('#new_update').fileupload 
    dataType: "script" 
    add: (e, data) -> 
     types = /(\.|\/)(gif|jpe?g|png)$/i 
     file = data.files[0] 
     if types.test(file.type) || types.test(file.name) 
     data.context = $(tmpl("template-upload", file)) 
     $('#new_update').append(data.context) 
     else 
     alert("#{file.name} is not a gif, jpeg, or png image file") 

     $("#submt_button").on 'click', -> 
     data.submit() 

    progress: (e, data) -> 
     if data.context 
     progress = parseInt(data.loaded/data.total * 100, 10) 
     data.context.find('.bar').css('width', progress + '%') 

ответ

0

Глядя на JS, я заметил, есть data.submit(), удалить, что и он не должен представить форму

2

Как было сказано в первоначальном ответе, вы сможете достичь этого, удалив data.submit(), однако вам нужно будет обеспечить, чтобы событие «отправить» вызвало загрузку файла JQuery:

jQuery file upload: Is it possible to trigger upload with a submit button?

#Whole JS File 
jQuery -> 
    $('#new_update').fileupload 
    dataType: "script" 
    add: (e, data) -> 
     types = /(\.|\/)(gif|jpe?g|png)$/i 
     file = data.files[0] 
     if types.test(file.type) || types.test(file.name) 
     data.context = $(tmpl("template-upload", file)) 
     $('#new_update').append(data.context) 
     else 
     alert("#{file.name} is not a gif, jpeg, or png image file") 

     $("#submit_button").on 'click', (formEvent) -> 
     formEvent.preventDefault() 
     data.submit() 

    progress: (e, data) -> 
     if data.context 
     progress = parseInt(data.loaded/data.total * 100, 10) 
     data.context.find('.bar').css('width', progress + '%') 
+1

Спасибо за ответ. Это представляет форму, но файл больше не привязан к представлению формы. –

+0

Можете ли вы опубликовать скриншот? Вероятно, это связано с отступом –

+0

. Я покажу вам файл JS, который у меня есть, в обновлении моего исходного вопроса. –

Смежные вопросы