JavaScript图像上传功能，并从另一个功能调用它

Question

我有一个功能，只需点击一下按钮即可调用。单击该按钮后，我想调用图像上传功能，然后该图像应附加到我之前的功能

JavaScript代码

var gridster;
var $color_picker = $('#color_picker');

gridster = $(".gridster ul").gridster({
  widget_base_dimensions: [100, 100],
  widget_margins: [5, 5],
  helper: 'clone',
  resize: {
    enabled: true
  }
}).data('gridster');

$('.gridster').on("click", ".delete-button", function() {
  gridster.remove_widget($(this).parent());
});

$(".add-button").on("click", function() {

  // get selected color value
  var color = $color_picker.val();

  // build the widget, including a class for the selected color value
  var $widget = $('<li>', {
      'class': 'color_' + color
    })
    .append($('<button>', {
      'class': 'delete-button',
      'text': '-'
    }))
    .append($(Some image appending
      function()));

  // add widget to the grid
  gridster.add_widget($widget, 1, 1);

});



Image appending function() {

  should open a dialog box where user can upload image

  return image uploaded by user

}

Fiddle Link

我试过这个File Upload Code，但这似乎不适合我的情况

任何帮助都将非常感激。