<!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. AngularJS Best Practices: resource

    A factory which creates a resource object that lets you interact with RESTful server-side data sourc ...

  2. input固定在底部

    // input固定在底部//isFocusing获取焦点:true 失去焦点:false _onTouchInput(isFocusing){ this.phone_width = screen.w ...

  3. Django根据现有数据库建立model

    Django引入外部数据库还是比较方便的,步骤如下 创建一个项目,修改seting文件,在setting里面设置你要连接的数据库类型和连接名称,地址之类,和创建新项目的时候一致 运行下面代码可以自动生 ...

  4. 夺命雷公狗-----React_native---2---sdk的安装

    首先回到刚才的那个android的目录下,创建一个sdk文件夹 解压完成后目录结构如下所示: 然后就来设置环境变量,我们需要添加一个"ANDROID_HOME" 然后将这3个文件夹 ...

  5. （一）sql入门 导读

    从转行做软件始,就开始接触sql,但还是不怎么深入,回忆3月份找工作的时候,左关联都没有写出来,真是丢脸,以此博客做个认真的开始. 以后的日子,遇到了圆柱体的空心物体,我就应该联想到一样东西,那就是数 ...

  6. anagularJs指令的controller，link，compile有什么不同

    /directives.js增加exampleDirective phonecatDirectives.directive('exampleDirective', function() { retur ...

  7. Hibernate 基础配置及常用功能（三）

    本章重点讲述Hibernate对象的三种状态以及如何配置二级缓存 有关Hibernate的三种状态如何相互转换网上都能查到,官方文档描述的也比较详细.这里主要是针对几个重点方法做代码演示. 一.状态转 ...

  8. Dynamics AX 2012 R2 业务系列-采购业务流程

    在博文Dynamics AX R2 业务系列中,Reinhard对这个系列做了一个规划,下面我们就按照规划开始说业务吧. 国际惯例,从采购开始. 1.采购的主要职责 简单点说,采购的主要职责,是从供应 ...

  9. sql server常用语法点

    if exists(select name from sysobjects where name = 'stuInfo')drop table stuInfogocreate table stuInf ...

  10. 【转】工控老鬼】西门子S7200入门&精通【1】S7200硬件大全

    转载地址:http://blog.sina.com.cn/s/blog_669692a601016i5f.html     工控老鬼提醒以下的信息和资料可能不全或者不准确,如有疑问可以查阅西门子中国网 ...