PHP+jQuery+html5+Ajax多图预览无刷新上传（附源码下载）

文章目录[隐藏]

上传效果截图：
载入jQuery库文件、上传插件文件plupload.full.min.js
Html代码
ajax.php代码
plupload上传操作部分

今天给大家介绍多图片上传及时预览功能一个demo，例子通过jQuery.js和plupload.full.min.js插件来实现，只要点击上传按钮，就可以从本地鼠标圈选多图，并能及时到上传到远端服务器，然后图片自动上传到服务器上并立即显示在页面上。网上很多教程都是收费的，今天在网页底部免费给大家提供demo下载。

上传效果截图：

载入jQuery库文件、上传插件文件plupload.full.min.js

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="plupload/plupload.full.min.js"></script>

```
<script type="text/javascript">
```

Html代码

上传的布局按钮进度条非常简单，你完全根据自己的需要，来设定，可以参考源码包中的文件自己修改设定。

```
 <div class="demo">
```

                <a class="btn" id="btn">上传图片</a> 最大1000KB，支持jpg，gif，png格式。

                <ul id="ul_pics" class="ul_pics clearfix"></ul>

```
       </div>
```

ajax.php代码

ajax.php处理图片上传，并将上传好的图片保存在uploads/目录，注意该目录是否有写入权限。首先需要检测是否为POST方式提交，然后判断图片格式、图片大小是否符合要求，然后使用move_uploaded_file()上传图片，并将图片重命名为 time().rand(100,999)。

```
<?php
```

$typeArr = array("jpg", "png", "gif");//允许上传文件格式

```
$path = "uploads/";//上传路径
```
```
 
```
```
if (isset($_POST)) {
```
```
    $name = $_FILES['file']['name'];
```
```
    $size = $_FILES['file']['size'];
```

    $name_tmp = $_FILES['file']['tmp_name'];

```
    if (empty($name)) {
```

        echo json_encode(array("error"=>"您还未选择图片"));

```
        exit;
```
```
    }
```

    $type = strtolower(substr(strrchr($name, '.'), 1)); //获取文件类型

```
 
```
```
    if (!in_array($type, $typeArr)) {
```

        echo json_encode(array("error"=>"清上传jpg,png或gif类型的图片！"));

```
        exit;
```
```
    }
```
```
    if ($size > (1000 * 1024)) {
```

        echo json_encode(array("error"=>"图片大小已超过500KB！"));

```
        exit;
```
```
    }
```
```
 
```

    $pic_name = time() . rand(10000, 99999) . "." . $type;//图片名称

    $pic_url = $path . $pic_name;//上传后图片路径+名称

    if (move_uploaded_file($name_tmp, $pic_url)) { //临时文件转移到目标文件夹

        echo json_encode(array("error"=>"0","pic"=>$pic_url,"name"=>$pic_name));

```
    } else {
```

        echo json_encode(array("error"=>"上传有误，清检查服务器配置！"));

```
    }
```
```
}
```

plupload上传操作部分

当点击按钮“上传图片”后，弹出选择文件对话框，按 "ctrl" 选择多图或者鼠标选定多图上传。然后调用 uploader.start() 方法，开始上传。上传中间过程我们可以用 UploadProgress 方法来显示文件进度，最后通过 FileUploaded 来显示对应的图片。通过浏览器控制台，会发现上传一张图片，会向后台ajax.php请求一次。具体设置下载源码。

今天我们通过多图片上传插件：http://www.plupload.com，实现多图片上传的效果，通过 plupload上传操作部分设置，我们可以设定上传图片类型，上传图片多少，通过上传插件调用了Moxie.swf实现了多图上传，其实目前是无法通过jquery实现多图上传的，这里你可以关闭多图上传，使用单图上传，这个插件功能非常强大，设置非常灵活，下面的源码里有详细的说明，更多实例可以到官网看文档，这里主要制作一个例子对开发的朋友希望有更多的帮助启发。

源码百度云盘下载：http://pan.baidu.com/s/1pKMHax9

511遇见

不一样的遇见