PHP+Ajax实现文件无刷新上传文件代码
发布:smiling 来源: PHP粉丝网 添加日期:2014-08-26 10:16:57 浏览: 评论:0
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><!--此处可引用你实际路径的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(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}'/>";//开源代码phpfensi.com
- }else {
- $output .= "<img src='{$dir_base}error.jpg' title='{$filename}' alt='{$filename}'/>";
- }
- $index++;
- }
- echo $output."</textarea>";
- ?>
Tags: PHP+Ajax 无刷新上传
相关文章
- ·php ajax实现文件上传进度条(2021-07-22)
- ·PHP+Ajax+JS实现多图上传(2021-08-01)
- ·php+ajax实现无刷新文件上传功能(ajaxuploadfile)(2021-09-03)
- ·php+ajax 文件上传代码实例(2021-11-13)
- ·php无刷新利用iframe实现页面无刷新上传文件(2014-09-08)
- ·php+iframe实现无刷新上传文件例子(2015-04-09)
推荐文章
热门文章
最新评论文章
- 写给考虑创业的年轻程序员(10)
- PHP新手上路(一)(7)
- 惹恼程序员的十件事(5)
- PHP邮件发送例子,已测试成功(5)
- 致初学者:PHP比ASP优秀的七个理由(4)
- PHP会被淘汰吗?(4)
- PHP新手上路(四)(4)
- 如何去学习PHP?(2)
- 简单入门级php分页代码(2)
- php中邮箱email 电话等格式的验证(2)