html - backbone.js 图片上传

Question

我正在使用nodecellar来更好地理解backbone.js，并且我遇到了一个问题，该问题在类似的问题中得到了详细的回答，但是，答案似乎对我不起作用:

我正在尝试做什么。

使用 Nodecellars wineview，我尝试利用拖放功能来上传图像。我已经记下了之前一个很好回答的问题，该问题基本上指出您必须禁用拖拽时的默认行为，因此我的 wine View 中有以下内容:

    events: {
        "change"        : "change",
        "click .save"   : "beforeSave",
        "click .delete" : "deleteWine",
        "drop #profile" : "dropHandler",
        "dragover #profile" : "dragover",
        'dragenter #profile' : 'alertMe'
    },

然后我的拖拽事件如下所示:

    dragover: function(event){
        console.log('drag over event called');
        event.preventDefault();
    },

这很好，并且可以正常工作，因为控制台日志在触发时会被调用。拖动处理程序如下所示:

    dropHandler: function (event) {
        event.stopPropagation();
        event.preventDefault();
        var e = event.originalEvent;
        e.dataTransfer.dropEffect = 'copy';
        this.pictureFile = e.dataTransfer.files[0];


        // Read the image file from the local file system and display it in the img tag
        var reader = new FileReader();
        reader.onloadend = function () {
            $('#profile').attr('src', reader.result);
            $('#picText').html('Picture added, select save to complete changes.')
        };
        reader.readAsDataURL(this.pictureFile);
    }

问题

代码可以工作，但是它不会上传图像或将模型中的详细信息保存到数据库中。所以一旦我离开然后再次选择 Wine ，图像就会恢复到原来的样子。

我对 HTML5 fileReader api 进行了一些研究，但没有太多关于它如何上传或上传到哪里的信息。

这就是我现在所处的位置，我正在向你们寻求有关如何确保模型保存图像网址并将图像上传到图片文件夹的建议。

解决这个问题的最佳方法是什么？ HTML 5 fileReader API 是最佳选择吗？

感谢您的反馈。

杰伊

Answer 1

您的函数 dropHandler 中缺少对模型的调用来设置要保存的图像的属性。