PHP + jQuery Ajax文件无刷新上传文件
摘要:
PHP + jQuery Ajax文件上传实例。因为看到一些朋友询问如何实现PHP环境下的网页上传功能,自己这几天刚用了jQuery_upload_multiple上传插件,所以在这里把用法给大家说一下。
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="http://www.codefans.net/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://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"> <!-- 利用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(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}'/>"; }else { $output .= "<img src='{$dir_base}error.jpg' title='{$filename}' alt='{$filename}'/>"; } $index++; } echo $output."</textarea>";
把hTML代码保存为一个你喜欢的名字,保存PHP代码为submit_form_process.php,然后在这两个文件的同级目录下建立一个上传文件夹files,可以测试了,记着要用火狐或Chrome来测试。
本文由 帝一博客 原创发布。用户在本站发布的原创内容(包括但不仅限于回答、文章和评论),著作权均归用户本人所有。独家文章转载,请联系邮箱:17762131@qq.com。获得授权后,须注明本文地址: https://bubukou.com/phpjiqiao/1097.html
相关文章
图文资讯
-
PHP 扫描微信公众号二维码,关注并自动登录网站
2020-10-27 16:35
-
fastadmin git 安装过程记录笔记
2020-10-03 17:34
-
PHP 多个redis key 删除遇到Function R...
2020-08-19 16:01
-
PHP-Redis,keys()对键名进行模糊查询
2020-08-19 15:34
-
php连接redis
2019-12-16 10:00
-
linux mshowfat命令显示MS-DOS文件在FAT...
2019-09-05 08:02
-
PHP中重定向网页跳转页面的方法
2019-07-09 11:38
-
CI框架中使用join实现多表联合查询
2019-06-13 20:56
-
Laravel 5.3 学习笔记之错误日志
2019-06-13 20:56
-
PHP批量生成静态HTML的简单原理和方法
2019-06-13 20:55
网友留言评论