使用jQuery ajax上传文件的教程

迪鲁宾
442 阅读4分钟

jQuery Ajax File Upload

jQuery Ajax文件上传简介

jQuery ajax文件上传是将文件从本地计算机上传到服务器的过程。当我们在浏览器中选择一个文件并点击提交按钮时，浏览器会从我们的本地机器中复制文件并将其发送到服务器，然后将其保存到指定位置。要异步上传一个文件，我们可以利用ajax和jQuery。

jQuery Ajax文件上传

  • 对于开发者来说，上传文件是很困难的，但是使用Ajax上传文件就更容易了，非常简单。
  • Ajax的进步和浏览器的支持使文件上传变得更加容易。HTML5上传器提供了快速的解决方案，但不安全，与所有浏览器不兼容。
  • 在使用jQuery ajax上传文件的时候，我们使用以下两个函数。
  • FormData() - 这个函数是用来创建一个新的表单数据对象的。
  • Move uploaded file() - 这个函数是用来重新定位一个上传的文件。
  • 由于客户端设施不佳，该方程式需要服务器端组件来处理传入的数据流。
  • 在客户端，HTML5文件输入表单元素提供了帮助。然而，开发人员在实现Ajax和JavaScript文件上传时，给他们的程序增加了不必要的复杂性。
  • 当开发者使用jQuery等知名框架来创建文件上传时，他们引入了不必要的复杂性。
  • 使用纯粹的JavaScript，避免使用沉重的库和框架，是开发者执行Ajax文件上传的最容易和最简单的方法。
  • JQuery ajax文件上传项目被分为三个主要部分。
  • 来自新的文件API的FileReader对象，来自XMLHttpRequest的FormData对象，文件输入元素的多个属性。
  • 众多元素允许用户挑选多个文件进行上传。
  • 对于不支持FormData或FileReader的旧版浏览器，上传行为将退回到正常的、非AJAX的文件上传。
  • 由于需要大量的代码和耗时的琐事，使用AJAX技术来上传文件可能会让人望而生畏。

如何向jQuery ajax文件上传图片

  • 在五个简单的步骤中，我们可以使用JavaScript使用Ajax上传一个文件到服务器。
  • 在客户端的浏览器中呈现的网页必须包括一个HTML5输入表单元素。
  • 必须写一个JavaScript方法来开始基于Ajax的异步文件上传。
  • 服务器上必须有一个组件来处理文件上传并在本地保存资源。
  • 服务器必须用一个状态代码响应浏览器，表明JavaScript文件上传是成功的。同样，客户端的浏览器必须用一个基于Ajax的状态代码来响应，显示文件被成功上传。
  • 为了开始，我们需要一个表单和一个预览图片容器。制作一个index.html文件。我们需要在我们的根目录下创建一个index.html文件。
  • 创建index.html文件后，现在必须用CSS隐藏默认的浏览按钮。然后在CSS目录中创建style.css文件。
  • 我们将需要JavaScript代码来处理浏览按钮和预览图片的默认功能。用文件发送ajax请求是很容易的。
  • 在编写PHP代码之前，我们必须创建一个新的表格，上传的图片将被保存在其中。

如何创建一个jQuery ajax文件？

下面的步骤显示了如何创建一个jQuery ajax文件，如下。

创建HTML表格

在创建文件夹名称为ajax_jQuery_upload后，创建一个新的文件名称为index.html，包含以下代码。

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> JQuery Ajax File Upload </title>
</head>
<body>
<p> Ajax File Uploader </p>
<form id="formAjax" action="uploadHandling.php" method="POST">
<input type = "file" id = "fileAjax" name = "fileAjax" />  <br /> <br />
<input type = "submit" id = "submit" name = "submit" value = "Upload File" />
</form>
<p id = "status"> </p>
<script type = "text/javascript" src = "imageUpload.js">
</script>
</body>
</html>

jQuery Ajax File Upload output 1

  • 该行动表格将访问者引向一个处理图像文件上传的PHP脚本。POST是一个向服务器传输数据的协议。
  • 在这种情况下，我们不需要指定enctype属性，因为它只用于文本输入管理。

创建ajax脚本

创建完index.html文件后，下一步是创建一个ajax脚本文件，名称为imageUpload.js，如下所示。

代码

var form = document.getElementById('formAjax');
var file = document.getElementById('fileAjax');
var status = document.getElementById('status');
myForm.onsubmit = function(event)
{
event.preventDefault ();
statusP.innerHTML = 'File is uploading.’
var files = file.files;
var fData = new fData ();
var file = files[0];
if (!file.type.match ('image.*')) {
statusP.innerHTML = 'Selected file does not contains the image, kindly upload image file';
return;  }
fData.append ('fileAjax', file, file.name);
var xhr = new XMLHttpRequest();
xhr.open ('POST', '/uploadHandling.php', true);
xhr.onload = function () {
if (xhr.status == 200) {
statusP.innerHTML = 'File upload completed successfully.’
} else {
statusP.innerHTML = 'Error in file uploading, Try Again';
}    };
xhr.send (formData);
}

jQuery Ajax File Upload output 2

设置服务器php脚本，用于接受来自ajax请求的数据

在这一步创建了ajax脚本后，我们要创建一个php脚本，用来接受来自ajax请求的数据。

代码

<?php
$cdir = getcwd ();
$udir = "uploads/";
$err = [];
$fExt = ['jpeg','jpg','png','gif'];
if(!empty($_FILES['fileAjax'] ?? null))
{
$fName = $_FILES['fileAjax']['name'];
$ftName  = $_FILES['fileAjax']['tmp_name'];
$FType = $_FILES['fileAjax']['type'];
$fExt = strtolower (pathinfo ($fileName,PATHINFO_EXTENSION));
$uPath = $cdir . $udir . basename ($fName);
if (isset ($fName))
{
if (! in_array ($fExt,$fExt)) {
$errors[] = "Supported file format is only JPEG, JPG, PNG and GIF";
}
if (empty($err)) {
$didUpload = move_uploaded_file ($ftName, $uPath);
if ($didUpload) {
echo "Image " . basename ($fName) . "Uploaded successfully.";
} else
{
echo "Error occurred. Try again.";
}
} else
{
foreach ($errors as $err) {
echo $err . "Below error occurred." . "\n";
}
}
?>

output 3

在浏览器上测试ajax图片上传器。

在这一步，我们在浏览器上测试ajax图片上传器。

output 4

总结

当使用jQuery ajax上传文件时，我们需要遵循五个步骤。1) 创建一个XMLHttpRequest的实例。2) 使用XMLHttpRequest对象来设置各种处理程序。3) 创建后端，从AJAX请求中获取数据。4) 必须对表单进行验证。5）建立一个有效的受众反馈回路。

avatar
文章
阅读
粉丝