jQuery文件上传在rails点击按钮

Question

I am using jquery-fileupload plugin ( https://github.com/tors/jquery-fileupload-rails ) for showing file upload progress in my rails app. The following code below works fine.

In my index.html.erb i have

  <script id="template-upload" type="text/x-tmpl">
  <div class="upload">
    {%=o.name%}
    <div class="progress"><div class="bar" style="width: 0%;"></div></div>
  </div>
  </script>

In my projects js.coffee file i have

$('#import_form').fileupload
    dataType: "json"
    add: (e, data) ->
      data.context = $(tmpl("template-upload", data.files[0]))
      $('#import_form').append(data.context)
      data.submit()
    progress: (e, data) ->
      if data.context
        progress = parseInt(data.loaded / data.total * 100, 10)
        data.context.find('.bar').css('width', progress + '%')

But i want the upload to start when i click a button with id import_button instead of automatically. How can i achieve that ?

I tried doing the following, but i get the error message "data is undefined"

$('#import_form').fileupload
    dataType: "json"
    add: (e, data) ->       
      data.context = $(tmpl("template-upload", data.files[0]))
      $('#import_form').append(data.context)
      $("#import_button").off("click").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 + '%')

Please Help Thank You

Answer 1

One special callback is the add callback, as it provides a submit method for the data argument, that will start the file upload:

$('#fileupload').fileupload({
    add: function (e, data) {
       data.submit();
    }
});

It's from jQuery Plugin Wiki

So if you don't want to start the upload automatically use add callback, but don't call submit method.