PHP+AJAX实现异步上传文件

HACK1949 · 2022年11月4日

文件上传功能是动态Web应用程序的常用功能。通常，php采用提交表单并刷新页面的方法上传文件。但是，如果您想提供更好的用户体验，则可以使用jQuery和Ajax来上传文件而无需刷新页面。

上传文件的最简单方法是使用FormData。它使用键/值对发送XMLHttpRequest请求。最初，FormData用于发送键/值对中的所有表单数据，但也可以用于发送键控数据。FormData发送的数据格式与表单的Submit()提交方法中使用的格式相同。如果我们在表单的编码中使用multipart/form-data，它也会发送上传数据。

本文中将向您展示如何使用FormData对象和PHP提交表单数据上传文件。

创建一个HTML表单

在你的网站根目录创建一个文件夹命名为AJAX-upload，然后在该文件夹中创建一个index.html页面。页面代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>AJAX fiel Uploading</title>
</head>
<body>
    <p>Image uploader</p>

        <input type="file" id="fileAjax" name="fileAjax" /><br /><br />
        <button id="upload">Upload</button>

    <p id="status"></p>
    <script type="text/javascript" src="imageUpload.js"></script>
</body>
</html>

创建一个AJAX脚本

编写JavaScript代码，这段代码进行Ajax调用并向服务器端处理响应。在AJAX-upload文件夹中创建一个js文件并命名为imageUpload.js，将一下代码复制到该文件中。

$('#upload').on('click', function() {
    var file_data = $('#sortpicture').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);
    alert(form_data);                             
    $.ajax({
        url: 'upload.php', // point to server-side PHP script 
        dataType: 'text',  // what to expect back from the PHP script, if anything
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
        success: function(php_script_response){
            alert(php_script_response); // display response from the PHP script, if any
        }
     });
});

上面代码发送文件到服务器，服务器脚本upload.php将作出响应。

创建服务器端PHP脚本以接受来自AJAX请求的数据

在此阶段，我们已经完成了将文件内容发送到服务器端的工作。现在创建一个文件upload.php ，在该文件中，我们必须编写PHP代码，该文件将文件上传到服务器上。

<?php
header("Content-Type: text/html;charset=utf-8");
if (!file_exists('./Upload')) {
    mkdir('uploads', 0777);
}
$MyFilePath="./Upload/";                
$Extensions= array("jpeg","jpg","png"); 
$MaxFileSize=2;                         
$Time=time();                           
if(isset($_FILES['myFile'])){
        $file_name = $_FILES['myFile']['name'];
        $file_size = $_FILES['myFile']['size'];
        $file_tmp = $_FILES['myFile']['tmp_name'];
        $file_type = $_FILES['myFile']['type'];
        $name_arr = explode('.',$_FILES['myFile']['name']);
        $file_ext=strtolower(end($name_arr));

        if(in_array($file_ext,$Extensions)=== false){
            echo "400ExeErr";
        }  

        if($file_size > ($MaxFileSize*1024*1024)) {
            echo "400FileSizeErr";
        }
        if(in_array($file_ext,$Extensions)=== true&&$file_size < ($MaxFileSize*1024*1024)){

            $NewFileName=$Time."_".$file_name;
            $AllFilePath=$MyFilePath.$NewFileName;
            move_uploaded_file($file_tmp,$AllFilePath);
            echo $AllFilePath; 
        }
}
?>

上面的PHP代码首先检查'uploads'目录。如果该目录不存在，那么它将创建该目录并将发送过来的文件上传到该文件夹中。

以上就是本文的全部内容，希望对大家的学习有所帮助。更多教程请访问码农之家

登录

游客您好，欢迎来到黑客世界论坛！您可以在这里进行注册。

PHP+AJAX实现异步上传文件

推荐的帖子

HACK1949

创建一个HTML表单

创建一个AJAX脚本

创建服务器端PHP脚本以接受来自AJAX请求的数据

链接帖子

意见的链接

分享到其他网站

黑客攻防讨论组

黑客攻防讨论组

最近浏览 0位会员

黑客世界站内导航 (SITE MAP)