热门搜索: yii框架    seo优化    js效果    css教程    php函数    js网页特效    

jquery+html+php 实现Ajax无刷新文件上传

时间:2015-09-07 09:27 文章来源:未知 点击次数:

利用 php+jquery+html 实现 ajax 无刷新文件上传。这里主要用到了一款 jquery 插件(也可称作 ajax 文件上传组件)ajaxfileupload。这个插件实际上是采用了 iframe 文件上传的原理,即动态的再页面里嵌入了一个IFRAME表单,然后在IFRAME使用原生的POST表单提交数据。下面以做一个具体的实例。

Jquery+HTML 代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>php+jquery+html ajax无刷新文件上传</title>
<script type="text/javascript" src="http://www.weberlove.com/js/jquery.js"></script> 
<script type="text/javascript" src="ajaxfileupload.js"></script>
<script type="text/javascript">
function ajaxFileUpload(){
	$.ajaxFileUpload({
		url:'doajaxfileupload.php', //处理上传文件的程序文件,见下面的php文件代码
		secureuri:false,
		fileElementId:'img',
		dataType:'json',
		success:function(data){
			alert(data.message);
			$('#file_url').val(data.file_url);
		}
	});
	return false;
}
</script>
</head>
<body>
<form action="do_file_upload.php" method="post" enctype="multipart/form-data">
<input id="img" type="file" size="45" name="img" class="input">
<input type="hidden" id="file_url" name="file_url" />
<button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">上传</button>
</form>
</body>
</html>

php 代码(即以上实例中的 doajaxfileupload.php 文件):

<?php
$upFilePath="./uploads";
$f=@move_uploaded_file($_FILES['img']['tmp_name'],$upFilePath);
if($f===FALSE){
	echo json_encode(array('code'=>1,'message'=>'上传失败','file_url'=>$upFilePath.$_FILES['img']['tmp_name']));
}else{
	echo json_encode(array('code'=>0,'message'=>'上传成功','file_url'=>$upFilePath.$_FILES['img']['tmp_name']));
}

 

 

以上举例比较粗糙,具体的各种错误以及详细的处理步骤还待朋友们根据自己的情况去进行完善的。

希望对大家有所帮助,并对本站多多支持,点点本站广告,感激不尽。

 

 

 

 

 

 

 

    热门排行