Question

我有一个网络应用程序，允许用户双击DIV /占位符，这反过来会调出浏览器上传对话框。选择图像后，我使用FileReader读取图像，并将其显示在指定的占位符中。

我想为此添加一个拖放组件。我查看了Dropzone和其他脚本，但它们似乎都做得太多了。我只需要能够在指定区域中删除图像，并以某种方式挂钩浏览器的基本文件上传，就好像图像是按传统意义上传的。然后，我可以像往常一样将它传递给我的其余代码。

以下是我当前代码的片段：

// This is within an updateImage() function which gets triggered by a user
// double-clicking a Div / image placeholder

    this.file = $('<input type="file" />');
    this.file.trigger('click');

    //keep a reference to this so that closures can use it
    var that = this;
    this.file.on('change', function(event) {
        var f = event.target.files[0];
        var reader = new FileReader();
        reader.onload = function(inner_event) {
            var image = new Image();
            image.onload = function() {
                // Get all the Image info
                that.user_image = inner_event.target.result;

然后经过一些处理和存储数据/ CSS ...

reader.readAsDataURL(f);

Answer 1

这是我提出的解决方案。基本上，我访问dblclick和drop事件：

// TheImageElement is a placeholder DIV

this.dom_element.on('drop', function(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    that.updateImage(evt.originalEvent.dataTransfer.files[0]);
});


this.dom_element.on('dblclick', function() {
    that.handleImageUpload();
});

dblclick事件调用handleImageUpload()会触发文件<input>：

this.ImageElement.prototype.handleImageUpload = function() {
    this.file = $('<input type="file" />');
    this.file.trigger('click');

    //keep a reference to this so that closures can use it
    var that = this;
    this.file.on('change', function(event) {
        that.updateImage(event.target.files[0]);
    });
}

现在，两个方法都调用updateImage（）方法，并传递File：

this.ImageElement.prototype.updateImage = function(theFile) {
    new_upload = true;
    // keep a reference to this so that closures can use it
    var that = this;
    var f = theFile;
    var reader = new FileReader();
    reader.onload = function(inner_event) {
        var image = new Image();
        image.onload = function() {

              // Some processing here
        }
     }
     reader.readAsDataURL(f);
}

现在，传统的双击和拖放操作都可以使用相同的代码来处理文件上传。

拖动并删除文件上传

1 个答案: