PHP AJAX Image Upload

通過AJAX功能上傳圖片非常容易,並且易於在頁面中實現,在這個例子中,使用AJAX進行PHP圖片上傳,無需重新加載頁面。

AJAX進行PHP圖片上傳

使用jQuery AJAX來實現圖片上傳。有一個帶有文件輸入欄,和一個提交按鈕的表單。在這段代碼中,使用所選圖像文件提交表單時,AJAX腳本將被執行,向PHP發送上傳請求。PHP代碼將上傳的圖像移動到目標文件夾,並返回圖像HTML,將AJAX響應預覽顯示HTML頁面。

HTML圖像上傳表單

以下代碼顯示圖像上載表單的HTML。在提交此表單時,將調用AJAX函數將請求發送到PHP圖像上傳代碼。

<form id="uploadForm" action="upload.php" method="post">
    <label>Upload Image File:</label><br/>
    <input name="userImage" type="file" class="inputFile" />
    <input type="submit" value="Submit" class="btnSubmit" />
</form> 

通過AJAX方法上傳PHP圖像

此代碼顯示用於通過發布FormData實例發送文件上傳請求的ajax()函數。在PHP中,它將文件上傳到指定的路徑。成功上傳圖片後,它會將上傳的圖片為AJAX作為回應,然後這將被添加到目標DIV以顯示使用者的預覽。

<script type="text/javascript">
    $(document).ready(function (e){
    $("#uploadForm").on('submit',(function(e){
    e.preventDefault();
    $.ajax({
    url: "upload.php",
    type: "POST",
    data:  new FormData(this),
    contentType: false,
    cache: false,
    processData:false,
    success: function(data){
    $("#targetLayer").html(data);
    },
    error: function(){}             
    });
    }));
    });
</script>

PHP AJAX接收響應圖片檔案

<?php
    if(is_array($_FILES)) {
        if(is_uploaded_file($_FILES['userImage']['tmp_name'])) {
            $sourcePath = $_FILES['userImage']['tmp_name'];
            $targetPath = "images/".$_FILES['userImage']['name'];
        if(move_uploaded_file($sourcePath,$targetPath)) {
?>
            <img class="image-preview" src="/<?php echo $targetPath; ?>" class="upload-preview" />
<?php
            }
        }
    }
?>

Demo

通過AJAX上傳圖片後,我們會在目標div中顯示上傳圖片的預覽,如下所示。

觀看展示 | 下載原始碼

文章翻譯來源:https://phppot.com/php/php-ajax-image-upload/

Copyright © 2018 ucamc