jQuery加PHP實現圖片上傳並提交

時間 2020-07-26

標籤 jquery php 實現圖片上傳提交欄目 JQuery 简体版

原文原文鏈接

圖片上傳思路：經過ajax實現圖片上傳，而後把PHP返回的圖片地址，加入到隱藏字段中，最後經過表單提交給後臺PHP，代碼以下php

HTML代碼 zimg.html文件：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定義上傳圖片</title>
</head>
<body>
    <form action="a.php?action=2" method="post">
        <span>
            上傳圖片
        </span> 
    
        <span>
            <input type="file" id="img_url" name="img_url" accept=".jpg, .gif, .jpeg, .bmp, .png"/>
            <a onclick="UpLoadImg()">上傳</a>
            <input type="hidden" id="url_data" name="url_data"/>
        </span>

        <br>
        <span>
            <input type="submit" value="提交">
        </span>
    </form>
    
</body>
<!-- 引入jq -->
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

<script>
    function UpLoadImg(){
        //獲取上傳文件
        var formData = new FormData();
        formData.append('img_url', $('#img_url')[0].files[0]);
        console.log(formData)
        //提交後臺處理
        $.ajax({
            url: 'a.php?action=1',
            type: 'POST',
            cache: false,
            data: formData,
            dataType: "JSON",
            processData: false,
            contentType: false
        }).done(function(res) {
            console.log(res.url);
            if(res.status == 1){
                //賦值給字段
                $('#url_data').val(res.url);
                alert(res.msg)
            }else{
                alert(res.msg)
            }
        }).fail(function(res) {

        });
    }
</script>

</html>

後臺PHP代碼 a.php：jquery

<?php
if($_GET['action'] == 1){//上傳圖片接口
    $img = $_FILES['img_url'];
    //獲取上圖片後綴
    $type = strstr($img['name'], '.');
    $rand = rand(1000, 9999);
    //命名圖片名稱
    $pics = date("YmdHis") . $rand . $type; 
    //上傳路徑
    $pic_path = "img/". $pics;
    //移動到指定目錄，上傳圖片
    $res = move_uploaded_file($img['tmp_name'], $pic_path);
    if($res){
        echo json_encode(['status' => 1, 'msg' => '上傳成功','url' => $pic_path]);exit;
    }else{
        echo json_encode(['status' => 0, 'msg' => '上傳失敗']);exit;
    }
}elseif($_GET['action'] == 2){//提交文件表單
    echo '<pre>';
    var_dump($_POST);
}