一、uploadifive介绍
uploadifive是一款基于jQuery的开源文件上传插件，可以将文件快速上传到服务器。相比较其他文件上传插件，uploadifive具有过程可视化、上传进度条、文件队列等特点。除了可以上传文件外，还支持取消上传、上传前的自定义验证、上传完成后的回调等功能。
以下是一个简单的uploadifive文件上传示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>uploadifive示例</title>
<script src="jquery.min.js"></script>
<script src="jquery.uploadifive.min.js"></script>
<link rel="stylesheet" type="text/css" href="uploadifive.css">
</head>
<body>
<input type="file" name="file_upload" id="file_upload">
<script>
$('#file_upload').uploadifive({
'uploadScript' : 'upload.php', // 上传地址
'buttonText' : '选择文件', // 按钮文本
'fileSizeLimit': '2MB', // 文件大小限制
'uploadLimit' : 5, // 单次上传数量限制
'queueSizeLimit' : 10, // 文件队列数量限制
'onUploadComplete' : function(file, data) { // 上传完成回调函数
console.log(file.name + ' 上传成功！');
}
});
</script>
</body>
</html>
二、上传前的验证
在上传文件之前，通常需要对文件进行验证，比如判断文件大小、类型等是否符合要求。uploadifive提供了一个回调函数，可以在上传之前对文件进行验证。
以下是通过回调函数进行文件验证的示例：
<script>
$('#file_upload').uploadifive({
'uploadScript' : 'upload.php',
'buttonText' : '选择文件',
'fileSizeLimit': '2MB',
'uploadLimit' : 5,
'queueSizeLimit' : 10,
'onUploadComplete' : function(file, data) {
console.log(file.name + ' 上传成功！');
},
'onUploadStart' : function(file) { // 上传前的回调函数
if (!(/\.(jpg|jpeg|png|gif)$/i).test(file.name)) { // 限制文件类型为jpg、png、gif
alert('只能上传图片文件！');
return false;
}
if (file.size > 2 * 1024 * 1024) { // 限制文件大小为2MB
alert('文件大小超出限制！');
return false;
}
}
});
</script>
三、上传进度条
uploadifive支持上传进度条，可以让用户清楚地看到文件上传的进度。进度条的样式可以通过自定义CSS进行修改。
以下是添加上传进度条的示例：
<link rel="stylesheet" type="text/css" href="uploadifive.css">
<script>
$('#file_upload').uploadifive({
'uploadScript' : 'upload.php',
'buttonText' : '选择文件',
'fileSizeLimit': '2MB',
'uploadLimit' : 5,
'queueSizeLimit' : 10,
'onUploadComplete' : function(file, data) {
console.log(file.name + ' 上传成功！');
},
'onProgress' : function(file, e) { // 上传过程中的回调函数
var percent = Math.round((e.loaded / e.total) * 100); // 计算上传进度
$('#file_upload').find('.uploadifive-progress .progress-bar').css('width', percent + '%'); // 设置进度条长度
}
});
</script>
四、文件队列
uploadifive支持文件队列，可以让用户清楚地看到当前上传的文件情况。文件队列的样式可以通过自定义CSS进行修改。
以下是添加文件队列的示例：
<link rel="stylesheet" type="text/css" href="uploadifive.css">
<script>
$('#file_upload').uploadifive({
'uploadScript' : 'upload.php',
'buttonText' : '选择文件',
'fileSizeLimit': '2MB',
'uploadLimit' : 5,
'queueSizeLimit' : 10,
'onUploadComplete' : function(file, data) {
console.log(file.name + ' 上传成功！');
},
'onProgress' : function(file, e) {
var percent = Math.round((e.loaded / e.total) * 100);
$('#file_upload').find('.uploadifive-progress .progress-bar').css('width', percent + '%');
},
'onAddQueueItem' : function(file) { // 添加文件到队列时的回调函数
$('#file_upload_queue').append('<div class="uploadifive-queue-item"><span class="uploadifive-queue-item-name">' + file.name + '</span><span class="uploadifive-queue-item-size">' + Math.round(file.size / 1024) + 'KB</span></div>');
},
'onUpload' : function(filesToUpload) { // 开始上传时的回调函数
$('#file_upload_queue').find('.uploadifive-queue-item').addClass('processing');
},
'onUploadComplete' : function(file, data) {
$('#file_upload_queue').find('.uploadifive-queue-item.processing').remove();
}
});
</script>
<div id="file_upload_queue"></div>
五、取消上传
uploadifive支持取消上传，可以让用户取消正在上传的文件。取消上传的文件可以从文件队列中移除。
以下是添加取消上传功能的示例：
<link rel="stylesheet" type="text/css" href="uploadifive.css">
<script>
$('#file_upload').uploadifive({
'uploadScript' : 'upload.php',
'buttonText' : '选择文件',
'fileSizeLimit': '2MB',
'uploadLimit' : 5,
'queueSizeLimit' : 10,
'onUploadComplete' : function(file, data) {
console.log(file.name + ' 上传成功！');
},
'onProgress' : function(file, e) {
var percent = Math.round((e.loaded / e.total) * 100);
$('#file_upload').find('.uploadifive-progress .progress-bar').css('width', percent + '%');
},
'onAddQueueItem' : function(file) {
$('#file_upload_queue').append('<div class="uploadifive-queue-item" id="' + file.id + '"><span class="uploadifive-queue-item-name">' + file.name + '</span><span class="uploadifive-queue-item-size">' + Math.round(file.size / 1024) + 'KB</span><span class="uploadifive-queue-item-cancel">取消</span></div>');
$('#' + file.id + ' .uploadifive-queue-item-cancel').click(function() { // 点击取消按钮时取消上传
var cancelled = $('#file_upload').uploadifive('cancel', file.id); // 取消上传
if (cancelled) { // 移除文件队列中的文件
$('#' + file.id).remove();
}
});
},
'onUpload' : function(filesToUpload) {
$('#file_upload_queue').find('.uploadifive-queue-item').addClass('processing');
},
'onUploadComplete' : function(file, data) {
$('#file_upload_queue').find('.uploadifive-queue-item.processing').remove();
}
});
</script>
<div id="file_upload_queue"></div>
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/285766.html
微信扫一扫 
支付宝扫一扫 