Ajaxfileupload：异步文件上传技术实现详解

最新推荐文章于 2025-06-07 14:38:43 发布

梨漾

最新推荐文章于 2025-06-07 14:38:43 发布

阅读量1.2k

点赞数 22

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_36299472/article/details/143957845

本文还有配套的精品资源，点击获取

简介：异步文件上传技术允许用户在不刷新页面的情况下上传文件，增强用户体验。本文将介绍一个基于Ajax技术的文件上传实例——ajaxfileupload，涵盖关键文件的使用和服务器端的处理流程，提供了一个高效且用户友好的文件上传解决方案。 ajaxfileupload完整实例

1. 异步文件上传技术原理与重要性

异步文件上传技术是现代Web应用中不可或缺的一部分，它允许用户在不刷新页面的情况下上传文件。这种技术通过JavaScript创建一个独立的HTTP请求来与服务器交互，从而实现数据的异步传输。异步文件上传不仅提升了用户体验，还提高了应用的响应性和效率。

1.1 文件上传技术原理

文件上传技术原理基于HTTP协议的POST方法。当用户选择文件并触发上传时，浏览器会将文件数据作为表单数据的一部分发送到服务器。传统的同步上传会导致整个页面卡死，直到上传完成。异步上传则是通过AJAX技术，允许JavaScript在后台与服务器通信，而不会中断用户的其他操作。

1.2 异步文件上传的重要性

异步文件上传技术对于提升用户体验至关重要，主要体现在以下几个方面：

无页面刷新 ：用户不需要等待整个页面的刷新就可以上传文件，提供了连续的操作流。
实时反馈 ：上传进度可以实时反馈给用户，减少了用户的等待焦虑。
提高效率 ：服务器可以同时处理多个请求，提升服务器的处理效率和系统的整体性能。

在接下来的章节中，我们将深入探讨ajaxfileupload组件的各个组件，以及如何应用这些技术来实现高效且用户友好的异步文件上传功能。

2. ajaxfileupload实例的组件概述

随着Web应用功能的日益复杂化，文件上传功能已成为许多网站和服务的基本需求。 ajaxfileupload 作为一个流行的JavaScript库，它简化了异步文件上传的实现过程，极大地提升了用户体验。本章节将详细介绍 ajaxfileupload 实例的各个组件及其功能。

2.1 ajaxfileupload的核心组件功能

ajaxfileupload 的执行流程涉及多个组件，它们相互协作以实现完整的异步上传功能。以下为核心组件的详细说明。

2.1.1 `ajaxfileupload.js` 的作用和功能

ajaxfileupload.js 是整个上传过程中的引擎，它负责初始化上传流程，并与服务器端进行交云。具体功能包括：

初始化上传事件和绑定相关事件处理器。
通过AJAX发起请求到服务器端处理文件。
实现前端的进度反馈和状态更新。
控制上传过程的开始和结束。

通过 ajaxfileupload.js ，开发者可以轻松地添加文件上传按钮、处理文件选择、上传前验证以及上传后的回调处理。

2.1.2 `ajaxfileupload.php` 的作用和功能

ajaxfileupload.php 是服务器端脚本，主要负责接收客户端通过AJAX发送的文件数据，并进行处理。其关键功能如下：

接收通过AJAX发送的文件数据。
对文件数据进行初步处理，如验证文件大小、类型等。
保存文件到服务器指定位置。
返回处理结果，如上传成功或失败的信息。

服务器端脚本的效率和安全性对整个上传流程至关重要， ajaxfileupload.php 的稳定性直接影响用户体验。

2.1.3 `doajaxfileupload.php` 的作用和功能

doajaxfileupload.php 处理上传完成的文件，并执行后续的业务逻辑处理。具体包括：

接收 ajaxfileupload.php 传递的文件路径。
执行必要的业务逻辑，例如文件的重命名、存储和索引。
返回业务处理结果，通常是向用户显示上传成功的消息或错误提示。

该脚本是用户与系统交互的桥梁，需要保证处理过程的准确性和效率。

2.2 ajaxfileupload的辅助组件功能

除了核心组件外， ajaxfileupload 还依赖几个辅助组件来增强功能和优化用户体验。

2.2.1 `ajaxfileupload.css` 的作用和功能

