简单的做一个图片上传预览(web前端)
在做web项目很多的时候图片都是避免不了的,所以操作图片就成了一个相对比较棘手的问题,其实也不是说很麻烦,只是说上传然后直接预览的过程很恶心,今天简单的做一个处理。
效果预览:
代码:
<!DOCTYPE html>
<html>
<head>
<title>HTML5上传图片预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<h3>请选择图片文件:JPG/GIF</h3>
<form name="form0" id="form0">
<input type="file" name="file0" id="file0" multiple="multiple" /><br> <img src="" id="img0" style="width: 20rem;height: 15rem;">
</form>
<script>
$("#file0").change(function(){ var objUrl = getObjectURL(this.files[0]) ;//获取文件信息 console.log("objUrl = "+objUrl); if (objUrl) { $("#img0").attr("src", objUrl); }
}) ;
function getObjectURL(file) { var url = null; if (window.createObjectURL!=undefined) { url = window.createObjectURL(file) ; } else if (window.URL!=undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file) ; } else if (window.webkitURL!=undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file) ; } return url ; } </script>
</body>
</html>
简单的做一个图片上传预览(web前端)相关推荐
- 简单快捷的实现图片上传预览效果
简单快捷的实现图片上传预览效果 如何简单快捷的实现图片上传预览效果,想必这是绝大多数的c#新手遇到的一个小难题. 我学习c#也有一年的时间了,就把一个简单的方法给大家看看. 如下: readAsDat ...
- JAVA实现一个图片上传预览功能
这个小项目主要使用java实现了一个简单的图片上传预览功能,废话不多说,先上实现成果 ^ _ ^
- js实现图片上传预览及进度条
js实现图片上传预览及进度条 原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
- ASP.NET工作笔记之一:图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
- Angular6自定义指令实现多图片上传预览
在做移动端开发多时候经常会遇到用户图片上传的需求,有单图片上传预览的需求,也有多图片上传预览的需求.自己刚遇到这个需求的时候有踩到各种个样到坑.经过多番尝试,下面将本人成功的一个案例分享出来(公司对外 ...
- JavaScript 图片上传预览效果
图片上传预览是一种在图片上传之前对图片进行本地预览的技术. 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验. 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难. 不过群众的智慧 ...
- 模拟QQ心情图片上传预览
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
- html 手机qq图片预览,模拟QQ心情图片上传预览示例
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
- 图片上传预览的几种方式,了解下?
图片上传预览场景基本处处可见,朋友圈发动态配图,身份验证及头像更新,莫过如斯. 原由 最近在研究twitter PC网站的时候,在个人中心的主页,设置个人的背景图的时候,发现twitter有个非常好的 ...
最新文章
- 腾讯首位17级杰出科学家诞生:腾讯AI Lab负责人张正友
- 高级bash脚本编程(1)
- Matlab实现字符串分割
- HID接口设备-硬件要求
- C++11新特性探究:显式override和final
- Javascript 中 Array.push 要比 Array.concat 快 945 倍
- Bootstrap3 全局样式
- 【论文笔记】EMNLP2019: 基于层次多图卷积网络的实体类型分类
- c 如何调用c语言程序设计,c语言程序设计_函数调用c语言程序设计_函数调用.ppt...
- 博士毕业最高201万!华为顶级薪酬招“天才少年”
- 2022爱分析·虚拟化活动实践报告
- [ 隧道技术 ] cpolar 工具详解之将内网端口映射到公网
- u盘插linux系统不显示,u盘在我的电脑显示不出来怎么办
- c++ placement new
- ffmpeg为视频添加特效
- stack_push、pop
- 工欲善其事 必先利其器-——Idea使用(1)-初次识别
- [电表窃电方法] 偷电方法-电表控制器
- java反序列化浅探
- Android 保存号码至已有联系人,新建联系人,读取手机联系人