Jquery：从Image对象创建图像预览（e.dataTransfer.files）

Question

到目前为止，我一直在尝试使用ajax上传图片，上传它我使用e.dataTansfer这样：

    uploadarea = document.getElementById("upload-area")
    uploadarea.addEventListener "dragenter", dragEnterLeave, false
    uploadarea.addEventListener "dragleave", dragEnterLeave, false
    uploadarea.addEventListener "dragover", ((e) ->
        e.stopPropagation()
        e.preventDefault()
        ok = e.dataTransfer and e.dataTransfer.types and e.dataTransfer.types.indexOf("Files") >= 0
        if ok 
            $("div#upload-area").text("Drop Image here").removeClass("not-available").addClass "over"
        else
            $("div#upload-area").text("Only File Allowed!").removeClass("over").addClass "not-available"
    )
    uploadarea.addEventListener "drop", ((e) ->
        e.stopPropagation()
        e.preventDefault()
        $("div#upload-area").removeClass().text "Drop Image here"
        image_file = e.dataTransfer.files[0]
        console.log image_file
        $("p.file-relative-path").text image_file.name //here I tried to get relative path to make the preview

)

我一直在尝试在上传之前创建预览图片。如何使用此代码实现它？