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& ...
随机推荐
- tcpdump详解
tcpdump -i eth1 'host 121.14.84.221 and greater 76' -Ap -v -s10000 抓取 eth1 和 121.14.84.221 上的所有长度大于7 ...
- Android跳转WIFI界面的四种方式
第一种 Intent intent = new Intent(); intent.setAction("android.net.wifi.PICK_WIFI_NETWORK"); ...
- Android启动模式之singleinstance的坑
前言 在实际应用中,使用singleinstance启动模式时,会遇到一些奇奇怪怪的问题.Android有四种启动模式,分别是standard,singleTop,singleTask,singleI ...
- ie.360，qq浏览器这种ie内核浏览器默认阻止弹窗
- Idea 调试快捷键
F9 resume programe 恢复程序 Alt+F10 show execution point 显示执行断点 F8 Step Over ...
- Oracle 口令文件：即 oracle密码文件
一:文件路径位置 [oracle@localhost db_1]$ cd $ORACLE_HOME/dbs [oracle@localhost dbs]$ ls dbsorapwPROD1 hc_or ...
- Confluence 6 协同编辑问题解决
协同编辑是 Synchrony 提供的,用于在编辑的时候实时同步.在一般的情况下,这个进程是不需要 Confluence 的管理员进行手动管理的. 这个页面将会帮助你 Confluence 安装实例中 ...
- Confluence 6 在你用户宏中使用参数
你可以为你的用户宏指定参数.这样的话,用户可以使用参数来决定 Confluence 页面的显示情况. 如何在 Confluence 页面中使用你的宏参数 当添加一个宏到 Confluence 页面中的 ...
- day04 运算符 流程控制 （if while/of）
1. 运算符算数运算符 + - * / int / float :数字类型 # print(10 + 3.1)# print(10 / 3)# print(10 // 3)# print(10 % 3 ...
- php可变数量的参数
PHP 在用户自定义函数中支持可变数量的参数列表.在 PHP 5.6 及以上的版本中,由 ... 语法实现:在 PHP 5.5 及更早版本中,使用函数 func_num_args(),func_get ...