解析ajaxFileUpload 异步上传文件简单使用攻略
异步上传文件简介
在传统的表单提交中,如果需要上传文件,则需要重新加载整个页面,用户体验并不好,而且上传大文件还会影响页面的响应速度。而异步上传则是采用ajax技术,实现上传文件的同时不刷新整个页面,从而提升用户体验。
ajaxFileUpload 简介
在实现异步上传功能的过程中,ajaxFileUpload是一个非常优秀的第三方JavaScript库,它可以帮助我们轻松实现上传文件的异步功能,支持多文件上传、文件大小限制等常见功能。
ajaxFileUpload 使用步骤
- 引入ajaxFileUpload库文件
我们需要先引入ajaxFileUpload的库文件,具体可以在官方网站(https://plugins.jquery.com/ajaxFileUpload/)下载:
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.ajaxfileupload.js"></script>
- 创建上传按钮
我们可以在HTML页面中创建一个上传按钮,通过点击按钮触发上传操作,例如:
<input type="file" id="fileToUpload"/>
<button id="btnUpload">上传</button>
- 绑定上传事件
我们需要编写JavaScript脚本,将上传按钮绑定上传事件,例如:
$("#btnUpload").click(function () {
$.ajaxFileUpload({
url: 'upload.php',
secureuri: false,
fileElementId: 'fileToUpload',
dataType: 'json',
success: function (data, status) {
if (data.status === 'success') {
alert('上传成功!');
} else {
alert('上传失败:' + data.message);
}
},
error: function (data, status, e) {
alert('上传失败:' + e);
}
});
});
其中,我们需要提供四个参数:
- url:指定上传文件的后端处理接口。
- secureuri:是否使用安全接口。
- fileElementId:指定需要上传的文件的DOM元素ID。
-
dataType:指定响应数据的返回格式。
-
后端接口处理
当我们上传文件时,我们需要后端接口部署一个处理上传请求的方法,例如PHP代码如下:
<?php
$uploadDir = 'uploads/';
$allowedExt = array('jpg', 'jpeg', 'gif', 'png'); // 允许上传的文件类型(扩展名)
$result = array('status' => 'error', 'message' => '未知错误');
if ($_FILES["fileToUpload"]["error"] > 0) {
switch ($_FILES["fileToUpload"]["error"]) {
case UPLOAD_ERR_INI_SIZE:
$result['message'] = '文件大小超出了服务器的空间限制,请选择更小的文件。';
break;
case UPLOAD_ERR_FORM_SIZE:
$result['message'] = '文件大小超出了表单的限制,最大支持100MB。';
break;
case UPLOAD_ERR_PARTIAL:
$result['message'] = '文件只有部分被上传。';
break;
case UPLOAD_ERR_NO_FILE:
$result['message'] = '没有选择上传文件。';
break;
case UPLOAD_ERR_NO_TMP_DIR:
$result['message'] = '服务器错误,请联系管理员。';
break;
case UPLOAD_ERR_CANT_WRITE:
$result['message'] = '文件写入失败,请检查权限。';
break;
default:
$result['message'] = '未知错误。';
break;
}
} else {
$fileName = $_FILES["fileToUpload"]["name"];
$fileExt = strtolower(pathinfo($_FILES["fileToUpload"]["name"], PATHINFO_EXTENSION));
if (in_array($fileExt, $allowedExt)) {
$fileName = md5(uniqid() . time()) . '.' . $fileExt;
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $uploadDir . $fileName)) {
$result['status'] = 'success';
$result['message'] = '上传成功。';
} else {
$result['message'] = '文件保存失败,请检查权限。';
}
} else {
$result['message'] = '文件类型不支持,支持jpg、jpeg、gif、png。';
}
}
echo json_encode($result);
?>
该PHP代码会接收前端传递的上传文件信息,进行文件类型和大小检查后,将文件保存到指定的目录($uploadDir)中,并将上传结果以JSON格式进行返回。
示例说明
示例一:基本上传
首先我们来看一个最基本的上传示例,代码如下:
<html>
<head>
<title>基本上传</title>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.ajaxfileupload.js"></script>
</head>
<body>
<input type="file" id="fileToUpload"/><br/><br/>
<button id="btnUpload">上传</button>
<script>
$(function () {
$("#btnUpload").click(function () {
$.ajaxFileUpload({
url: 'upload.php',
secureuri: false,
fileElementId: 'fileToUpload',
dataType: 'json',
success: function (data, status) {
if (data.status === 'success') {
alert('上传成功!');
} else {
alert('上传失败:' + data.message);
}
},
error: function (data, status, e) {
alert('上传失败:' + e);
}
});
});
});
</script>
</body>
</html>
我们将该代码保存为index.html,并在同级目录下创建一个upload.php文件。然后运行该网页,选择任意一个图片文件并上传,我们可以看到上传状态的提示,上传成功后我们能够在upload/目录中找到我们上传的图片文件。如果上传失败,我们也能够看到失败的原因。
示例二:调用插件的各种高级参数
在这个示例中,我们将介绍如何利用ajaxFileUpload库的高级参数(如:autoSubmit、allowedTypes、maxSize等),这些参数可以让我们自动提交表单、限制文件大小和类型等。
<html>
<head>
<title>高级上传</title>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.ajaxfileupload.js"></script>
</head>
<body>
<input type="file" id="fileToUpload"/><br/><br/>
<button id="btnUpload">上传</button>
<script>
$(function () {
$("#btnUpload").click(function () {
$.ajaxFileUpload({
url: 'upload.php',
secureuri: false,
fileElementId: 'fileToUpload',
dataType: 'json',
autoSubmit: true, // 自动提交表单
allowedTypes: ['jpg', 'jpeg', 'gif', 'png'], // 允许的文件类型
maxSize: 10 * 1024 * 1024, // 最大10MB
success: function (data, status) {
if (data.status === 'success') {
alert('上传成功!');
} else {
alert('上传失败:' + data.message);
}
},
error: function (data, status, e) {
alert('上传失败:' + e);
}
});
});
});
</script>
</body>
</html>
和之前的实例一样,我们应该先创建upload.php文件,该文件的代码需要做出如下改动:
将allowedExt数组改为allowedTypes,maxFileSize改为maxSize。
<?php
$uploadDir = 'uploads/';
$allowedTypes = array('jpg', 'jpeg', 'gif', 'png'); // 允许上传的文件类型(扩展名)
$maxSize = 10 * 1024 * 1024; // 允许上传的文件大小(字节)
$result = array('status' => 'error', 'message' => '未知错误');
if ($_FILES["fileToUpload"]["error"] > 0) {
// 省略错误处理代码...
} else {
$fileName = $_FILES["fileToUpload"]["name"];
$fileExt = strtolower(pathinfo($_FILES["fileToUpload"]["name"], PATHINFO_EXTENSION));
if (in_array($fileExt, $allowedTypes) && $_FILES["fileToUpload"]["size"] <= $maxSize) {
// 省略文件保存代码...
} else {
$result['message'] = '文件类型不支持,支持jpg、jpeg、gif、png,并且大小不超过10MB。';
}
}
echo json_encode($result);
?>
我们将代码保存为index.html,并打开该网页,我们可以发现它具有自动提交表单、限制文件大小和类型等高级特性。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:解析ajaxFileUpload 异步上传文件简单使用 - Python技术站