PHP+AJAX实现异步上传文件

2022-08-24 13:33:04 阅读：435 来源： 互联网

文件上传功能是动态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'目录。如果该目录不存在，那么它将创建该目录并将发送过来的文件上传到该文件夹中。

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

标签：异步,文件,upload,AJAX,file,PHP,data
来源： https://www.cnblogs.com/myhomepages/p/16619543.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

PHP+AJAX实现异步上传文件

创建一个HTML表单

创建一个AJAX脚本

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