html5 文件上传 带进度条
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片上传</title>
</head>
<body>
<img id="uploadPreview" style="width: 100px; height: 100px;" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E" alt="Image preview" /> <input type="file" id="upimg" /> <script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var tmpImg = 'data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E';
var oPreview = document.getElementById("uploadPreview");
var oUpimg = document.getElementById("upimg");
var oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
oFReader.onload = function(oFREvent){
oPreview.src = oFREvent.target.result;
};
$(oUpimg).change(function(){
var oFile = oUpimg.files[0];
if(oFile.size > 2000000){
oPreview.src = tmpImg;
alert("最大只能上传2M的文件!");
return;
}
if(!rFilter.test(oFile.type)){
oPreview.src = tmpImg;
alert("请上传有效的图片!");
return;
}
oFReader.readAsDataURL(oFile); var xhr = new XMLHttpRequest();
var url = '/upimg/upimg'; //上传地址
xhr.open("POST", url, true);
//进度条
if(xhr.upload){
xhr.upload.addEventListener("progress",
function(e){
console.log((e.loaded / e.total * 100).toFixed(0) + '%');
},
false);
}
//上传
xhr.onreadystatechange = function(e){
if(xhr.readyState == 4){
if(xhr.status == 200){
//成功处理
var data = xhr.responseText;
console.log(data);
}
}
};
var fd = new FormData();
fd.append('upimg', oFile); //上传域名称
xhr.send(fd);
});
});
</script>
</body>
</html>
html5 文件上传 带进度条的更多相关文章
- atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7
atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...
- atitit. 文件上传带进度条 atiUP 设计 java c# php
atitit. 文件上传带进度条 atiUP 设计 java c# php 1. 设计要求 1 2. 原理and 架构 1 3. ui 2 4. spring mvc 2 5. springMVC.x ...
- HTML5文件上传还有进度条
以下是自学it网--中级班上课笔记 网址:www.zixue.it 需要在chrome,ff,IE10下运行 html页面 <!DOCTYPE html> <html lang=&q ...
- HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条
页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...
- Flex4/Flash多文件上传(带进度条)实例分享
要求 必备知识 本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上 演示地址 演 ...
- Struts2文件上传带进度条，虽然不是很完美
好久没有写东西,最近在做个项目,要用到文件h 传的,以前虽然也做上传,但是总觉得不好用 ,现在和队友合作做了一个带进度条的上传,觉得还行~~和大家分享一下. 首先说一下大概是这样实现的,在我们平时的上 ...
- springMVC+ajax 文件上传 带进度条
前端代码: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...
- Springboot 文件上传(带进度条)
1. 相关依赖 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http ...
- php实现大文件上传带进度条
1.使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc) APC实现方法: 安装APC,参照官方文档安装,可以使 ...
随机推荐
- JAVA设计模式之建造模式
在阎宏博士的<JAVA与模式>一书中开头是这样描述建造(Builder)模式的: 建造模式是对象的创建模式.建造模式可以将一个产品的内部表象(internal representation ...
- appium入门
前语:学习需要总结,或许有些知识自己存在偏差,但是能总结出来就会更加加深所学知识 1. 环境变量配置 必备软件安装: jdk1.6.0 android-sdk python:2.7(3.6 ...
- ESL python调用C模块时传递unicode字符串报错问题解决
在是用freeswitch时利用ESL的python调用时传递字符串报错 TypeError: in method 'ESLconnection_api', argument 2 of type 'c ...
- ajax执行完成后，再执行下面的代码的解决办法
一般ajax设置的都是异步的,但是有时候我们有这种需求,就是等ajax执行完成之后,在执行下面的函数. 1设置async:false 在jq中直接设置了ajax是异步的还是同步的 一般如果不写这个,默 ...
- xtrabackup备份与恢复实践
说明 xtrabackup --percona 特点: 开源,在线备份innodb表 支持限速备份,避免对业务造成影响 支持流备 支持增量备份 支持备份文件压缩与加密 支持并行备份与恢复,速度快 ...
- 用BlendFunc实现舞台灯光和刮刮卡效果
[转]http://code.lovemiao.com/?p=136#more-136 之前写过一篇<不规则形状按钮的点击判定>,利用了CCRenderTexture创建一块画布,可以在上 ...
- MySQL_杭州北仓 12.3-12.7需求活动期间累计下单达到3天及以上的客户_20161212
#C025_02杭州北仓 12.3-12.7需求活动期间累计下单达到3天及以上的客户明细 SELECT d.*,CASE WHEN 下单天次>=3 THEN "下单超过3天" ...
- js onkeypress与onkeydown 事件区别详细说明
keypress只适用于有字符输入的按键 而keyup/keydown包含了Ctrl, Shift之类的情况 Firefox在处理onKeyDown/onKeyPress事件时存在漏洞,恶意网页可能利 ...
- SQL中使用update inner join和delete inner join
Update XXX set XXX where 这种写法大家肯定都知道,才发现update和delete居然支持inner join的update方式,太神奇了.分享段示例代码: 1 2 3 4 5 ...
- jquery实现页面动态切换的方法--toggleClass(className)
$(function() { $(".A").click(function() { $(this).toggleClass("B"); }); }); 当点击带 ...