PHP + jQuery Ajax文件无刷新上传文件

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

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

01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02<html xmlns="http://www.w3.org/1999/xhtml">
03<head>
04<title>Easy Ajax FormData Upload Multiple Images</title>
05<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script><!--此处可引用你实际路径的jquery插件-->
06</head>
07<body>
08<style>
09    #feedback{width:1200px;margin:0 auto;}
10    #feedback img{float:left;width:300px;height:300px;}
11    #ZjmainstaySignaturePicture,#addpicContainer{float:left;width: 100%;}
12    #addpicContainer{margin-left:5px;}
13    #ZjmainstaySignaturePicture img{width: 535px;}
14    #addpicContainer img{float: left;}
15    .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;}
16</style>
17<div id="addpicContainer">
18    <!-- 利用multiple="multiple"属性实现添加多图功能 -->
19    <!-- position: absolute;left: 10px;top: 5px;只针对本用例将input隐至图片底下。-->
20    <!-- height:0;width:0;z-index: -1;是为了隐藏input,因为Chrome下不能使用display:none,否则无法添加文件 -->
21    <!-- onclick="getElementById('inputfile').click()" 点击图片时则点击添加文件按钮 -->
22    <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">
23    <input type="file" multiple="multiple" id="inputfile" style="height:0;width:0;z-index: -1; position: absolute;left: 10px;top: 5px;"/>
24    <span class="loading"></span>
25</div>
26<div id="feedback"></div><!-- 响应返回数据容器 -->
27<script type="text/javascript">
28$(document).ready(function(){
29    //响应文件添加成功事件
30    $("#inputfile").change(function(){
31        //创建FormData对象
32        var data = new FormData();
33        //为FormData对象添加数据
34        $.each($('#inputfile')[0].files, function(i, file) {
35            data.append('upload_file'+i, file);
36        });
37        $(".loading").show();   //显示加载图片
38        //发送数据
39        $.ajax({
40            url:'submit_form_process.php',
41            type:'POST',
42            data:data,
43            cache: false,
44            contentType: false, //不可缺参数
45            processData: false,     //不可缺参数
46            success:function(data){
47                data = $(data).html();
48                //第一个feedback数据直接append,其他的用before第1个( .eq(0).before() )放至最前面。
49                //data.replace(/&lt;/g,'<').replace(/&gt;/g,'>') 转换html标签,否则图片无法显示。
50                if($("#feedback").children('img').length == 0) $("#feedback").append(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>'));
51                else $("#feedback").children('img').eq(0).before(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>'));
52                $(".loading").hide();   //加载成功移除加载图片
53            },
54            error:function(){
55                alert('上传出错');
56                $(".loading").hide();   //加载失败移除加载图片
57            }
58        });
59    });
60});
61</script>
62</body>
63</html>

接下来是上传图片的PHP文件代码:文件名:submit_form_process.php

01<?php
02header('content-type:text/html charset:utf-8');
03$dir_base = "./files/"; //文件上传根目录
04//没有成功上传文件,报错并退出。
05if(empty($_FILES)) {
06    echo "<textarea><img src='{$dir_base}error.jpg'/></textarea>";
07    exit(0);
08}
09$output = "<textarea>";
10$index = 0; //$_FILES 以文件name为数组下标,不适用foreach($_FILES as $index=>$file)
11foreach($_FILES as $file){
12    $upload_file_name = 'upload_file' . $index;//对应index.html FomData中的文件命名
13    $filename = $_FILES[$upload_file_name]['name'];
14    $gb_filename = iconv('utf-8','gb2312',$filename);   //名字转换成gb2312处理
15    //文件不存在才上传
16    if(!file_exists($dir_base.$gb_filename)) {
17        $isMoved = false;  //默认上传失败
18        $MAXIMUM_FILESIZE = 1 * 1024 * 1024;    //文件大小限制    1M = 1 * 1024 * 1024 B;
19        $rEFileTypes = "/^\.(jpg|jpeg|gif|png){1}$/i";
20        if ($_FILES[$upload_file_name]['size'] <= $MAXIMUM_FILESIZE &&
21            preg_match($rEFileTypes, strrchr($gb_filename, '.'))) {
22            $isMoved = @move_uploaded_file ( $_FILES[$upload_file_name]['tmp_name'], $dir_base.$gb_filename);       //上传文件
23        }
24    }else{
25        $isMoved = true;//已存在文件设置为上传成功
26    }
27    if($isMoved){
28        //输出图片文件<img>标签
29        //注:在一些系统src可能需要urlencode处理,发现图片无法显示,
30        //    请尝试 urlencode($gb_filename) 或 urlencode($filename),不行请查看HTML中显示的src并酌情解决。
31        $output .= "<img src='{$dir_base}{$filename}' title='{$filename}' alt='{$filename}'/>";
32    }else {
33        $output .= "<img src='{$dir_base}error.jpg' title='{$filename}' alt='{$filename}'/>";
34    }
35    $index++;
36}
37echo $output."</textarea>";

把hTML代码保存为一个你喜欢的名字,保存PHP代码为submit_form_process.php,然后在这两个文件的同级目录下建立一个上传文件夹files,可以测试了,记着要用火狐或Chrome来测试。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值