搜狗浏览器用drag-and-drop实现图片预览技巧 使用drag-and-drop实现图片在搜狗浏览器中预览：通过jquery绑定事件，利用event对象的stoppropergation()和preventdefault()函数阻止浏览器默认行为。定义相关事件函数，使用html5的dataTransfer和FileReader特性，通过FileReader的readAsDataURL函数读取图片并获取其base64编码内容，将其赋给img标签的src，实现图片在指定区域预览的功能。下面是小编精心整理编写的关于“ 搜狗浏览器用drag-and-drop实现图片预览技巧 ”的详细教程，请大家仔细阅览学习：

搜狗浏览器用drag-and-drop实现图片预览技巧

今天尝试了搜狗浏览器的drag and drop api，它可以简便地将本地图片置入浏览器中进行预览。当我们把一张图片拖拽到浏览器时，浏览器通常会尝试打开一个新页面并加载该图片。然而，我期望的是，当我拖拽图片时，它能即刻放置到我预先设定的位置并迅速显示。要实现这一功能，需要运用javascript中event对象的两个函数：stoppropergation()和preventdefault()。前者能够阻止事件的冒泡，后者则可阻止浏览器的默认行为。

在此，我们定义一个ignoreDrag函数来达成上述目标：Html代码

接下来，利用jquery来绑定事件：Html代码。之所以最好使用jquery来绑定事件，是因为jquery对event对象进行了良好的封装，使得我们能够毫无顾虑地使用stopPropagation和preventDefault函数。

同时，还需定义dragover，dragenter事件函数：Html代码。这一点务必做到，否则依然无法阻止搜狗浏览器的默认行为。

最后，定义drop函数，也就是当我们将图片放置到指定位置时所触发的函数：Html代码。这个函数是整个功能的关键，这里运用了html5的一些特性，如dataTransfer和FileReader。

dataTransfer是drop事件的event参数的一个属性，它涵盖了dropped文件的一些信息。通过dataTransfer的files属性，可以获取到文件的数组，数组中的元素即为dropped文件对象，我们可以通过name，type，size分别获取文件的名字、类型和大小。而文件的内容则需要借助FileReader来读取，FileReader对象的实例拥有4个方法，其中3个用于读取文件，另一个用于中断读取。以下列出了这些方法以及它们的功能。需要注意的是，无论读取成功与否，函数都不会直接返回读取的结果，结果存储在result属性中：

readAsText：该方法有两个参数，第二个参数是文本的编码方式，默认值为UTF – 8。这个方法易于理解，它将文件以文本形式读取，读取的结果即为这个文本文件的内容。

readAsBinaryString：它把文件读取为二进制字符串，通常我们会将其传至后端，后端可通过这段字符串来存储文件。

readAsDataURL：此方法是示例程序中所用到的，它将文件读取为一段以data:开头的字符串，这段字符串的实质就是Data URI。Data URI是一种将小文件直接嵌入文档的方案，这里的小文件通常指图像与html等格式的文件。

此外，FileReader还包含一系列的事件模型：

再来介绍一下drag – and – drop的事件：

回到正题，通过FileReader的readAsDataURL函数读取图片，并在FileReader对象上定义onload函数。当图片加载完成后，通过event.target.result获取文件的base64编码内容。此前已经讲过，data类型的url可以直接写在img标签的src中，浏览器会进行解析，而无需从外部加载。利用这一特性，将获取到的图片内容赋予img标签的src，并将image对象添加到指定区域，便可实现所需功能。Html代码

以上便是使用drag – and – drop实现图片在搜狗浏览器中预览的全部内容。

关于《搜狗浏览器用drag-and-drop实现图片预览技巧》这篇文章的具体内容就介绍到这里，希望能对大家有所帮助。更多相关资讯和教程请关注 搜狗输入法!