<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>文件上传</title>

	<style>

	.upload-wrapper {

		font-size: 0;

	}

	.file-input {

		position: relative;

		display: inline-block;

		width: 200px;

		height: 50px;

		line-height: 50px;

		border-radius: 5px;

		text-align: center;

		font-size: 18px;

		font-weight: bold;

		background-color: #009688;

		color: #fff;

		vertical-align: top;

		z-index: 1;

	}

	#upload{

		position: absolute;

		left: 0;

		top: 0;

		width: 200px;

		height: 50px;

		opacity: 0;

	}

	#upload-img {

		display: inline-block;

		margin-left: 30px;

		height: 200px;

	}

	.upload-pic {

		height: 100%;

		width: auto;

	}

	</style>

</head>

<body>

	<div class="upload-wrapper">

		<span class="file-input">上  传<input type="file" id="upload" /></span>

		<div id="upload-img"></div>

	</div>

	<script>

	var input = document.getElementById('upload');

	if(typeof FileReader === undefined) {

		input.setAttribute('disabled','disabled');

	}else {

		input.addEventListener('change',readFile,false);

	}

	function readFile(){

		var file = this.files[0];

		if(!/image\/\w+/.test(file.type)) {

			alert("请选择图片！");

			return false;

		}

		var reader = new FileReader();

		reader.readAsDataURL(file);

		reader.onload = function(e) {

			var data = this.result.split(',');

			var tp = (file.type == 'image/png') ? 'png' : 'jpg';

			var targetDiv = document.getElementById('upload-img');

			var uploadPic = document.getElementsByClassName('upload-pic');

			if(uploadPic.length === 0) {

				var img = document.createElement('img');

				img.src = data[0]+','+data[1];

				img.className = 'upload-pic';

				targetDiv.appendChild(img);

			}

			else {

				uploadPic[0].src = data[0]+','+data[1];

			}

		//之后的处理将图片数据上传到服务器

		}

	}

	</script>

</body>

</html>

　　

html5上传图片的更多相关文章

  1. 【小月博客】 Html5 上传图片 移动端、PC端通用

    在博客园注册账号有些天了,感觉有些许欣慰,自己写的东西有人在看,有人在评论很是开心.(ps: 满足一下虚荣心吧!) 废话不多说了,说一下今天给大家分享的是 html5上传图片.我们是在移动端使用的,但 ...

  2. HTML5上传图片预览

    <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...

  3. HTML5上传图片预览功能

    HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...

  4. HTML5上传图片到ASP.NET.MVC

    @{ ViewBag.Title = "Home Page";} <!DOCTYPE HTML PUBLIC><html><head> < ...

  5. javascript和HTML5上传图片之前实现预览效果

    一:FileList对象与file对象 FileList对象表示用户选择的文件列表,在HTML4中,file控件内只允许放置一个文件,但是到了HTML5中,通过添加multiple属性,file控件内 ...

  6. HTML5 上传图片 到ASP.NET MVC

    @{ ViewBag.Title = "Home Page"; } <!DOCTYPE HTML PUBLIC> <html> <head> & ...

  7. HTML5 上传图片预览

    html5出现之前如果需要上传图片预览 一般都是先上传到服务器然后远程预览 html5出现之后   有个filereader 解决了这问题 //选中图片之后 $("#fileAddPic&q ...

  8. 大朋展翅 html5上传图片(三)一解决部分手机拍相册批量上传图片转向问题

    在经过前面的改进之后本来以为已经没有问题了,但经过我们神通广大的测试的测试,发现相册中的图片在上传时也会发生转向问题.既然前面都解决了拍照转向的问题,那么相册中图片的上传也容易解决.修改一下需要旋转图 ...

  9. html5上传图片(一)一跨域上传

    最近开发一个上传图片的模块,传图片的接口不支持跨域上传,并且只支持单张上传,而我们的产品要求要实现多张上传.我搞了一个代理页面,先将图片传到代理页面,然后再通过代理页面传到上传图片接口.虽然这种方式经 ...

  10. html5 上传图片.net实现

    jQuery插件之ajaxFileUpload   搞了一夜,还没弄出来随copy了一篇博客... 一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来, ...

随机推荐

  1. Could not find class 'android.support.v4.view.ViewPager', referenced from me

    http://www.ithao123.cn/content-8236579.html 按照上面链接说的来做,弄完Clean一下项目,就可以运行.

  2. git用.gitignore忽略指定文件

    .gitignore 配置文件用于配置不需要加入版本管理的文件,配置好该文件可以为我们的版本管理带来很大的便利,以下是个人对于配置 .gitignore 的一些心得. 1.配置语法: 以斜杠“/”开头 ...

  3. 流量三角形:并非简单的"统计学"

    又忙了一周多,今天过来再整理一些东西.国内做产险精算的,准备金的居多,从精算部落中的帖子的跟帖情况可见一斑.既然准备金更容易受到大家的关注,今天再整理一个关于准备金的个人看法,给精算部落收敛一下人气, ...

  4. python爬虫

    预:网页的组成 HTML(结构)+css(样式)+javascript(功能) 爬虫主要针对的是HTML和css HTML: <div></div>div标签 代表网页中某个区 ...

  5. Excel标题与索引的对应关系

    /// <summary> /// 返回对应标题的索引 /// </summary> /// <param name="columnTitle"> ...

  6. Eclipse版本android 65535解决方案(原理等同android studio现在的分包方式)

    由于工作的需要看了下Eclipse下android65535的解决方案,查了好多文档,真心的发自内心的说一句请不要再拷贝别人的博客了,害人,真害人. 接下来我说下我的实现方式,首先说下65535的最可 ...

  7. 关于nodejs能同时接受多少个请求的问题？////zzz

    关于nodejs能同时接受多少个请求的问题? 最近学习node,看了很多教程,都在赞扬nodejs的异步I/O,异步I/O的特点就是,每接收一个请求,使用异步调用处理请求,不用等待结果,可以继续运行其 ...

  8. LA 4255 UVa1423 拓扑排序

    题目给出的是Sij的正负号,Sij=ai+...+aj,所以令前缀和Bi=a0+a1+..+ai,a0=0,B0=0,则有Sij=Bj-B(i-1): 由此构造出Bi的拓扑序列,只要每个拓扑序列相邻的 ...

  9. Canvas绘图中的路径描边与填充

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...

  10. zookeeper，dubbo，dubbo admin

    zookeeper 1. 分布式协调服务:我们的程序运行在不同的机器上,这些机器可能位于同一个机架,同一个机房又或不同的数据中心.在这样的环境中,我们要实现协调该怎么办?那么这就是分布式协调服务要干的 ...