html5 文件上传 带进度条

最新推荐文章于 2024-05-08 11:28:24 发布
最新推荐文章于 2024-05-08 11:28:24 发布
阅读量156 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/hefei/p/5526713.html
版权 
<!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>

　　

转载于:https://www.cnblogs.com/hefei/p/5526713.html

weixin_30791095
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于HTML5的jquery文件上传插件（多文件选择、带进度条、完整可用）
02-21
俺亲手写的： 1.支持多文件上传 2.带进度条 3.可以显示文件名称 4.可以实时显示已上传的大小 5.可以从队列中删除 6.各元素的样式都可以自己控制
html资源文件记载进度条,基于HTML5 Ajax实现文件上传并显示进度条
weixin_32448581的博客
05-31 239
本文实例讲解了ajax上传文件及进度条的实现方法，分享给大家供大家参考，具体内容如下效果图：html5上传是同步上传的方式，所以能够实现进度条的显示。1.上传文件：首先我们用ajax来取得的file对象：var file = null;var input = $("#file_upload");//文件域选择文件时, 执行readFile函数input.addEventListener('chan...
HTML批量文件上传2——进度条显示
最新发布
sunbeacher的博客
05-08 999
非常棒的案例，批量文件上传，带进度条，已验证的场景：PHP+JavaScript； Servlet+JavaScript； 使用的环境：Tomcat；
html如何显示上传进度条,HTML5 Ajax文件上传进度条如何显示
weixin_32304785的博客
06-07 902
这篇文章主要介绍了HTML5 Ajax文件上传进度条是如何显示的，基于原生html5实现，不需要falsh支持，进度可以自定义显示，控制灵活，对HTML5上传进度条感兴趣的小伙伴们可以参考一下原本打算使用jquery插件进行异步文件上传，比如uploadfy但是需要额外的支持，也有人用iframe模仿异步上传机制，感觉都比较别扭。因为项目不考虑低版本浏览器，所以决定用html5实现。下面只是一个简...
javascript+HTML5 多文件上传（插件）多进度条显示
02-06
html5和js多文件上传插件。可任意多文件选择上传，每个文件都可以显示进度，同时可以显示整体进度。采用了html的file对象和blob对象的属性和方法。
带进度条的HTML5上传文件（使用XMLHttpRequest对象）
05-08
带进度条的HTML5上传文件---（使用XMLHttpRequest对象）
layui文件上传带进度条显示.zip
12-17
`layui`的上传组件基于HTML5的`FormData`和`XMLHttpRequest Level2`，这两个特性支持异步上传文件并提供文件上传进度信息。通过监听`xhr.upload.onprogress`事件，我们可以获取到上传进度并更新进度条的状态。这样，...
HTML5 Ajax文件上传进度条如何显示
12-08
总的来说，HTML5的Ajax文件上传结合XMLHttpRequest和FormData对象提供了强大的功能，让我们能够在现代浏览器中实现更高级的文件上传体验，包括实时的进度条显示。注意，这个方案并不适用于旧版浏览器，因此在项目...
HTML5 JS ajax 无刷新上传文件 带进度条
01-19
HTML5、JavaScript（JS）和AJAX技术的结合使得现代网页可以实现无刷新上传文件，同时还能展示上传进度条，极大地提升了用户体验。这种技术在Web应用中被广泛应用，特别是那些需要用户频繁上传文件的场景，如社交媒体...
js HTML5 Ajax实现文件上传进度条功能
11-22
在JavaScript和HTML5中，实现文件上传进度条功能主要涉及到几个关键技术和API，包括`FormData`、`XMLHttpRequest`（通常使用其高级版本Ajax）以及HTML5中的`progress`元素。下面将详细介绍这些知识点。 1. **...
Vue实现带进度条的文件拖动上传功能
08-27
Vue 实现带进度条的文件拖动上传功能 本文主要介绍了使用 Vue 实现带进度条的文件拖动上传功能，通过实例代码给大家介绍的...同时，这个功能也可以与其他技术结合使用，例如与服务器端技术结合使用来实现文件上传。
h5实现的上传，自带进度条
12-21
js,h5，简单使用,实现进度条上传
文件上传(进度条显示)源码20130410
05-14
文件上传(进度条显示)源码 源码描述： 文件上传功能，带有进度条显示，上传的附件列表用GridView展示 带有附件删除功能
JS+html5实现异步上传图片显示上传文件进度条功能示例
10-16
主要介绍了JS+html5实现异步上传图片显示上传文件进度条功能,结合完整实例形式分析了JavaScript前端结合HTML5实现post文件上传与进度条显示相关操作技巧,需要的朋友可以参考下
html页面上传进度条
sunyanchun的专栏
01-19 1574
进度条样式 #progress-bar { width: 500px; height: 20px; background: #cccccc; border-radius: 5px; } #progress-warp { width: 0px; height: 20px; background: #1B7EE0; border-radius: 5px;
用HTML5实现文件上传带进度条
this_name_true的博客
01-08 5142
  效果如下：     代码如下：     &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;Text1文件上传&lt;/title&gt; &lt;style&gt; *{ margin: 0;
html多文件上传、显示进度条、显示文件大小
灬Manong 博客
04-02 2016
var file = $('#fileId'); file.on('change', function( e ){ //获取上传文件数量 var fileNumber = e.currentTarget.files.length; for(var fi = 0;fi<fileNumber;fi++){ ...
html文件上传进度条
03-31
要实现HTML文件上传进度条，需要使用JavaScript和XMLHttpRequest对象（XHR）。以下是一个基本的HTML文件上传进度条的实现： 1. HTML代码： ``` ()">Upload <div id="progressBar"></div> ``` 2. JavaScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值