html5上传图片
<!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上传图片的更多相关文章
- 【小月博客】 Html5 上传图片 移动端、PC端通用
在博客园注册账号有些天了,感觉有些许欣慰,自己写的东西有人在看,有人在评论很是开心.(ps: 满足一下虚荣心吧!) 废话不多说了,说一下今天给大家分享的是 html5上传图片.我们是在移动端使用的,但 ...
- HTML5上传图片预览
<!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...
- HTML5上传图片预览功能
HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...
- HTML5上传图片到ASP.NET.MVC
@{ ViewBag.Title = "Home Page";} <!DOCTYPE HTML PUBLIC><html><head> < ...
- javascript和HTML5上传图片之前实现预览效果
一:FileList对象与file对象 FileList对象表示用户选择的文件列表,在HTML4中,file控件内只允许放置一个文件,但是到了HTML5中,通过添加multiple属性,file控件内 ...
- HTML5 上传图片 到ASP.NET MVC
@{ ViewBag.Title = "Home Page"; } <!DOCTYPE HTML PUBLIC> <html> <head> & ...
- HTML5 上传图片预览
html5出现之前如果需要上传图片预览 一般都是先上传到服务器然后远程预览 html5出现之后 有个filereader 解决了这问题 //选中图片之后 $("#fileAddPic&q ...
- 大朋展翅 html5上传图片(三)一解决部分手机拍相册批量上传图片转向问题
在经过前面的改进之后本来以为已经没有问题了,但经过我们神通广大的测试的测试,发现相册中的图片在上传时也会发生转向问题.既然前面都解决了拍照转向的问题,那么相册中图片的上传也容易解决.修改一下需要旋转图 ...
- html5上传图片(一)一跨域上传
最近开发一个上传图片的模块,传图片的接口不支持跨域上传,并且只支持单张上传,而我们的产品要求要实现多张上传.我搞了一个代理页面,先将图片传到代理页面,然后再通过代理页面传到上传图片接口.虽然这种方式经 ...
- html5 上传图片.net实现
jQuery插件之ajaxFileUpload 搞了一夜,还没弄出来随copy了一篇博客... 一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来, ...
随机推荐
- TIJ——Chapter Eight:Polymorphism
The twist |_Method-call binding Connecting a method call to a method body is called binding. When bi ...
- input 正则限制输入内容
js 限制input只能输入数字小数点也不能输入或者是只能输入数字,能输小数点等等,本文大致整理了一些,感兴趣的朋友可以收藏下 代码如下: 1 <input type="text& ...
- 理工科应该的知道的C/C++数学计算库（转）
理工科应该的知道的C/C++数学计算库(转) 作为理工科学生,想必有限元分析.数值计算.三维建模.信号处理.性能分析.仿真分析...这些或多或少与我们常用的软件息息相关,假如有一天你只需要这些大型软件 ...
- servlet获取参数时，request.getParameter("id")参数获取失败
servlet获取参数时,request.getParameter("id")参数获取失败,这里的参数是“index”里面href中的参数 要注意,取不到值,是不是要取的参数有没有 ...
- IOS轮播图
轮播图播放的主要技术在于: cell的封装.这里采用UICollectionViewCell实现. #import <UIKit/UIKit.h> @interface CircleVie ...
- C# 创建Windows服务
创建windows服务项目 2 右键点击Service1.cs,查看代码, 用于编写操作逻辑代码 3 代码中OnStart用于执行服务事件,一般采用线程方式执行方法,便于隔一段事件执行一回 END ...
- 20.谈谈对mvc的认识。
MVC是 模型(Model) .视图(View).控制器(Control) 的英文首字母的缩写,核心思想是:视图和用户交互 通过事件导致控制器改变 控制器改变导致模型改变 或者控制器同时改变两者 模型 ...
- Java多线程开发系列之一：走进多线程
对编程语言的基础知识:分支.选择.循环.面向对象等基本概念理解后,我们需要对java高级编程有一定的学习,这里不可避免的要接触到多线程开发. 由于多线程开发整体的系统比较大,我会写一个系列的文章总结介 ...
- iOS当中一些常见的面试题
转自各方面..... 一.前言部分 文中的问题多收集整理自网络,不保证100%准确,还望斟酌采纳. 1.iOS9有哪些新特性? 答案: 1)改进了 Siri 基于日期.位置和相簿名称来搜索个人照片和视 ...
- VMWare虚拟机NAT上网方法 亲测可用
首先虚拟机的网卡要选择NAT 然后 在Virtual Network Editor中一定选上DHCP功能. 还要主机的服务必须开启.主机的VMnet8对应NAT模式,这个VMnet8的配置保持默认不要 ...