h5本地预览上传的图片或视频

justjavac 发布于2019-08-26 10:29 / 843人阅读

摘要：通过中的事件拿到的不能直接在本地预览选择的图片或者视频，可以通过以下两种方式预览本地图片，不用上传到服务器就可以本地预览。

通过中的change事件拿到的file不能直接在本地预览选择的图片或者视频，可以通过以下两种方式预览本地图片，不用上传到服务器就可以本地预览。

createObjectURL

这种方式生成的文件地址可以预览图片和视频




    
    Title

本地预览的视频地址最终结果 blob格式

FileReader

var reader = new FileReader();

reader.onload =function(e){
    aImg.src = e.target.result;
}
reader.readAsDataURL(file); // file是指选择的文件 files[0]

本地预览的视频地址最终结果 base64格式

按照前辈们的说法，creatObjectURL可以有更好的性能，或许是浏览器自带接口的原因, 可以处理的更快。

GPU云服务器云服务器图片本地预览预览本地图片 php 预览上传图片上传图片预览php

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106247.html

H5 canvas生成图片并上传文件转成PDF下载canvas文字排版

摘要：将预览的图片上传，后端生成，在管理系统中下载。技术要点文字排版设置指定背景颜色引入外部字体绘制文字图片将生成的图片转成上传这里根据后端协商，此处后端要求将图片生成，并点击批量下载实现步骤文字排版在一般容器中，如果要实现文字的排版很容易。最近遇到一个业务需求，在小程序端定制预览功能，并在预览的图片中使用指定的外部字体。将预览的图片上传OSS，后端生成PDF，在管理系统中下载。但是………...

canopus4u 2019-08-23 18:24 评论0 收藏0
H5 Video 使用网络地址时获取其大小和第一帧图片

摘要：问题描述某一天接了个需求，要求前端获取视频文件的大小时长以及第一帧图片传给后端服务器存储，这样有两种情况，一种是通过上传本地视频文件，一种是给出视频的网络地址，将其直接赋值给标签的属性。问题描述某一天接了个需求，要求前端获取视频文件的大小、时长以及第一帧图片传给后端服务器存储，这样有两种情况，一种是通过input上传本地视频文件，一种是给出视频的网络地址，将其直接赋值给video标...

NoraXie 2019-08-22 16:33 评论0 收藏0
关于前端上传文件全面基础扫盲贴(六) ----- 图片上传,旋转,重绘,预览等实战(附DEMO)

摘要：二编辑合成照片使用编辑压缩重设尺寸比例转成输出预览。三保存并上传照片提交数据到服务器需要服务器支持我跳过了。数据主要来自拍摄的照片，多用于移动端开发，端也会用到，此插件兼容主流浏览器，以下不支持。系列文章关于前端上传文件全面基础扫盲贴(零)关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest关于前端上传文件全面基础扫盲贴(二) ----- File关于前端...

lmxdawn 2019-08-26 10:31 评论0 收藏0