下面我会为你讲解一下如何使用ajaxFileupload实现多文件上传功能,包含两个示例。
什么是ajaxFileupload?
ajaxFileupload 是基于jQuery 的一个文件上传插件,支持异步上传文件,将文件上传到服务器的同时还支持在当前页面显示文件上传的进度。
实现步骤
以下是实现ajaxFileupload上传文件功能的步骤:
1. 引入必要的文件
首先要把必要的文件引入,主要就是jquery和ajaxfileupload.js:
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajaxfileupload/3.0.1/ajaxfileupload.js"></script>
2. 编写上传文件的表单
在html中加入一个表单,表单中包含一个选择文件的input和一个上传按钮:
<form id="uploadForm" method="post" enctype="multipart/form-data">
<input type="file" name="file" multiple>
<button type="button" id="uploadBtn">上传</button>
</form>
需要注意的是,这里需要设置input的multiple属性,才能实现多文件上传。
3. 使用ajaxFileupload发送上传请求
在上传按钮的点击事件中使用ajax上传文件,同时可以加入一些参数,比如上传成功之后的回调函数:
$("#uploadBtn").click(function() {
// 需要上传的文件input
var fileInput = $("input[name='file']");
// 文件数据
var fileData = fileInput[0].files;
// 上传地址
var uploadUrl = "/upload.php";
// 自定义数据
var extraData = {
somekey: "somevalue",
otherkey: "othervalue"
};
// 开始上传
$.ajaxFileUpload({
url: uploadUrl, //上传地址
secureuri: false,
fileElementId: fileInput.attr("name"),//文件数据的变量名
dataType: 'json',//返回值类型 一般设置为json
data: extraData,//自定义参数
success: function (data, status) {
//上传成功的回调函数
},
error: function (data, status, e) {
//上传失败的回调函数
}
});
});
这里需要注意的是,fileElementId一定要设置为文件选择input的name属性,dataType一定要设置为json,因为ajaxfileupload上传之后返回的结果数据类型是json。
4. 接收上传文件并保存到服务器
最后根据自己的实际情况在服务器端接收上传的文件,并且将上传成功之后的结果返回给前端页面。
示例1:上传文件到服务器
下面是一个上传文件到服务器的示例,上传页面代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajaxFileupload上传文件到服务器</title>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajaxfileupload/3.0.1/ajaxfileupload.js"></script>
</head>
<body>
<form id="uploadForm" method="post" enctype="multipart/form-data">
<input type="file" name="file" multiple>
<button type="button" id="uploadBtn">上传</button>
</form>
<br />
<div id="result"></div>
<script>
$("#uploadBtn").click(function() {
// 需要上传的文件input
var fileInput = $("input[name='file']");
// 文件数据
var fileData = fileInput[0].files;
// 上传地址
var uploadUrl = "/upload.php";
// 开始上传
$.ajaxFileUpload({
url: uploadUrl, //上传地址
secureuri: false,
fileElementId: fileInput.attr("name"),//文件数据的变量名
dataType: 'json',//返回值类型 一般设置为json
success: function (data, status) {
$("#result").html(data.message);
},
error: function (data, status, e) {
$("#result").html(e);
}
});
});
</script>
</body>
</html>
这里的上传地址是/upload.php,接收上传文件的php代码如下:
<?php
$uploadFile = $_FILES['file'];
$fileName = $uploadFile['name'];
$fileSize = $uploadFile['size'];
$fileType = $uploadFile['type'];
$error = $uploadFile['error'];
$tmpName = $uploadFile['tmp_name'];
if ($error) {
$result = array('code' => -1, 'message' => '出错啦:' . $error);
} else {
// 将文件移动到指定目录
$moveResult = move_uploaded_file($tmpName, './uploads/' . $fileName);
if ($moveResult) {
$result = array('code' => 0, 'message' => '上传成功!');
} else {
$result = array('code' => -1, 'message' => '出错啦:无法移动文件。');
}
}
echo json_encode($result);
?>
这里将上传的文件移动到了./uploads/目录下,上传成功之后会返回json格式的结果,页面上会显示上传的结果。
示例2:上传文件到七牛云存储
下面是一个上传文件到七牛云存储的示例,上传页面代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajaxFileupload上传文件到七牛云存储</title>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajaxfileupload/3.0.1/ajaxfileupload.js"></script>
</head>
<body>
<form id="uploadForm" method="post" enctype="multipart/form-data">
<input type="file" name="file" multiple>
<button type="button" id="uploadBtn">上传</button>
</form>
<br />
<div id="result"></div>
<script>
$("#uploadBtn").click(function() {
// 需要上传的文件input
var fileInput = $("input[name='file']");
// 文件数据
var fileData = fileInput[0].files;
// 上传地址
var uploadUrl = "http://up.qiniu.com/";
// 上传的文件名字,这里为了避免文件名重复使用时间戳
var fileName = new Date().getTime().toString(36) + ".jpg";
// 需要配置的:七牛上传凭证
var token = "Your Token";
// 需要配置的:七牛上传空间名
var bucketName = "Your Bucket Name";
// 开始上传
$.ajaxFileUpload({
type: 'post',
url: uploadUrl, //上传地址
secureuri: false,
fileElementId: fileInput.attr("name"),//文件数据的变量名
dataType: 'json',//返回值类型 一般设置为json
data: {
key: fileName, //上传的文件名字
token: token //七牛upload token
},
success: function (data, status) {
// 上传成功之后,将图片url返回并在页面显示
var qiniuUrl = "http://" + bucketName + ".qiniudn.com/" + fileName;
$("#result").html('<img src="' + qiniuUrl + '">');
},
error: function (data, status, e) {
$("#result").html(e);
}
});
});
</script>
</body>
</html>
这里使用ajaxFileupload上传文件到七牛云存储,需要在上传参数中加入几个必要的参数,比如:
- 上传地址要使用七牛云存储的上传地址:http://up.qiniu.com/
- 文件名字要用时间戳保证不会重复
- 配置七牛云存储的upload token和bucket name
上传成功之后,可以通过拼接七牛云存储的图片url来显示上传的图片。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:ajaxFileupload实现多文件上传功能 - Python技术站