H5如何做图片上传预览组件

php中世界最好的语言

发布时间：2018-03-10 16:19:42

2249人浏览过

来源于php中文网

原创

这次给大家带来h5如何做图片上传预览组件，h5做出图片上传预览组件的注意事项有哪些，下面就是实战案例，一起来看一下。

本人开发环境是windows10测试浏览器是chrome 和火狐
如遇不兼容浏览器的可尝试升级浏览器或Google一下 (～￣▽￣)～

1.文件的单选与多选

默认情况下属于单选,添加multiple属性后就允许多选文件了

2.获取文件对象

打开浏览器控制台然后选择文件看控制台变化

3.常用属性

在第二步中我们已经在控制台中看到了文件了,展开我们来看看有哪些常用属性吧

常用属性说明:
name-文件名
size-大小
type-文件类型
lastModified-最后修改日期

来来来我们尝试吧一些信息给输出到页面吧


    
        
        Document

4.限制文件大小与文件格式

说到图片的上传预览就不得不对上传的文件进行大小与格式的过滤
假设我们现在只允许上传jpg和png且文件大小为2mb以内很简单只许判断文件信息就可以了
如果你不清楚你要过滤的文件类型你可以在控制台查看文件类型然后复制粘贴
当然你也可以在input标签里设置 accept="image/*" 来实现只允许输入图片文件

佳可商务购物系统 2005 繁体版

在上版本的基础上修改了商品显示的形式，使得商品一目了然，修改了后台的部门功能BUG，数据库结构做了一定的调整，优化了页面的美观，补了上传组件的漏洞，增加了首页滚动新闻图片功能，将三级目录改为二级目录，适应消费者浏览该类商品后台帐号：admin密码：admin

下载

5.预览示例

通过动态创建img标签以及对img标签src属性绑定ObjectURL实现预览
示例

6.单图上传预览示例

示例

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关标签:

html5

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：js/css动态加载JS插件下一篇：JS对象与正则运算符实例详解

作者最新文章

最新php程序员工具箱 v1.0版本介绍

2018-07-11 12:56

使用jQuery替换节点元素（附代码）

2018-06-15 15:22

Angular CLI+Angular 5实战项目演示

2018-06-15 15:34

怎样对JS原型与原型链进行使用

2018-06-15 15:37

如何利用jquery做出文件上传加载

2018-06-15 15:39

如何在项目中使用jQuery内each方法

2018-06-15 15:40

怎样操作JS字符串与特殊字符

2018-06-15 15:42

怎样在项目中使用js绑定DOM事件

2018-06-15 15:46

怎样使用js解析数据库（附代码）

2018-06-15 15:49

vue.js路由失效如何处理

2018-06-15 15:55

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

go语言注释编码

本专题整合了go语言注释、注释规范等等内容，阅读专题下面的文章了解更多详细内容。

2026.01.31

go语言 math包

本专题整合了go语言math包相关内容，阅读专题下面的文章了解更多详细内容。

2026.01.31

go语言输入函数

本专题整合了go语言输入相关教程内容，阅读专题下面的文章了解更多详细内容。

2026.01.31

golang 循环遍历

本专题整合了golang循环遍历相关教程，阅读专题下面的文章了解更多详细内容。

2026.01.31

Golang人工智能合集

本专题整合了Golang人工智能相关内容，阅读专题下面的文章了解更多详细内容。

2026.01.31

2026赚钱平台入口大全

2026年最新赚钱平台入口汇总，涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道，助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

2026.01.31

高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源，涵盖都市言情、京味大院、军旅高干等经典题材，情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

2026.01.31

无需付费的漫画app大全

想找真正免费又无套路的漫画App？本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用，涵盖国漫、日漫、韩漫及经典老番，满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

2026.01.31

漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站？本合集精选2025-2026年热门平台，涵盖国漫、日漫、韩漫等多类型作品，支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

2026.01.31

热门下载

网站特效

网站源码

网站素材

前端模板