Ajax+PHP實現異步上傳多張圖片

時間 2019-11-09

標籤 ajax+php ajax php 實現異步上傳圖片欄目 Ajax 简体版

原文原文鏈接

HTML代碼php

<!-- 
date: 2018-04-27 13:46:55
author: 王召波
descride: 多張圖片上傳 
-->
<!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代碼css

<?php
/**
 * date: 2018-04-27 13:46:55
 * author: 王召波
 * descride: 多張圖片上傳
 */
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);