ajaxfileupload.css 提供了一套预先定义的样式，用于美化上传组件的界面，确保其在不同浏览器中具有良好的显示效果。主要功能包括：

确保上传组件在各种设备和浏览器中具有良好的一致性。
提供基本的视觉效果，如边框、阴影、悬停效果等。
可以通过覆盖默认样式来实现自定义的视觉风格。

2.2.2 `loading.gif` 的作用和功能

在文件上传过程中，用户需要得到反馈，知道上传是否正在发生。 loading.gif 提供了一个简单直观的动画效果，表示上传正在进程中。具体作用如下：

给用户一个可视化的提示，告知上传正在进行中。
减少用户在等待过程中的焦虑感。
提高用户体验，表明网站对用户行为做出了响应。

2.2.3 `jquery.js` 的作用和功能

jquery.js 是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。其在 ajaxfileupload 中的作用包括：

使 ajaxfileupload.js 的编写更加简洁和高效。
提供跨浏览器兼容性，使得 ajaxfileupload.js 在各主流浏览器上表现一致。
为上传组件提供动态的交互功能，比如按钮点击事件和进度条显示。

2.2.4 `change_notes.php` 和 `ajaxfileupload_instructions.txt` 的作用和功能

这两个文件分别提供了开发者关于 ajaxfileupload 组件更新和使用的说明文档，功能具体如下：

change_notes.php 记录了版本更新的详细信息和变更说明。
ajaxfileupload_instructions.txt 提供对组件如何使用的指导。

这些文档帮助开发者理解和掌握 ajaxfileupload 的使用方法，方便他们快速上手和维护。

以上章节详细介绍了 ajaxfileupload 的组件功能及其在异步文件上传过程中的作用。在下一章节中，我们将深入 ajaxfileupload.css 的样式定义，探讨它在样式美化和一致性维护中的重要性。

3. `ajaxfileupload.css` 文件样式定义

ajaxfileupload.css 是一个提供视觉样式的组件，它对于改善用户体验（UX）至关重要。优秀的样式能够确保用户界面（UI）友好、直观并且易于导航。这一章，我们将深入探讨 ajaxfileupload.css 的定义，基础样式知识以及在实际应用中的使用。

3.1 css样式的基础知识

层叠样式表（CSS）是一门用于描述HTML或者XML文档呈现样式的计算机语言。通过CSS，开发者可以分离内容与表现形式，为网页提供丰富多样的视觉效果。下面是一些CSS基础知识：

选择器 ：用于指定哪些HTML元素会被CSS样式化。包括元素选择器、类选择器、ID选择器、属性选择器等。
属性：用于定义你想要修改的HTML元素的样式。如 color 、 font-size 、 background 等。
值：每个属性都需要一个值来定义如何显示元素。例如， color: red; 设置文本颜色为红色。
继承：某些CSS属性的值可由父元素继承给子元素，如 font-family 、 color 等。
层叠：当应用多个样式规则于同一元素时，浏览器决定最终的呈现样式的过程。它涉及了选择器的特异性以及规则的重要性。

理解这些基础知识对于利用 ajaxfileupload.css 来定制上传组件的外观是非常重要的。

3.2ajaxfileupload.css样式定义的具体内容

ajaxfileupload.css 为整个上传组件提供了一套完整的视觉样式。这些样式定义了按钮的形状、颜色、大小，进度条的样式，弹窗的布局和动画效果等。以下是一些主要样式的定义：

按钮样式 ：定义了上传按钮的标准外观，包括常规状态、悬停状态、点击状态和禁用状态。
进度条样式 ：描述了进度条的宽度、高度、颜色以及进度动画效果。
消息框样式 ：包括错误、警告、成功等消息框的视觉呈现，提供了文本颜色、背景色和边框等属性。
布局样式 ：调整了组件在页面中的位置，以及组件内部各个元素的排列。

3.2.1 按钮样式

