今天好好研究了一下图片上传的api,参考百度的webuploder.js-----------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/webuploader.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/webuploader.js"></script>
</head>
<body>
<div id="uploader" class="wu-example">
<!--用来存放文件信息-->
<div id="thelist" class="uploader-list">
<div id="picker">
<img src="img/all.png" style="display: block; width: 150px;height: 150px;" alt=""/>
</div>
</div>
<script>
var $list = $('#thelist');
var uploader = WebUploader.create({
swf:'/js/Uploader.swf',
// 文件接收服务端。
server: 'http://webuploader.duapp.com/server/fileupload.php',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#picker',
// 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
resize: false,
chunked: true
});
uploader.on( 'fileQueued', function( file ) {
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail" style="position:relative;float: left;width: 300px;">' +
'<img>' + '<span style="position:absolute;top:0px;right:0px;width:15px;height:15px;border-radius:50%;background:red;"></span>'+
'</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 );
}, 200, 200);
$li.on('click', function(file) {
console.log($(this).attr('id'))
uploader.removeFile($(this).attr('id'));
// uploader.reset()
console.log(uploader.getFiles('inited'))
})
});
console.log(uploader.getFiles())
</script>
</body>
</html>
贴上代码:
一 首先 是几个状态需要理解
inited
初始状态queued
已经进入队列, 等待上传progress
上传中complete
上传完成。error
上传出错,可重试interrupt
上传中断,可续传。invalid
文件不合格,不能重试上传。会自动从队列中移除。cancelled
文件被移除。
我们只需要写好dom 然后在各种监听事件中我们需更改的样式 和回调函数 、、、
uploader.removeFile($(this).attr('id'));
console.log(uploader.getFiles('inited'))
这里我重点是想说这两个回调
删除文件后在打印文件的队列 需打印最开始的状态,如果我们直接getFiles()看到的结构还是原来的数组
duplicate
{Boolean} [可选] [默认值:undefined]去重, 根据文件名字、文件大小和最后修改时间来生成hash Key.
将dupliacate设置为true, 允许文件多次上传