web前端-上传图片预览

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片上传预览</title><style>.pop .upload {position: relative;background: url('../images/pop-tjtp.png') no-repeat;width: 242px;height: 242px;margin: 0 auto;overflow: hidden;}.pop .upload input {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;}.pop .upload img {display: block;width: 242px;height: 242px;box-sizing: border-box;border: 1px solid #ecc6b5;}</style>
</head><body><!-- 上传图片 --><div class="pop"><div class="upload"><img id="img"><input type="file" onchange="showImg(this)"></div></div><!-- js部分 --><script src="./package/jquery-1.9.1.min.js"></script><script>function showImg(obj) {var file = $(obj)[0].files[0]; //获取文件信息var imgdata = '';if (file) {var reader = new FileReader(); //调用FileReaderreader.readAsDataURL(file); //将文件读取为 DataURL(base64)reader.onload = function (evt) { //读取操作完成时触发。$("#img").attr('src', evt.target.result) //将img标签的src绑定为DataURL};} else {alert("上传失败");}}</script>
</body></html>

点击/触摸：

效果：

Yozo撒花

web前端-上传图片预览相关推荐

通过java解码web前端直接预览海康威视摄像头
一:前言最近进行项目开发时遇到了需要前端直接调用摄像头,并直接进行播放的需求.原本计划通过海康威视官网的<WEB无插件开发包 V3.2>直接进行控制.交互,实现摄像头直接登录以及取流预览 ...
Java上传图片预览并通过后端压缩
1.前端上传图片预览 <%@ page language="java" contentType="text/html; charset=UTF-8" pa ...
anguarjs 上传图片预览_前端图片上传那些事儿
本文转自:掘金作者:chess 前言本文讲的图片上传,主要是针对上传头像的.大家都知道,上传头像一般都会分成以下 4 个步骤: 选择图片 -> 预览图片 -> 裁剪图片 -> 上 ...
web项目使用OpenOffice实现前端在线预览office文档(超详细)
超详细的OpenOffice实现前端在线预览office文档记录最近搞一个数字化共享平台,是一个java web项目,使用框架ssm,其中项目有一个需要在线预览PDF.excle.ppt.word文 ...
PDF.js + Vue 浏览器以只读方式打开PDF,后台返回文件流，前端实现预览pdf
如果你想光前端完成 office(xls,doc,ppt) 文件的预览,只能提供你这些库来使用 PDF http://mozilla.github.com/pdf.js/ XLS https://gi ...
java 根据预览图片上传_JavaSctit 利用FileReader和滤镜上传图片预览功能
filereader 对象允许web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 file或 blob对象指定要读取的文件或数据. 1.filereader接口的方法 fi ...
前端html预览,HTML5 上传前预览
下面是前端之家 f2er.com 通过网络收集整理的代码片段. 前端之家小编现在分享给大家,也给大家做个参考. HTML5上传图片预览请选择图片文件:JPG/GIF $("#file0&q ...
上传图片预览（服务器版）组件
preview v0.1.0 初始版本图片上传预览图片组件. 先来个效果看看: 使用步骤: 1.在web.xml中配置selvelt如下所示 <servlet><descripti ...
上传图片显示扫描效果html5,JS+HTML5实现上传图片预览效果完整实例【测试可用】...
本文实例讲述了JS+HTML5实现上传图片预览效果.分享给大家供大家参考,具体如下: 在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件 ...

web前端-上传图片预览

web前端-上传图片预览相关推荐

最新文章

热门文章