javascript - 在滴管插件jquery中滴下图像预览

标签 javascript jquery upload drag-and-drop

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

HTML

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

JS

 $(".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});
    }

但我无法预览滴管上放置的图像。 jsfiddle demo

最佳答案

@tvshajeer 我已经制作了一个图像预览功能,支持 gecko 和 webkit 浏览器,如果不支持,它会向您发送错误消息。

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

看看我在 fiddle 上的回答: http://jsfiddle.net/v8pqsczz/1/

关于javascript - 在滴管插件jquery中滴下图像预览,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28958778/

相关文章:

javascript - Bing map 街景

javascript - 删除 sql 或 javascript 循环中的层次结构行

jquery-plugins - jQuery Form 插件 ajaxSubmit 回调计时

javascript - TypeError : window. 插件在phonegap中未定义

php - 从 View 中的表单读取文件输入时总是出错

javascript - Chrome 扩展 - 在页面上执行某些操作

javascript - 使用 React 和 ChartJS 进行图形流实时数据

javascript - 停止滚动条增长

reactjs - 如何使用React上传文件?

java - 使用 Java 通过 http 上传文件时获取上传速度百分比进度?