jQuery插件ajaxFileUpload使用详解
简介
ajaxFileUpload 是一款非常常用的 jQuery 插件，可以轻松地实现文件上传功能。本文将详细介绍该插件的使用方法。
安装
首先，需要引入 jQuery 库和 ajaxFileUpload 插件。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="jquery.ajaxfileupload.js"></script>
基本用法
以下为 ajaxFileUpload 的基本用法：
$.ajaxFileUpload({
url: 'upload.php',
secureuri: false,
fileElementId: 'fileToUpload',
dataType: 'json',
success: function (data, status) {
if (typeof (data.error) !== 'undefined') {
if (data.error !== '') {
console.log(data.error);
} else {
console.log('File Uploaded');
}
}
},
error: function (data, status, e) {
console.log(e);
}
});
其中各参数说明如下：
- url: 上传文件的地址
- secureuri: 是否启用安全 URI
- fileElementId: 文件上传表单元素的ID
- dataType: 服务器返回的数据类型，可选 json、xml、script 或 html
- success: 成功回调函数
- error: 失败回调函数
示例1：上传图片并返回图片的URL
以下代码实现了上传图片并返回图片的URL：
<!DOCTYPE html>
<html>
<head>
<title>Ajax File Upload Plugin Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="jquery.ajaxfileupload.js"></script>
<script>
$(function () {
$('#upload').on('click', function () {
$.ajaxFileUpload({
url: 'upload.php',
secureuri: false,
fileElementId: 'fileToUpload',
dataType: 'json',
success: function (data, status) {
if (typeof (data.error) !== 'undefined') {
if (data.error !== '') {
console.log(data.error);
} else {
console.log(data.url);
$('#imgContainer').html('<img src="' + data.url + '" />');
}
}
},
error: function (data, status, e) {
console.log(e);
}
});
return false;
});
});
</script>
</head>
<body>
<form enctype="multipart/form-data" method="post">
<input type="file" name="fileToUpload" id="fileToUpload" />
<input type="button" id="upload" value="Upload" />
</form>
<div id="imgContainer"></div>
</body>
</html>
upload.php 文件的代码如下：
<?php
$uploadDir = 'uploads/';
if (!empty($_FILES['fileToUpload'])) {
$file = $_FILES['fileToUpload'];
$uploadFile = $uploadDir . basename($file['name']);
if (move_uploaded_file($file['tmp_name'], $uploadFile)) {
echo json_encode(array('url' => $uploadFile));
} else {
echo json_encode(array('error' => 'Error while uploading the file.'));
}
} else {
echo json_encode(array('error' => 'No file uploaded.'));
}
?>
这份代码实现了将文件上传到 uploads 目录中，然后返回图片的 URL。在客户端中，通过添加一个图片标签，显示图片。
示例2：上传多个文件
以下代码实现了上传多个文件：
<!DOCTYPE html>
<html>
<head>
<title>Ajax File Upload Plugin Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="jquery.ajaxfileupload.js"></script>
<script>
$(function () {
$('#upload').on('click', function () {
var files = $('#fileToUpload')[0].files;
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append('files[]', files[i]);
}
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
dataType: 'json',
success: function (data, status) {
if (typeof (data.error) !== 'undefined') {
if (data.error !== '') {
console.log(data.error);
} else {
console.log(data.url);
$('#imgContainer').html('<img src="' + data.url + '" />');
}
}
},
error: function (data, status, e) {
console.log(e);
}
});
return false;
});
});
</script>
</head>
<body>
<form enctype="multipart/form-data" method="post">
<input type="file" name="fileToUpload" id="fileToUpload" multiple/>
<input type="button" id="upload" value="Upload" />
</form>
<div id="imgContainer"></div>
</body>
</html>
upload.php 文件的代码如下：
<?php
$uploadDir = 'uploads/';
$result = array();
if (!empty($_FILES['files'])) {
$files = $_FILES['files'];
foreach ($files['name'] as $key => $value) {
$uploadFile = $uploadDir . basename($value);
if (move_uploaded_file($files['tmp_name'][$key], $uploadFile)) {
$result[] = array('name' => $value, 'url' => $uploadFile);
} else {
$result[] = array('name' => $value, 'error' => 'Error while uploading the file.');
}
}
} else {
$result[] = array('error' => 'No file uploaded.');
}
echo json_encode($result);
?>
这份代码实现了将每个文件上传到 uploads 目录中，然后返回文件名和 URL。在客户端中，通过添加一个图片标签和一个 anchor 标签，显示每个文件的缩略图和下载链接。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery插件ajaxFileUpload使用详解 - Python技术站
微信扫一扫 
支付宝扫一扫 