从类返回数据 [英] Returning data from a class

问题描述

我有一个文件放置类.用户放上图像(任意数量)，然后将其上传.

I have a file drop class. User drop images on (as many as they wish) and these are then uploaded.

我通过主班上课:

this.fileDrop = new lx.FileDrop();

这是课程:

(function(){
"use strict";

var FileDrop = function() {
    this.init();
};

p.init = function() {

    this._initEvents();

};

p._initEvents = function() {

    $(window).on('drop', this.onDrop.bind(this)).on('dragover', this.onDragOver);

};


p.onDrop = function(e) {

    e.preventDefault();
    var self = this;
    var files = e.originalEvent.dataTransfer.files;
    $.each(files, function(index, file){


        self.readFile(file).done(function(data) {

            //how to return the data?
        });

    });

};

p.onDragOver = function(e) {
    e.preventDefault();
};

p.readFile = function(file) {

    var fileReader = new FileReader();
    var deferred = $.Deferred();

    fileReader.onload = function(event) {

        deferred.resolve(event.target.result);
    };

    fileReader.onerror = function() {
        deferred.reject(this);
    };

    fileReader.readAsDataURL(file);

    return deferred.promise();

};


lx.FileDrop = FileDrop;
}(window));

我的问题涉及将图像数据返回到主类.我该如何退货?如何存储它-我希望将返回到数组中的所有内容存储在主类中.上传多张图片时，该如何工作.会进行某种推迟的工作吗?

My question concerns returning the image data to the main class. How can I return it? How can I store it - I wish to store everything that is returned into an array in the main class. How would this work when uploading multiple images. Would some sort of deferred work?

推荐答案

这样的事情如何?

var dfd = $.Deferred(),
    images = [];

$.each(files, function(index, file){

    self.readFile(file).done(function(data) {

        dfd.progress(data);
        images.push(data);
        if(files.length === ++index)
            dfd.resolve(images);

    }).fail(dfd.reject);
});

在任何您喜欢的地方处理延期对象:

Handle the deferred object where ever you like:

dfd.progress(function(file){
    console.log('file successfully uploaded', file);
}).done(function(images){
    console.log('all files successfully uploaded', images);
}).fail(function(){
    console.log('something went wrong while uploading an image');
});

另一个例子:

function FileDrop(){
    this.uploadCount = 0;
    this.images = [];
}

FileDrop.prototype.getImages = function(){

    var dfd = $.Deferred(),
        size = 3,
        that = this;

    for(var i = 0; i < size; i++){

        this.getImage(i*500, function(image){
            var dummyImage = $('<img/>'); 
                // should be 'image' from the callback in your case
            that.images.push(dummyImage);
            dfd.notify(dummyImage);
            if(that.uploadCount === size){
                dfd.resolve(that.images);
            }
        });
    }

    return dfd.promise();
};

FileDrop.prototype.getImage = function(timeout, callback){
    var that = this;
    setTimeout(function(){
        that.uploadCount++;
        callback();
    }, timeout);
};

var fd = new FileDrop();

fd.getImages().progress(function(image){
    console.log('progress', image);
}).done(function(imageArray){
    // preferred way: 
    //access the array when you know it's complete in the callback
    console.log('done', imageArray);
});

setTimeout(function(){
    // I think this is what you asked for, however, you must make an 
    // assumption when the images are completed, which is a bad idea
    console.log(fd.images);
}, 2000);

http://jsfiddle.net/Nm5vK/2/

这篇关于从类返回数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！