Javascript Fromdata 与jQuery 实现Ajax文件上传

浏览数：20 / 时间：2015年06月08日

<!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文件上传,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。