JS - 文件上传组件WebUploader使用详解6（图片上传1：带缩略图预览）
作者：hangge | 2019-01-23 08:10
无论在 PC 端还是移动端，图片上传功能都很常见。与普通的文件上传相比，图片上传通常还需要实现文件过滤、图片预览、图片压缩等功能。下面通过样例进行演示。
（2）服务端代码（upload.php）
关于图片压缩：默认情况下，如果是 jpeg 图片，在上传前 WebUploader 会自动对其压缩一把再上传。我们可以在初始化配置中修改压缩参数，或者改成不压缩。
1，效果图
- 点击“选择图片”按钮后，弹出文件选择框，并且只允许选择图片类型的文件。
- 图片选择完毕后会生成缩略图显示在页面上，并且开始自动上传。
- 对于 jpeg 图片，上传前会压缩一把再上传。
- 上传的过程中，缩略图上方会实时显示当前的进度条。
- 当上传成功后，缩略图上方会显示成功信息。
- 而上传失败时，缩略图上方会显示失败信息。
2，样例代码
（1）客户端代码（index.html）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader/webuploader.css">
<!--引入JS-->
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="webuploader/webuploader.js"></script>
<script type="text/javascript">
$(function() {
//文件信息显示区域
var $list = $('#fileList');
// 设备像素比
var ratio = window.devicePixelRatio || 1;
// 显示的缩略图大小
var thumbnailWidth = 100 * ratio;
var thumbnailHeight = 100 * ratio;
//初始化Web Uploader
var uploader = WebUploader.create({
// 选完文件后，是否自动上传。
auto: true,
// swf文件路径
swf: 'webuploader/Uploader.swf',
// 文件接收服务端。
server: 'http://www.hangge.com/upload.php',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#picker',
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
// 当有文件被添加进队列的时候（选择文件后调用）
uploader.on( 'fileQueued', function( file ) {
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail">' +
'<img>' +
'<div class="info">' + file.name + '</div>' +
'</div>'
),
$img = $li.find('img');
// $list为容器jQuery实例
$list.append( $li );
// 创建缩略图
// 如果为非图片文件，可以不用调用此方法。
// thumbnailWidth x thumbnailHeight 为 100 x 100
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr( 'src', src );
}, thumbnailWidth, thumbnailHeight );
});
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress span');
// 避免重复创建
if ( !$percent.length ) {
$percent = $('<p class="progress"><span></span></p>')
.appendTo( $li )
.find('span');
}
$percent.css( 'width', percentage * 100 + '%' );
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on( 'uploadSuccess', function( file ) {
var $li = $( '#'+file.id ),
$success = $li.find('div.success');
// 避免重复创建
if ( !$success.length ) {
$success = $('<div class="success"></div>').appendTo( $li );
}
$success.text('上传成功');
});
// 文件上传失败后会调用，显示上传出错。
uploader.on( 'uploadError', function( file ) {
var $li = $( '#'+file.id ),
$error = $li.find('div.error');
// 避免重复创建
if ( !$error.length ) {
$error = $('<div class="error"></div>').appendTo( $li );
}
$error.text('上传失败');
});
// 文件上传完毕后会调用,删除进度条。（不管成功还是失败）
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').remove();
});
});
</script>
<style>
#uploader-demo {
position: relative;
padding: 45px 15px 15px;
margin: 15px 0;
background-color: #fafafa;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
border-color: #e5e5e5 #eee #eee;
border-style: solid;
border-width: 1px 0;
}
#uploader-demo .thumbnail {
width: 110px;
height: 110px;
}
#uploader-demo .thumbnail img {
width: 100%;
}
.uploader-list {
width: 100%;
overflow: hidden;
}
.file-item {
float: left;
position: relative;
margin: 0 20px 20px 0;
padding: 4px;
}
.file-item .error {
position: absolute;
top: 4px;
left: 4px;
right: 4px;
background: red;
color: white;
text-align: center;
height: 20px;
font-size: 14px;
line-height: 23px;
}
.file-item .success {
position: absolute;
top: 4px;
left: 4px;
right: 4px;
background: green;
color: white;
text-align: center;
height: 20px;
font-size: 14px;
line-height: 23px;
}
.file-item .info {
position: absolute;
left: 4px;
bottom: 4px;
right: 4px;
height: 20px;
line-height: 20px;
text-indent: 5px;
background: rgba(0, 0, 0, 0.6);
color: white;
overflow: hidden;
white-space: nowrap;
text-overflow : ellipsis;
font-size: 12px;
z-index: 10;
}
.file-item .progress {
position: absolute;
right: 4px;
top: 4px;
height: 3px;
left: 4px;
height: 4px;
overflow: hidden;
z-index: 15;
margin:0;
padding: 0;
border-radius: 0;
background: transparent;
}
.file-item .progress span {
display: block;
overflow: hidden;
width: 0;
height: 100%;
background: green;
}
</style>
</head>
<body>
<!--dom结构部分-->
<div id="uploader-demo">
<!--用来存放item-->
<div id="fileList" class="uploader-list"></div>
<div id="picker">选择图片</div>
</div>
</body>
</html>
（2）服务端代码（upload.php）
服务端代码见我之前写的这篇文章：JS - 文件上传组件WebUploader使用详解1（带进度的文件上传）
全部评论（0）