PHP+Ajax实现文件无刷新上传文件代码
PHP+jQuery Ajax文件上传实例,因为看到一些朋友询问如何实现PHP环境下的网页上传功能,自己这几天刚用了jQuery_upload_multiple上传插件,所以在这里把用法给大家说一下.
要实现基于这个插件的上传功能,其实挺简单,需要jquery就行了,另外还有一个上传文件时的PHP程序,费话不多说,先看下面的HTML,也就是带有上传表单,让用户选择上传文件的页面:
<!DOCTYPE html>
<html>
<head>
<title>Easy Ajax FormData Upload Multiple Images</title>
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script><!--此处可引用你实际路径的jquery插件-->
</head>
<body>
<style>
#feedback{width:1200px;margin:0 auto;}
#feedback img{float:left;width:300px;height:300px;}
#ZjmainstaySignaturePicture,#addpicContainer{float:left;width: 100%;}
#addpicContainer{margin-left:5px;}
#ZjmainstaySignaturePicture img{width: 535px;}
#addpicContainer img{float: left;}
.loading{display:none;background:url(http://pic4.phprm.com/2014/08/26/ui-anim_basic_16x16.jpg) no-repeat scroll 0 0 transparent;float: left;padding:8px;margin:18px 0 0 18px;}
</style>
<div id="addpicContainer">
<!-- 利用multiple="multiple"属性实现添加多图功能 -->
<!-- position: absolute;left: 10px;top: 5px;只针对本用例将input隐至图片底下。-->
<!-- height:0;width:0;z-index: -1;是为了隐藏input，因为Chrome下不能使用display:none，否则无法添加文件 -->
<!-- onclick="getElementById('inputfile').click()" 点击图片时则点击添加文件按钮 -->
<img onclick="getElementById('inputfile').click()" style="cursor:pointer;border: 1px solid #AABBCC;" title="点击添加图片" alt="点击添加图片" src="http://f7-preview.awardspace.com/zjmainstay.co.cc/jQueryExample/jquery_upload_image/files/addfile.jpg">
<input type="file" multiple="multiple" id="inputfile" style="height:0;width:0;z-index: -1; position: absolute;left: 10px;top: 5px;"/>
<span class="loading"></span>
</div>
<div id="feedback"></div><!-- 响应返回数据容器 -->
<script type="text/javascript">
$(document).ready(function () {
//响应文件添加成功事件
$("#inputfile").change(function () {
//创建FormData对象
var data = new FormData();
//为FormData对象添加数据
$.each($('#inputfile')[0].files, function (i, file) {
data.append('upload_file' + i, file);
});
$(".loading").show(); //显示加载图片
//发送数据
$.ajax({
url : 'submit_form_process.php',
type : 'POST',
data : data,
cache : false,
contentType : false, //不可缺参数
processData : false, //不可缺参数
success : function (data) {
data = $(data).html();
//第一个feedback数据直接append，其他的用before第1个（ .eq(0).before() ）放至最前面。
//data.replace(/</g,'<').replace(/>/g,'>') 转换html标签，否则图片无法显示。
if ($("#feedback").children('img').length == 0)
$("#feedback").append(data.replace(/</g, '<').replace(/>/g, '>'));
else
$("#feedback").children('img').eq(0).before(data.replace(/</g, '<').replace(/>/g, '>'));
$(".loading").hide(); //加载成功移除加载图片
},
error : function () {
alert('上传出错');
$(".loading").hide(); //加载失败移除加载图片
}
});
});
});
</script>
</body>
</html>接下来是上传图片的PHP文件代码,文件名：submit_form_process.php,代码如下:
<?php
header('content-type:text/html charset:utf-8');
$dir_base = "./files/"; //文件上传根目录
//没有成功上传文件，报错并退出。
if (emptyempty($_FILES)) {
echo "<textarea><img src='{$dir_base}error.jpg'/></textarea>";
exit(0);
}
$output = "<textarea>";
$index = 0; //$_FILES 以文件name为数组下标，不适用foreach($_FILES as $index=>$file)
foreach ($_FILES as $file) {
$upload_file_name = 'upload_file' . $index; //对应index.html FomData中的文件命名
$filename = $_FILES[$upload_file_name]['name'];
$gb_filename = iconv('utf-8', 'gb2312', $filename); //名字转换成gb2312处理
//文件不存在才上传
if (!file_exists($dir_base . $gb_filename)) {
$isMoved = false; //默认上传失败
$MAXIMUM_FILESIZE = 1 * 1024 * 1024; //文件大小限制 1M = 1 * 1024 * 1024 B;
$rEFileTypes = "/^＼.(jpg|jpeg|gif|png){1}$/i";
if ($_FILES[$upload_file_name]['size'] <= $MAXIMUM_FILESIZE && preg_match($rEFileTypes, strrchr($gb_filename, '.'))) {
$isMoved = @move_uploaded_file($_FILES[$upload_file_name]['tmp_name'], $dir_base . $gb_filename); //上传文件
}
} else {
$isMoved = true; //已存在文件设置为上传成功
}
if ($isMoved) {
//输出图片文件<img>标签
//注：在一些系统src可能需要urlencode处理，发现图片无法显示，
// 请尝试 urlencode($gb_filename) 或 urlencode($filename)，不行请查看HTML中显示的src并酌情解决。
$output.= "<img src='{$dir_base}{$filename}' title='{$filename}' alt='{$filename}'/>"; //开源代码phprm.com
} else {
$output.= "<img src='{$dir_base}error.jpg' title='{$filename}' alt='{$filename}'/>";
}
$index++;
}
echo $output . "</textarea>";文章网址:http://www.phprm.com/scxz/fs4809.html
随意转载^^但请附上教程地址。