拖放实现了对浏览器的预览。

今天，我刚刚尝试了Chrome的拖放API，它可以很简单地预览浏览器中的本地图片。您的浏览器试图打开一个新页面并加载图片。现在，我不想让浏览器帮我拍摄图片。我希望我的照片拖放可以放在我的预定位置，迅速显示，需要两功能stoppropergation preventDefault（）和（）Javaｓｃｒｉｐｔ事件对象。前者将阻止事件的冒泡，和后者阻止浏览器的默认行为。

在这里，我们定义了一个函数来实现上述功能ignoredrag：

HTML代码

无功ignoredrag =功能（e）{
e.originalevent.stoppropagation（）；
E.originalEvent.preventDefault（）；
}
然后使用jQuery绑定事件。

HTML代码

$（#滴）
。绑定（'dragenter，DragEnter）
。绑定（'draver，德雷弗）
。绑定（放弃，放弃）；
这是更好地使用jQuery绑定事件，因为jQuery帮助我们包事件对象，这样我们可以使用preventDefault函数里面，毫无顾忌地。

同时，该德雷弗，DragEnter事件函数的定义

HTML代码

var德雷弗=功能（e）{
IgnoreDrag（E）；
}
VaR DragEnter =功能（e）{
IgnoreDrag（E）；
}
这必须定义，否则浏览器的默认行为仍然可以被阻止。

最后，定义了拖放函数，这是一个函数，当我们把图片放在指定的位置时触发。

HTML代码

函数（e）{
IgnoreDrag（E）；
VaR DT = e.originalevent.datatransfer；
var文件= dt.files；
VaR FR = FileReader（）；
fr.onload =功能（e）{
新图像（）；
image.src = e.target.result；
$（#下降）。追加（图像）
}
Fr.readAsDataURL（文件{ 0 }）；
}
这个功能是全功能的关键，在这里我们使用了HTML5的功能，数据传输和有。

数据传输是下降的事件的事件参数的属性，它包含下降文件的一些信息，阵列通过数据传输文件属性可以访问一个文件时，该数组中的元素是下降的文件对象，通过名称、类型、大小分别获得文件的名称、类型和大小的文件；内容将用FileReader读取的对象的一个实例，有4种方法，其中3个是用来读取文件，另一个中断阅读，下表列出了这些方法和他们的功能，注意，无论是阅读成功函数不会返回的结果存储在结果性的结果：
ReadAsText：这个方法有两个参数，其中二是文本的编码，以utf-8.this方法的默认值是很容易理解的，读文本文件，其结果是对文本文件的内容。

readasbinarystring：读取文件作为二进制字符串，我们通常将其发送到后端，和后端存储的文件通过这个字符串。

ReadAsDataURL：这是使用的例子程序的方法。此方法将文件读取为以数据开头的字符串：。这个字符串的本质是数据URI，数据URI是一种将小文件直接插入文档的方案。

FileReader也包含一系列的事件模型，如下表所示：

下面是拖放事件的附加介绍，如下所示：
回到主题，通过readasdataurl功能FileReader读取图像，并定义在有对象的onload函数，当图像被加载，获得通过event.target.result base64编码的文件，一个博客，有人告诉我网址的数据类型可以直接写在img标签的src，浏览器会解析而从外部负载的特点，图片的内容到IMG SRC标签，并添加图像对象的指定区域，可以实现所需的功能。

HTML代码
#滴{
宽度：500px；
身高：300px；
border: 1px solid灰色；
行高：300px；
文本对齐：中心；
溢出：自动；
}
无功ignoredrag =功能（e）{
e.originalevent.stoppropagation（）；
E.originalEvent.preventDefault（）；
}
var德雷弗=功能（e）{
IgnoreDrag（E）；
}
VaR DragEnter =功能（e）{
IgnoreDrag（E）；
}
函数（e）{
IgnoreDrag（E）；
VaR DT = e.originalevent.datatransfer；
var文件= dt.files；
VaR FR = FileReader（）；
fr.onload =功能（e）{
新图像（）；
image.src = e.target.result；
$（#下降）。追加（图像）
}
Fr.readAsDataURL（文件{ 0 }）；
}
$（函数（）{（））
$（#下降）。Bind（'dragenter，DragEnter）。Bind（'draver，德雷弗）。Bind（放弃，放弃）；
}）；

请把这张照片放在这儿！
以上内容是利用拖放来实现图片浏览器预览的全部内容。希望你能喜欢。