Question

我想从image_preview找到一种方法，将dom作为参数并获取数据。并且单独的image_preview.model()和image_preivew.on_chage()是事件处理程序

使image_preview可重复使用而不是内部硬编码
我认为我会在参数中调用image_preview传递dom，并将src作为响应返回，然后我可以使用repsponse执行类似追加...

  var image_preview = {
    on_change: function(wrap_dom, input_dom) {
      $(wrap_dom).on('change', input_dom, function(event) {  // I have to use on change because there are possible the `input dom` is new append... 
        var el_obj = $(this)[0];
        var form_data = new FormData();

        var file_length = el_obj.files.length;
        for (var i = 0; i < file_length; i++) {
          form_data.append("file[]", el_obj.files[i]);
        }

        image_preview.model(form_data).done(function(response) {
          // console.log(response); // this is work
          return response;
        });
      });
    },
    model: function(form_data) {
      return $.ajax({
        url: uri_public+'/admin/ajax/preview_file',
        type: 'POST',
        data: form_data,
        processData: false,
        contentType: false,
        // async: false
      });
    }
  }


  var app_thumbnail = {
    preview_controller: function() {
      var wrap_dom = '.thumbnail';
      var input_dom = '.upload-form input';
      var result = image_preview.on_change(wrap_dom, input_dom);
      // pass result to render view like append dom....
    },
    render: function() {

    },
  }

  app_thumbnail.preview_controller();

Answer 1

这是您可以做的最简单的事情：

  var image_preview = {
    on_change: function(wrap_dom, input_dom) {
      $(wrap_dom).on('change', input_dom, function(event) {
        var el_obj = $(this)[0];
        var form_data = new FormData();

        var file_length = el_obj.files.length;
        for (var i = 0; i < file_length; i++) {
          form_data.append("file[]", el_obj.files[i]);
        }

        image_preview.model(form_data).done(function(response) {
          app_thumbnail.preview_controller(response);
        });
      });
    },
    model: function(form_data) {
      return $.ajax({
        url: uri_public+'/admin/ajax/preview_file',
        type: 'POST',
        data: form_data,
        processData: false,
        contentType: false,
        // async: false
      });
    }
  }

  var app_thumbnail = {
    preview_controller: function(response) {
      var wrap_dom = '.thumbnail';
      var input_dom = '.upload-form input';
      var result = response;
    }
  }

  // If you want to initialize it.
  // image_preview.on_change(..., ...);

oo练习，使功能不硬编码，绑定更改后返回数据

1 个答案: