HTML5 多文件上传和文件操作

最新推荐文章于 2024-08-20 15:46:47 发布

qq_26182553

最新推荐文章于 2024-08-20 15:46:47 发布

阅读量1.5k

点赞数

分类专栏： html/js/css/jsp/struts

本文链接：https://blog.csdn.net/qq_26182553/article/details/75047455

版权

html/js/css/jsp/struts 专栏收录该内容

63 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<title>example: file upload</title>
	
	<script type="text/javascript">
		$(function(){
			$('#showfilename').click(function(e){
				var filelist = document.getElementById('files').files;
				for(var i=0; i<filelist.length; i++){
					$('#name').append('<span>'+filelist[i].name+'</span><br>');
				}
			})

			$('#showfilecontent').click(function(e){
				var file = document.getElementById('files').files[0];
				var reader = new FileReader();
				reader.readAsText(file);
				reader.onload = function(e){
					var content = this.result;
					$('#content').append('<span>'+content+'</span><br>');
				}
			})
			
			$('#showimage').click(function(e){
				var file = document.getElementById('files').files[0];
				var reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = function(e){
					var url = this.result;
					$('#image').append('<img alt='+file.name+' src='+url+'><br>');
				}
			})
		})
		
	</script>
</head>
<body>
	<form action="/home">
		<input type=file multiple="multiple" name=files id=files ><br>
		<input type=button value="show file name" id=showfilename><br>
		<input type=button value="show file content" id=showfilecontent ><br>
		<input type=button value="show image" id=showimage ><br>
		File name:<br>
		<div id=name></div><br>
		File content:<br>
		<div id=content></div><br>
		Show image:<br>
		<div id=image></div><br>
		
	</form>
</body>
</html>

参考文件：
http://www.w3.org/TR/FileAPI/
http://www.cnblogs.com/fly_dragon/archive/2012/06/02/2532035.html