PHP+Ajax实现文件无刷新上传文件代码

PHP+jQuery Ajax文件上传实例,因为看到一些朋友询问如何实现PHP环境下的网页上传功能,自己这几天刚用了jQuery_upload_multiple上传插件,所以在这里把用法给大家说一下.

要实现基于这个插件的上传功能,其实挺简单,需要jquery就行了,另外还有一个上传文件时的PHP程序,费话不多说,先看下面的HTML,也就是带有上传表单,让用户选择上传文件的页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < title > Easy Ajax FormData Upload Multiple Images </ title > < script type = "text/javascript" src = "/ajaxjs/jquery-1.6.2.min.js" > </ script >  </ 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://f7-preview.awardspace.com/zjmainstay.co.cc/jQueryExample/jquery_upload_image/files/ui-anim_basic_16x16.gif") no-repeat scroll 0 0 transparent;float: left;padding:8px;margin:18px 0 0 18px;} </ style > < div id = "addpicContainer" >     < 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 ( empty empty ( $_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}'/>" ; //开源代码phpfensi.com } else { $output .= "<img src='{$dir_base}error.jpg' title='{$filename}' alt='{$filename}'/>" ; } $index ++; } echo $output . "</textarea>" ; ?>

查看更多关于PHP+Ajax实现文件无刷新上传文件代码 - php上传下载的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did29332

更新时间：2022-09-18 阅读：66次