Sep
13
2022
jquery+html+php 实现Ajax无刷新文件上传
作者：
绝缘体.. 发布：
2022-09-13 11:37 分类：
未分类 阅读：
抢沙发
以下内容所讲的方法是通过jquery的插件实现，纯jquery原生的实现方法请参考：
使用jquery ajax实现文件上传
利用 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.phpernote.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']));
}
以上举例比较粗糙，具体的各种错误以及详细的处理步骤还待朋友们根据自己的情况去进行完善的。下面是 ajaxfileupload 这个 ajax 无刷新上传文件组件的相关信息：
该组件主页（主页有该组件的下载地址和实例）:http://www.phpletter.com/Demo/AjaxFileUpload-Demo/
微信扫一扫，打赏作者吧～
jquery+html+php 实现Ajax无刷新文件上传：等您坐沙发呢！
发表评论
