<!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. mongo3.2

    arbiter配置文件 processManagement: fork: true net: bindIp: 172.16.10.1,127.0.0.1 port: storage: dbPath: ...

  2. 替换jenkins上打包完成的安装包的方法

    修改 /root/.jenkins/jobs/Item名称/lastSuccessful/archive/*/obj 文件夹下的文件,就可以在下图二中下载新修改的文件,需要注意的是,此文件夹下不能有新 ...

  3. ARM 开发工具 Keil和DS-5的比较。

    http://www.eeboard.com/bbs/thread-25219-1-1.html 如今ARM体系架构的处理器在嵌入式市场上呼风唤雨,从低端的MCU应用到高端的多媒体消费电子,移动设备领 ...

  4. 使用DiskFileItemFactory 实现文件上传 ，设定缓冲区大小和存放临时文件目录。

    DiskFileItemFactory有两个方法 :setSizeThreshold和.setRepository 1. setRepository方法用于设置当上传文件尺寸大于setSizeThre ...

  5. SpringMVC参数自动绑定

    SpringMVC的各种参数绑定方式 1. 基本数据类型(以int为例,其他类似):Controller代码: @RequestMapping("saysth.do") publi ...

  6. 如何创建一个简单的C++同步锁框架(译)

    翻译自codeproject上面的一篇文章,题目是:如何创建一个简单的c++同步锁框架 目录 介绍 背景 临界区 & 互斥 & 信号 临界区 互斥 信号 更多信息 建立锁框架的目的 B ...

  7. spring 配置bean

    Main(测试方法) public class Main { public static void main(String[] args) { //1.创建Spring 的IOC容器对象: //spr ...

  8. 使用Visual Studio扩展插件Visual assist X给代码插入注释模板

    Visual Assist 是由Whole Tomato公司为Microsoft Visual Studio开发的一款插件.它对Visual Studio的智能提示功能和代码高亮功能进行了增强,同时还 ...

  9. 编辑word文档过程中输入法无法正常使用

    编辑word文档过程中输入法无法正常使用怎么办??有的朋友在使用Word 2010过程中,遇到了这样的问题.每次打开word文档,程序就自动变成英文输入法,中文输入法就退出了,特别是搜狗输入法.即使在 ...

  10. STL-<queue>-priority queue的使用

    简介: 优先队列是一种容器适配器,优先队列的第一个元素总是最大或最小的(自定义的数据类型需要重载运算符).它是以堆为基础实现的一种数据结构. 成员函数(Member functions) (const ...