PHP ajax异步批量上传图片

html代码

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Ajax+PHP实现异步上传多张图片</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <style type="text/css">
        #feedback{
            min-height: 200px;
            text-align: center;
            border: 1px solid silver;
            border-radius: 3px;
        }
        #feedback img{
            margin:3px 10px;
            border: 1px solid silver;
            border-radius:3px;
            padding: 6px; 
            width: 35%;
            height: 85%;
        }
        #feedback p{
            font-family: "微软雅黑";
            line-height: 120px;
            color: #ccc;
        }
        .file {
            position: relative;
            display: inline-block;
            border: 1px solid #1ab294;
            border-radius: 4px;
            padding: 8px 16px;
            overflow: hidden;
            color: #fff;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            color: #1ab294;
            }
            
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .box{
            margin-top: 10px;
            text-align: center;
        }
        .box a{
            margin-left: 10px;
        }
    </style>
</head>
<body> 
    <!-- 响应返回数据容器 -->
    <div id="feedback">
    </div>
    <div class="box">
        <a href="javascript:;" class="file">选择图片
            <input type="file" multiple="multiple" id="inputfile" name="" class="photo">
        </a>
        <a href="javascript:;" class="file close">重新选择
            <input type="buttom" class="photo">
        </a>
    </div>
<script type="text/javascript">
$(document).ready(function(){
    //响应文件添加成功事件
    var feedback = $("#feedback");
    $("#inputfile").change(function(){
        if (this.files.length>2) {
            alert("最多只能选择两张图片");
            return false;
        }
        //创建FormData对象
        var data = new FormData();
        //为FormData对象添加数据
        $.each($('#inputfile')[0].files, function(i, file) {
            data.append('ruoshui'+i, file);
        });
        //追加其他数据
        data.append('id',1);
        //发送数据
        $.ajax({
            url:'./upload.php', 
            type:'post',
            data:data,
            dataType:'json',
            cache: false,
            contentType: false,
            processData: false,
            // contentType: false 和processData: false，这两个参数是为了设置ajax对file文件对象进行序列化
            success:function(data){        
                var str = '';
                $.each(data,function(i,n){
                    str +='<img src="'+n+'">';
                });
                $("#feedback").append(str);
            },
            error:function(){
                alert('上传出错');
            }
        });
    });
    $(".close").on("click",function(){
        $("#feedback").empty();
    });
});
</script>
</body>
</html>

PHP代码

<?php
header('content-type:text/html charset:utf-8');
$baseUrl = "./";
$picArr = "";
$index = 0; 
foreach($_FILES as $file){
    $picName = 'ruoshui' . $index;//对应index.html FomData中的文件命名
    $fileName = $_FILES[$picName]['name'];
    //文件不存在才上传
    if(!file_exists($baseUrl.$fileName)) {
        $isMoved = false;  //默认上传失败
        $MAXIMUM_FILESIZE = 1 * 1024 * 1024;//文件大小限制1M = 1 * 1024 * 1024 B;
        $picType = "/^\.(jpg|jpeg|gif|png){1}$/i"; 
        if ($_FILES[$picName]['size'] <= $MAXIMUM_FILESIZE && 
            preg_match($picType, strrchr($fileName, '.'))) {
            $isMoved = @move_uploaded_file ( $_FILES[$picName]['tmp_name'], $baseUrl.$fileName);//上传文件
        }
    }
    $picArr[] = $baseUrl.$fileName;
    $index++;
}
echo json_encode($picArr);

PHP ajax异步批量上传图片

猜你喜欢

0 个评论