HTML5上传图片预览功能
HTML代码如下:
<!--
date: 2018-04-27 14:41:35
author: 王召波
descride: HTML5上传图片预览功能
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5上传图片预览功能</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<style type="text/css">
#feedback{
min-height: 200px;
text-align: center;
border: 1px solid silver;
border-radius: 3px;
}
#feedback img{
margin:3px 10px;
border: 1px solid silver;
border-radius:3px;
padding: 6px;
width: 35%;
height: 85%;
}
#feedback p{
font-family: "微软雅黑";
line-height: 120px;
color: #ccc;
}
.file {
position: relative;
display: inline-block;
border: 1px solid #1ab294;
border-radius: 4px;
padding: 8px 16px;
overflow: hidden;
color: #fff;
text-decoration: none;
text-indent: 0;
line-height: 20px;
color: #1ab294;
} .file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.box{
margin-top: 10px;
text-align: center;
}
.box a{
margin-left: 10px;
}
</style>
</head>
<body>
<!-- 响应返回数据容器 -->
<div id="feedback">
</div>
<div class="box">
<a href="javascript:;" class="file">选择图片
<input type="file" id="inputfile" name="" class="photo">
</a>
<a href="javascript:;" class="file close">重新选择
<input type="buttom" class="photo">
</a>
</div>
<script type="text/javascript">
$(function () {
$("#inputfile").change(function (e) {
var imgURL = '';
var file = e.target.files[0] || e.dataTransfer.files[0];
if (file) {
try{
try{
imgURL = file.getAsDataURL();
}catch(e){
imgURL = window.URL.createObjectURL(file);
}
}catch(e){
var reader = new FileReader();
reader.onload = function () {
imgURL = this.result;
}
reader.readAsDataURL(file);
}
$("#feedback").append('<img src="'+imgURL+'">');;
}
});
})
</script>
</body>
</html>
效果图:
HTML5上传图片预览功能的更多相关文章
- HTML5上传图片预览
<!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...
- JS 上传图片 + 预览功能（一）
JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...
- 通过HTML5 FileReader实现上传图片预览功能
原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...
- 【小月博客】用HTML5的File API做上传图片预览功能
前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...
- HTML5 上传图片预览
html5出现之前如果需要上传图片预览 一般都是先上传到服务器然后远程预览 html5出现之后 有个filereader 解决了这问题 //选中图片之后 $("#fileAddPic&q ...
- 关于H5里的API，上传图片预览功能
FileReader:读取本地图片文件并显示 写在开头 之前公司要求做一个H5页面,功能是照相和选择相册相片,并且能在屏幕上预览.然后我就傻里吧唧的各种找插件,因为有些插件不适配手机的型号,安卓机基本 ...
- HTML5拖放事件-上传图片预览功能
主要用到的知识点有dataTransfer对象和FileReader(读取文件信息) 1.创建简单的HTML标签: <body> <div id="box"> ...
- h5拖放-上传图片预览功能
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- JS 上传图片 + 预览功能（二）
简单粗暴 直接进入主题: Html <script src="../js/jquery-2.1.1.min.js"></script> <style& ...
随机推荐
- postgresql 触发器 更新操作
1 前言 功能需求:当一张表格某个字段变化,另一张表某个字段写入该值 2 代码 CREATE OR REPLACE FUNCTION "public"."synStatu ...
- [C]内存管理、内存泄露、堆栈
原文地址:https://www.cnblogs.com/youthshouting/p/4280543.html,转载请注明源地址. 1.内存分配区间: 对于一个C语言程序而言,内存 ...
- 玩转EhCache之最简单的缓存框架
二.主要特性 快速: 简单: 多种缓存策略: 缓存数据有两级:内存和磁盘,因此无需担心容量问题: 缓存数据会在虚拟机重启的过程中写入磁盘: 可以通过 RMI.可插入 API 等方式进行分布式缓存: 具 ...
- CSS 媒体查询@media
1. 概述 1.1 定义 @media可以针对不同的屏幕尺寸(媒体类型)设置不同的样式,在响应式页面中,@media非常有用.重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面. 1. ...
- oracle_基本SQL语言
一:DDL数据定义语言 1:create(创建) 创建表 CREATE TABLE <table_name>( column1 DATATYPE [NOT NULL] [P ...
- Confluence 6 重要缓存和监控
重要缓存 下面的建议是基本上的一些配置帮助.在大型数据库中,20-30% 的数据库表大型可能是不需要如此膨胀的.在缓存配置的界面中,检查有效率和使用率的配置来进行必要的修改. 内容对象缓存(Conte ...
- automaticallyAdjustsScrollViewInsets 详解
automaticallyAdjustsScrollViewInsets 自动缩进 20 像素 默认是 True 项目中如果有UIViewController 和ScrollView 一般都要设置成f ...
- Android adb from work ---three
转接from work --two 0.查看Android的物理存储空间df adb shell df -h 表示以MB单位查看存储使用情况 1.在Android设备中创建指定大小的文件(也能测试其I ...
- mongo 的导入和导出
1.导出工具:mongoexport 1.概念: mongoDB中的mongoexport工具可以把一个collection导出成JSON格式或CSV格式的文件.可以通过参数指 ...
- js之DOM对象一
一.什么是HTML DOM HTML Document Object Model(文档对象模型) HTML DOM 定义了访问和操作HTML文档的标准方法 HTML DOM 把 HTML 文档呈现 ...