<!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. iOS，iOS对Android数据互通的规则

    AppStore针对数据互通的规则:在AppStore上架的应用,苹果会按照3:7的比例抽取IAP( In-App Purchase)三成的收入,作为渠道费用 11.2    Apps utilizi ...

  2. (转)小心FPGA的JTAG口(上电和下电顺序)

    同志们,根据ALTERA官方FAE(现场应用工程师)的强烈建议,请注意不要随意带电插拔你的JTAG下载接口,否则会损坏FPGA芯片的JTAG口信号管脚.现象:在排除了下载线的问题后,还是不能访问FPG ...

  3. mysql dba系统学习（6）二进制日志binlog之二

    MySQL 5.5 中对于二进制日志 (binlog) 有 3 种不同的格式可选:Mixed,Statement,Row,默认格式是 Statement.总结一下这三种格式日志的优缺点.MySQL R ...

  4. gradle基础的build文件模板_tomcat

    group '组织名' version '版本号' /* 支持的插件 */ apply plugin: 'java' // 项目基础变成语言支持为java apply plugin: 'war' // ...

  5. jQuery的13个优点

    1.轻量级 JQuery非常轻巧,采用Dean Edwards编写的Packer压缩后,大小不到30KB,如果使用Min版并且在服务器端启用Gzip压缩后,大小只有18KB. gzip: 每天一个li ...

  6. php 设计模式

    一.工厂模式 1.创建接口类,规范方法,要实现这个接口的类必须实现这个接口的所有方法,接口的方法默认是抽象的,所以不再方法前面加 abstract interface people{ public f ...

  7. Python对时间的转换

    1.将字符串的时间转换为时间戳 方法: a = "2013-10-10 23:40:00" 将其转换为时间数组 import time timeArray = time.strpt ...

  8. asp.net5 Area的处理

    Controller加上Attribute [Area("SystemSecurity")] startup中配置 app.UseMvc(routes => { // Are ...

  9. PHP开发中的缓存技术汇总

    在PHP开发中,出于对网站服务器负载的考虑,往往需要对页面.数据等内容进行缓存处理,下面就来看看,在PHP开发中有哪些缓存方式吧. 1.页面部分缓存该种方式,是将一个页面中不经常变的部分进行静态缓存, ...

  10. 将webservice封装成dll

    生成dll文件的步骤如下:1.发布完成后,在浏览器中打开WebService文件,如:http://localhost/WebSer/WebService1.asmx,可以看到WebService1. ...