滴管插件 jquery 中的图像预览答案

【问题标题】：Dropped image preview in dropper plugin jquery滴管插件 jquery 中的图像预览
【发布时间】：2015-05-11 14:22:56
【问题描述】：

我一直在尝试制作一个拖放图像字段以使用 ajax 上传到服务器。我浏览了一些 Jquery 插件，发现 Dropper 插件可以提供帮助。我试过这样。

HTML

 <div class="target"></div>
    <img>

 $(".target").dropper({
        action: "upload.php",

    }).on("start.dropper", onStart);
    function onStart(e, files){
    console.log(files);
        $('.dropper-dropzone').css("background-color", "yellow");

        $('img').attr({src:files[0].name});
    }

但我未能在 dropper 上预览丢弃的图像。 jsfiddle demo

【问题讨论】：

能否请您链接您正在使用的插件？尽管将图像附加到目标 div 可能就足够了，但为了适当地帮助你，一个小提琴将是惊人的。
@briosheje jsfiddle.net/tvshajeer/v8pqsczz
@briosheje $('img').attr({src:files[0].name}); 它不会从电脑读取文件。
当然没有，console.log(files) 什么也没返回。文档好像很差，我直接在github中期待了解这个东西是怎么工作的。
我认为你可以在上传完成后获取文件[0]，因此你应该尝试听“fileComplete.dropper”而不是“start.dropper”。

标签： javascript jquery upload drag-and-drop

【解决方案1】：

@tvshajeer 我做了一个图像预览功能，它同时支持 gecko 和 webkit 浏览器，如果没有，它会向您发送错误消息。

 image_preview(files[0].file).then(function(res){
        $('img').attr({src:res.data});
        });

查看我在小提琴上的回答： http://jsfiddle.net/v8pqsczz/1/

【讨论】：

我需要在该滴管字段中显示图像
哦，对不起，我有点糊涂了，等一下，我会尝试一次，是否可行