/* 按钮基础样式 */
button.ajaxfileupload-button {
  padding: 10px 15px;
  border: none;
  background-color: #4CAF50;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

/* 按钮悬停效果 */
button.ajaxfileupload-button:hover {
  background-color: #45a049;
}

/* 按钮点击效果 */
button.ajaxfileupload-button:active {
  background-color: #3e8e41;
}

/* 禁用按钮样式 */
button.ajaxfileupload-button[disabled] {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
}

这段代码定义了一个按钮的基本样式，并通过伪类添加了不同的状态效果。通过这种方式，开发者可以对上传按钮的外观进行细致的控制。

3.2.2 进度条样式

/* 进度条样式 */
div.ajaxfileupload-progress {
  height: 20px;
  width: 100%;
  background-color: #e7e7e7;
}

/* 进度条内部的进度 */
div.ajaxfileupload-progress div {
  height: 100%;
  width: 0;
  background-color: #4CAF50;
}

进度条的样式通过两层 div 元素实现，外层为进度条容器，内层为实际的进度条，使用CSS的 width 属性动态表示进度。

3.3 css样式在ajaxfileupload中的应用实例

实际应用中，我们会发现 ajaxfileupload.css 的样式定义是如何在组件中体现的。以下是一个简单实例：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="ajaxfileupload.css">
</head>
<body>
  <form>
    <button class="ajaxfileupload-button">上传文件</button>
    <div class="ajaxfileupload-progress">
      <div style="width: 0;">0%</div>
    </div>
  </form>
</body>
</html>

在这个例子中，我们有一个按钮和一个进度条。按钮使用 ajaxfileupload-button 类，并应用了 ajaxfileupload.css 中定义的样式。进度条同样应用了 ajaxfileupload-progress 类和其子 div ，来展示进度。

通过本章节的介绍，你已经了解了 ajaxfileupload.css 的定义、基础知识点以及在实际应用中的实例。这为接下来章节中探讨如何使用 loading.gif 加载动画提供了坚实基础。

4. `loading.gif` 加载动画的使用

4.1 加载动画的原理和重要性

加载动画是一种用户界面元素，它向用户传达信息正在加载中的状态。它不仅能够提供视觉反馈，减少用户等待时的焦虑，还能在后台数据处理时保持用户界面的响应性。在Web应用中，尤其是在文件上传过程中，加载动画的存在是至关重要的，因为它暗示用户上传正在处理中，从而提高用户体验。

在Ajax异步文件上传中，加载动画通常显示在文件选择后到上传完成这段时间，期间浏览器会向服务器发送数据，然后等待服务器的响应。这时，加载动画给用户一个明确的指示，告知他们上传操作正在进行，系统并未无响应或停止工作。

加载动画的实现原理通常基于简单的CSS动画或JavaScript定时器，它们控制一个图像元素（如 loading.gif ）在页面上显示和隐藏。在Ajax上传中，这个动画会在发起异步请求时触发，并在接收到服务器响应后消失。

4.2 `loading.gif` 的具体使用方法

loading.gif 是一种简单的GIF格式的动画图像，它通过连续播放多个帧来创建动画效果。它在ajaxfileupload中的使用方法简单明了：

在HTML中引入图像元素，并设置初始为不可见： html <img id="loadingImage" src="loading.gif" style="display:none;" />
在发起异步请求之前，使图像显示： javascript document.getElementById('loadingImage').style.display = 'block';
在异步请求的回调函数中，在数据发送到服务器后立即显示动画： ```javascript $.ajax({ // 设置Ajax请求参数... beforeSend: function() { showLoadingAnimation(); }, success: function(response) { // 处理成功的响应... hideLoadingAnimation(); }, error: function(xhr, status, error) { // 处理错误... hideLoadingAnimation(); } });

function showLoadingAnimation() { document.getElementById('loadingImage').style.display = 'block'; }

function hideLoadingAnimation() { document.getElementById('loadingImage').style.display = 'none'; } ```

当加载完成或出现错误时，隐藏图像元素： javascript hideLoadingAnimation();

通过这样的简单步骤， loading.gif 动画在文件上传过程中发挥作用，提供给用户直观的加载状态指示。

4.3 加载动画在ajaxfileupload中的应用实例

下面是加载动画在ajaxfileupload中使用的一个具体实例。首先，我们准备一个HTML文件，其中包含一个表单用于文件选择：

<!DOCTYPE html>
<html>
<head>
    <title>Ajax File Upload Example</title>
    <script src="jquery.js"></script>
    <script src="ajaxfileupload.js"></script>
</head>
<body>
    <form id="uploadForm" method="post" enctype="multipart/form-data">
        <input type="file" name="fileToUpload" id="fileToUpload" />
        <input type="button" value="Upload File" onclick="uploadFile()" />
    </form>
    <img id="loadingImage" src="loading.gif" style="display:none;" />
    <script>
        // JavaScript 函数定义...
    </script>
</body>
</html>

接下来，在JavaScript中实现上传逻辑：

function uploadFile() {
    var formData = new FormData(document.getElementById('uploadForm'));

    $.ajax({
        url: 'ajaxfileupload.php', // 服务器端上传处理文件
        type: 'POST',
        data: formData,
        contentType: false,
        processData: false,
        beforeSend: function() {
            showLoadingAnimation(); // 显示加载动画
        },
        success: function(response) {
            // 处理响应数据
            hideLoadingAnimation(); // 隐藏加载动画
        },
        error: function(xhr, status, error) {
            // 处理错误
            hideLoadingAnimation(); // 隐藏加载动画
        }
    });
}

function showLoadingAnimation() {
    document.getElementById('loadingImage').style.display = 'block';
}

function hideLoadingAnimation() {
    document.getElementById('loadingImage').style.display = 'none';
}

在这个实例中，当用户点击上传按钮时， uploadFile() 函数会被调用，开始文件上传过程。 beforeSend 选项确保在数据发送前动画显示，而 success 和 error 选项则用于在操作完成后隐藏动画。

这个加载动画的使用方法，使得整个文件上传过程对用户来说更为友好，用户不会因为网络延迟或服务器处理而感到不安。通过这种方式， loading.gif 在ajaxfileupload中的应用使得整个上传体验更加流畅和愉悦。

5. `jquery.js` 引用与 jQuery 在 Ajax 中的作用

5.1 jquery.js的基础知识和作用

jQuery 是一个快速、小巧、功能丰富的 JavaScript 库。它简化了 HTML 文档遍历和事件处理、动画、Ajax 交互等操作。作为开发中不可或缺的前端库之一，jQuery 改变了前端开发者的编码方式，提高了工作效率。它能够帮助开发者编写更少的代码，执行更多的功能，而且兼容主流浏览器。

在异步文件上传的场景中，jQuery 被广泛用于简化 DOM 操作和实现 Ajax 请求，特别是在处理文件上传的异步交互中。其提供的简洁的语法能够使开发者快速地对用户界面做出响应。

jQuery 的选择器和 DOM 操作

jQuery 的选择器功能非常强大，允许开发者以 CSS 选择器的方式快速选取页面元素，并对这些元素执行操作。此外，jQuery 提供了一系列的操作方法，如 .text() , .html() , .val() 等，使得对 DOM 元素的读写变得异常简单。

jQuery 的事件处理

事件是 jQuery 的核心之一，它提供了一套丰富的方法来处理各种事件，如点击、鼠标悬停、键盘输入等。通过 jQuery，开发者可以很容易地为元素添加事件监听器，甚至可以将这些事件绑定到动态生成的元素上。

jQuery 的 Ajax 功能

在 Ajax 方面，jQuery 提供了简洁的 .ajax() 方法和 .load() , .get() , .post() 等快捷方法，极大地简化了 Ajax 通信的实现。这些方法不仅减少了代码量，也减少了出错的可能性。

jQuery 的动画和效果

最后，jQuery 还提供了众多预设的动画和视觉效果，使得开发者能够在不编写复杂的 JavaScript 代码的情况下，实现流畅的用户界面动画。

5.2 jquery.js 在 ajaxfileupload 中的应用

在 ajaxfileupload.js 实现的异步上传中，jQuery 被用来绑定事件、发起 Ajax 请求，以及处理文件上传后的成功或失败反馈。通过 jQuery，上传按钮点击事件可以快速绑定，并在用户选择文件后立即发起文件上传请求。

$(document).ready(function() {
    $("#fileupload").ajaxFileUpload({
        url: 'ajaxfileupload.php', // 服务器处理上传的脚本
        type: 'POST',
        secureuri: false,
        fileElementId: 'file',
        // 其他配置参数...
        success: function (data) {
            // 成功上传后的回调函数
            console.log("File Uploaded!");
        },
        error: function (data) {
            // 处理上传错误
            console.log("Error while uploading file.");
        }
    });
});

代码逻辑解读与参数说明

$("#fileupload") 选择页面上一个具有 id fileupload 的元素。
.ajaxFileUpload() 是一个针对文件上传优化的 jQuery 方法。
url: 'ajaxfileupload.php' 指定了文件上传到服务器的处理脚本。
type: 'POST' 表示请求的方式是 POST。
fileElementId: 'file' 指定了文件上传字段的 ID。
success 和 error 回调函数用于处理上传成功和失败的情况。

5.3 ajaxfileupload 实例中 jquery.js 的具体使用方法

在 ajaxfileupload 实例中，jQuery 被用来实现用户界面的即时反馈。例如，当用户选择文件后，页面可以显示一个动态加载的动画，而在文件上传过程中，用户可以看到一个持续更新的进度条。

$('#fileupload').on('fileuploadstart', function(e) {
    $('#status').html("File is uploading...");
});

$('#fileupload').on('fileuploadstop', function(e) {
    $('#status').html("Upload Stopped.");
});

$('#fileupload').on('fileuploadcomplete', function(e, data) {
    $('#status').html("Upload Completed.");
});

动态加载动画的实现

<!-- 在页面上显示上传状态 -->
<div id="status"></div>

使用 jQuery 的 on() 方法监听 fileuploadstart 、 fileuploadstop 、 fileuploadcomplete 等事件，可以在不同的上传阶段向用户反馈状态。这些反馈对用户体验至关重要，使得用户知晓当前的上传进度和状态。

在上述代码中：

当文件开始上传时，页面上 #status 元素的 HTML 内容会更新为 "File is uploading..."。
当上传停止时，内容更新为 "Upload Stopped."。
当上传完成时，内容更新为 "Upload Completed."。

结合本节内容和代码，可以看出 jQuery 在 ajaxfileupload 实例中的实际应用，不仅仅是简单地发起 Ajax 请求，还包括了丰富的事件监听和用户反馈机制。这增强了用户界面的交互性和友好性，使得整个文件上传过程变得透明和可控。

6. `ajaxfileupload.js` 实现异步上传的关键JavaScript逻辑

6.1 JavaScript的基础知识和作用

JavaScript是一种被广泛使用的脚本语言，它为网页添加了动态的交互性。它可以让网页在用户与之交互时做出响应，比如按钮点击、表单提交等，而不需要重新加载整个页面。JavaScript的异步特性允许它发起网络请求（AJAX请求），在不中断用户操作的情况下与服务器交换数据。这对于提升用户体验至关重要，尤其是处理如文件上传这样的耗时操作时。

在实现 ajaxfileupload.js 组件中，JavaScript扮演着核心角色，它控制着文件选择、文件读取、上传进度显示、上传结果反馈等一系列的逻辑。此外，JavaScript与HTML的DOM（文档对象模型）相互作用，使得文件上传的过程能够以用户友好的方式呈现，如上传进度条和上传成功的提示。

6.2 ajaxfileupload.js的关键逻辑和实现方式

ajaxfileupload.js 是一个用于实现异步文件上传的JavaScript库。它封装了AJAX请求，并提供了易用的接口供开发者调用。核心功能包括：

文件选择和验证
文件读取和分片
AJAX请求的发送
上传进度的实时反馈
上传成功或失败后的回调函数

下面是 ajaxfileupload.js 的核心代码块及其逻辑分析：

// ajaxfileupload.js核心功能实现代码
function uploadFile(fileInputId) {
    var fileInput = document.getElementById(fileInputId);
    if (fileInput.files.length === 0) {
        alert('请选择一个文件来上传！');
        return;
    }
    var file = fileInput.files[0];
    var formData = new FormData();
    formData.append('file', file);
    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener('progress', function(e) {
        if (e.lengthComputable) {
            var percentComplete = Math.round((e.loaded * 100) / e.total);
            console.log('上传进度: ' + percentComplete + '%');
            // 这里可以添加代码更新进度条的显示
        }
    }, false);

    xhr.onload = function() {
        if (xhr.status === 200) {
            console.log('文件上传成功: ' + xhr.responseText);
            // 这里可以添加代码处理上传成功的逻辑
        } else {
            console.log('文件上传失败');
            // 这里可以添加代码处理上传失败的逻辑
        }
    };

    xhr.open('POST', 'ajaxfileupload.php', true);
    xhr.send(formData);
}

// 调用uploadFile函数上传文件
uploadFile('file');

在这个代码块中，首先我们检查用户是否选择了文件。如果没有，会弹出提示。然后创建一个FormData对象，用于收集文件数据。接着我们创建一个XMLHttpRequest对象，并监听其 upload 事件来跟踪上传进度。 onload 事件处理函数会在整个请求完成时被调用，无论请求成功还是失败。

6.3 ajaxfileupload.js在ajaxfileupload实例中的应用实例

在实际应用中， ajaxfileupload.js 组件可以非常灵活地集成到任何需要异步文件上传功能的Web应用中。以下是将 ajaxfileupload.js 集成到一个简单HTML表单中的一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax File Upload Example</title>
    <script src="jquery.js"></script>
    <script src="ajaxfileupload.js"></script>
</head>
<body>
    <form id="uploadForm">
        <input type="file" id="file" />
        <input type="button" value="Upload File" onclick="uploadFile('file')" />
    </form>
</body>
</html>

在这个示例中，页面上有一个文件输入框和一个按钮，当用户选择文件并点击按钮时， uploadFile 函数将被调用，文件上传的逻辑将被触发。这里还引用了 jquery.js ，因为 ajaxfileupload.js 可能依赖于jQuery来简化AJAX请求的处理。

请注意，实际使用时，需要确保服务器端的 ajaxfileupload.php 已正确配置，以接收并处理上传的文件。此外，应当在服务器端设置适当的错误处理和安全措施，比如验证上传文件的类型和大小等。这样，整个文件上传流程才既安全又高效。

7. `ajaxfileupload.php` 服务器端接收与处理文件数据

ajaxfileupload.php 是服务器端处理异步文件上传的核心脚本，它负责接收从前端传递过来的文件数据，执行安全检查，并将文件保存到服务器上的指定位置。本章节将深入探讨服务器端接收文件数据的原理和方法，以及 ajaxfileupload.php 的具体实现和作用，并给出在 ajaxfileupload 实例中的应用实例。

7.1 服务器端接收文件数据的原理和方法

服务器端接收文件数据主要依赖于HTTP协议中的文件上传机制。用户通过浏览器选择文件后，浏览器会将文件作为HTTP请求的一部分，通过 multipart/form-data 格式发送给服务器。服务器端脚本，如 ajaxfileupload.php ，需要解析这种特殊的HTTP请求，从中提取文件数据，并进行处理。

具体步骤如下： 1. 分析HTTP请求的 Content-Type ，确认是否为 multipart/form-data 。 2. 解析请求体，分离出文件数据部分和其他表单数据。 3. 对文件数据进行必要的验证，如文件类型、大小限制等。 4. 将验证通过的文件数据保存到服务器的指定位置。

7.2 ajaxfileupload.php的具体实现和作用

ajaxfileupload.php 的实现涉及到了PHP语言对 $_FILES 超全局数组的使用。这个数组包含了上传文件的所有信息，例如文件名、文件类型、临时文件名等。脚本需要读取这些信息，执行各种安全检查，并将文件移动到目标目录。

一个基本的 ajaxfileupload.php 脚本可能包含以下步骤：

<?php
// 验证是否有文件上传
if (isset($_FILES['myfile'])) {
    // 获取文件信息
    $file = $_FILES['myfile'];
    $target_path = "uploads/" . basename($file["name"]);
    // 执行安全检查：文件类型、大小等
    if (filetype($file["name"]) == "image/png" && $file["size"] < 2000000) {
        // 将文件保存到服务器
        if (move_uploaded_file($file["tmp_name"], $target_path)) {
            echo json_encode(array('success' => true, 'message' => 'File uploaded successfully.'));
        } else {
            echo json_encode(array('success' => false, 'message' => 'Error occurred while uploading the file.'));
        }
    } else {
        echo json_encode(array('success' => false, 'message' => 'Invalid file type or size.'));
    }
} else {
    echo json_encode(array('success' => false, 'message' => 'No file was uploaded.'));
}
?>