qq截图保存在哪里截图保存到哪了( 三 )

HTML5的File API提供了一个FileList的接口，它可以通过拖拽事件的e.dataTransfer.files来传递的文件信息，获取本地文件列表信息。
File API在HTML5规范中只是草案，在 W3C 草案中， File 对象只包含文件名、文件类型和文件大小等只读属性。但部分浏览器在草案之外提供了一个名为 FileReader 的对象，用以读取文件内容，并且可以监控读取状态，它提供的方法有： “readAsBinaryString” ， ”readAsDataURL” ， ”readAsText” ， ”abort” 等。
代码片段如下：
// dragenter$("#textarea").on("dragenter",function(e ){e .preventDefault();});// dragover$("#textarea").on("dragover",function(e ){e .preventDefault();});// drop$("#textarea").on("drop",function(e ){e .stopPropagation();e .preventDefault();varfiles =e .originalEvent .dataTransfer .files ;_ .each(files ,function(file ){if(!/^image*/.test(file .type )){return;}varfileReader =newFileReader();fileReader . =function(){//uploadFile(file);};fileReader .readAsDataURL(file );});});
拖拽上传过程中的几个关键点：
在drop事件触发后通过e.dataTransfer.files获取拖拽文件列表，在jQuery中是e.originalEvent.dataTransfer.files
拖拽上传仅支持图片，文件对象中file.type标识了文件类型。
由于可能是多图拖拽，所以可以遍历图片上传，这里用了Underscore的each方法。
这里用readAsDataURL读取文件内容为二进制文件，你还可以将其转换为方式上传，只是http协议里面存在对非二进制数据的上传大小限制为2M 。
上传的过程跟前面的方式相同，即：创建FormData对象并发起Ajax请求。
在drop事件触发后通过e.dataTransfer.files获取拖拽文件列表，在jQuery中是e.originalEvent.dataTransfer.files
拖拽上传仅支持图片，文件对象中file.type标识了文件类型。
由于可能是多图拖拽，所以可以遍历图片上传，这里用了Underscore的each方法。
这里用readAsDataURL读取文件内容为二进制文件，你还可以将其转换为方式上传，只是http协议里面存在对非二进制数据的上传大小限制为2M 。
上传的过程跟前面的方式相同，即：创建FormData对象并发起Ajax请求。
拍照上传可以是PC上的摄像头拍照上传也可以是手机等移动设备的拍照上传。手机上的拍照上传最常见就是我们使用微信发照片了。
手机实现拍照上传的代码：
<inputtype=fileaccept="image/*"><inputtype=fileaccept="video/*">
ios 有拍照、录像、选取本地图片功能，部分android只有选取本地图片功能。
上传与安全
上传文件时必须做好文件的安全性，除了前端必要的验证，如文件类型、后缀、大小等验证，重要的还是要在后台做安全策略。
这里我列举几个注意点：
后台需要进行文件类型、大小、来源等验证
定义一个.htaccess文件，只允许访问指定扩展名的文件。
将上传后的文件生成一个随机的文件名，并且加上此前生成的文件扩展名。
设置上传目录执行权限，避免不怀好意的人绕过如图片扩展名进行恶意攻击，拒绝脚本执行的可能性。
后台需要进行文件类型、大小、来源等验证
定义一个.htaccess文件，只允许访问指定扩展名的文件。
将上传后的文件生成一个随机的文件名，并且加上此前生成的文件扩展名。
设置上传目录执行权限，避免不怀好意的人绕过如图片扩展名进行恶意攻击，拒绝脚本执行的可能性。

qq截图保存在哪里 截图保存到哪了( 三 )

qq截图保存在哪里截图保存到哪了( 三 )