<!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. web前端基础知识- Django基础

    上面我们已经知道Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Sessi ...

  2. grunt 入门学习

    前端工作流,Grunt上手指南 Posted@2013-04-20 7:15 a.m. CategoriesGrunt ,  javascript 我想先花点时间回忆一下作为一个前端需要做的工作(Lo ...

  3. Prime Time使用

    PrimeTime一般用作sign off的timing check,也可用在DC之后的netlist的timing analysis 一般的使用流程: 1) Read design data,--- ...

  4. jquery 通过ajax FormData 对象上传附件

    之前上传附件都是用插件,或者用form表单体检(这个是很久以前的方式了),今天突发奇想,自己来实现附件上传,具体实现如下 html: <div>   流程图: <input id=& ...

  5. 【原创】我所理解的自动更新-APP发布与后台发布

    发布后台 创建渠道:添加新的渠道,设置渠道名称,自动生成渠道id.    查看渠道:查看渠道基本信息,渠道app版本号,资源版本号,是否开启更新.    创建/更新APP:选择打包ios,androi ...

  6. The constructor BASE64Encoder() is not accessible due to restriction on required library

    在Eclipse中编写Java代码时,用到了BASE64Decoder,import sun.misc.BASE64Decoder;可是Eclipse提示:Access restriction : T ...

  7. IBM WebSphere MQ的oracle的jdbc

    一.IBM WebSphere MQ7.0的jdbc支持数据库有: DB2 Informix Informix_With_Date_Format Microsoft_SQL_Server Oracle ...

  8. Linux部署Apache Solr5.5.2+Apache Zookeeper3.4.6

    一.官网下载所需包. solr-5.5.2.tgz 下载地址:https://mirrors.tuna.tsinghua.edu.cn/apache/lucene/solr/5.5.2/ zookee ...

  9. Newtonsoft.Json

    在线生成实体:http://tool.chinaz.com/tools/json2entity.aspx RootObject ac = new RootObject(); ac = JsonConv ...

  10. 关于onethink的迁移站点产生数据库错误

      为了支持国产,本人使用了onethink建立了一个自己的站点( 模板世界:www.templatesy.com ),使用至今,虽然碰到了重重困难,还有很多bug,但总算也勉强建了起来. 在近期的一 ...