Javascript 无法使用FileReader操作元素

我有一把小提琴要看。 基本上，我试图实现的是允许用户上传图片，并能够在页面上移动它。当我使用Chrome调试器时，我可以看到它成功地用jQuery的第27行和第28行更新了内联样式，但是图像没有正确响应。有什么想法吗？提前谢谢

---

您需要在

img#pic

标签中添加css

position:relative


您需要在
img#pic
标签中添加css
position:relative


使用reader.result而不是e.target.resultUse reader.result而不是e.target.resultFantastic。我知道我忘记了一些简单的事情。谢谢好极了我知道我忘记了一些简单的事情。谢谢
        $(document).ready(function(){
        $(function(){
            $("#file").change(function(){
                var reader = new FileReader();
                reader.onload = function(e){
                    $('#pic').attr("style", "height:200; width: 300;");
                    $('#pic').attr('src', e.target.result);
                }
                reader.readAsDataURL(this.files[0]);
            });
        });
    }); 

    $(document).ready(function(){
        $("#pic").mousedown(function(){
            $(this).data("dragging", true);
        });

        $("#pic").mouseup(function(){
            $(this).data("dragging", false);
        });
        $("#pic").mousemove(function(e) {
            if (!$(this).data("dragging"))
                return;
            $(this).css("left", e.clientX - $(this).width()/2);
            $(this).css("top", e.clientY - $(this).height()/2);
        });
    });

img#pic {
   position: relative;
}