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& ...
随机推荐
- 查看当前APP打开的是哪个Activity
按下 “window键+R键” 打开电脑的 “运行” 窗口,输入“cmd”,进入你的adb.exe所在的目录,输入 “ adb shell "dumpsys window | grep mC ...
- Dubbo原理解析-Dubbo内核实现之SPI简单介绍
转自:https://blog.csdn.net/quhongwei_zhanqiu/article/details/41577159 Dubbo 采用微内核+插件体系,使得设计优雅,扩展性强.那所谓 ...
- 在内网使用Gradle构建Android Studio项目
在Android Studio项目中,默认的远程仓库为jcenter,如果在项目引用了一些类库,Gradle构建程序的时候会将这些依赖类库从jcenter网站下载到本地,如我们在 build.grad ...
- 11)django-ORM(操作增删改查)
ORM从增删改查等方面说明 一:创建数据 #创建数据两种方式1,推荐方式1 UserInfo.objects.create(username=") #方式1变种 user_dict={&qu ...
- C语言学习及应用笔记之三：C语言const关键字及其使用
在C语言程序中,const关键字也是经常会用到的一个关键字,那么使用const关键字的目的是什么呢?事实上,在程序中使用const关键字的主要目的就是为了向使用者传递设计者的一些意图. 事实上,无论我 ...
- 查询oracle比较慢的session和sql
注:本文来源:sxhong <查询oracle比较慢的session和sql> ---查询最慢的sql select * from ( select parsing_user_id,e ...
- Confluence 6 € 欧元字符集不能正常显示
€ (euro) 标记 是一个 3 字节字符,在 (UTF-8)中这个字符被表示为 0xE2, 0x82, 0xAC. 有时候,你的系统中没有设置所有的地方为相同的字符集的时候(Confluence, ...
- MONGODB数据基础与命令
- python - 发送带各种类型附件的邮件
如何发送各种类型的附件. 基本思路就是,使用MIMEMultipart来标示这个邮件是多个部分组成的,然后attach各个部分.如果是附件,则add_header加入附件的声明. 在python中,M ...
- linux命令中的参数前的一横（-）和两横（--）的区别
在解释这些区别之前我们先了解一下有关linux的背景知识,这个需要大家先认真看完就会对这些区别有更深入的了解,对linux也有更深的了解. 关于System V和BSD风格以及他们与Linux的关系: ...