码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript Fromdata 与jQuery 实现Ajax文件上传

时间:2014-08-06 22:30:52      阅读:388      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   java   os   io   文件   for   

<!DOCTYPE html>
<html>
<head>
	<title>ajax</title>
	<script type="text/javascript" src="js/jquery.js"></script>
	<meta charset="utf-8" />
	<style type="text/css">
	form{
		position: relative;
	}
	ul li{
		list-style: none;
	}
	.divide ul li img{
		width: 100px;
		border: 3px solid #eeeeee;
	}
	.selected{
		border: 3px solid #0099aa;
	}
	form input{
		position: absolute;
		top: 0;
		left: 0;
		padding: 20px;
		opacity: 0;
	}
	button{
		padding: 20px;
		background: #0099aa;
		border-radius: 3px;
		border: 2px solid #333333;
		color: #ffffff;
		font-size: 18px;
	}
	.loading{
		display: none;
	}
	</style>
</head>
<body>
 
	
	<input type="file" id="file" multiple />
	
	<div class="loading"><img src="loading.gif" /></div>
	<div class="divide">
		<ul>
		
		</ul>
	</div>
	
	<script type="text/javascript">
	$(function(){
		$("#file").change(function(){

				data = new FormData();
				data.append(‘files‘, $(‘#file‘)[0].files[0]);
				$.ajax({
					type: "post",
					url: "upload.php",
					processData: false,
					contentType: false,
					data: data,
					success: function(a, b, c){
						$("div ul").append("文件上传成功!<li><img src=‘" + a + "‘ /> </li>");
					}
				});

			});


	});
	</script>
</body>
</html>

  

Javascript Fromdata 与jQuery 实现Ajax文件上传,布布扣,bubuko.com

Javascript Fromdata 与jQuery 实现Ajax文件上传

标签:style   blog   color   java   os   io   文件   for   

原文地址:http://www.cnblogs.com/chenshuo/p/3895745.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!