webuploader上传多张照片的基本功能<script type="text/javascript" src="ht

webuploader上传多张照片的基本功能

[html]

<script type="text/javascript" src="fex.baidu.com/webuploader…>


<link rel="stylesheet" type="text/css" href="fex.baidu.com/webuploader…">
<script type="text/javascript" src="fex.baidu.com/webuploader…>

<style type="text/css">
.selfmedia_addtemplate_imgDelSpan{background: #999;border-radius: 10px;padding: 3px 7px;display: inline-block;position: absolute;margin-left: -18px;margin-top: -9px;}
.selfmedia_addtemplate_imgDelSpan:hover{background: red;cursor: pointer;}
</style>

<div class="maincontent clearfix">
<div id="uploader-demo">

<div id="thelist" style="width:512px;height:73px" class="uploader-list"></div>
<div>
<div id="filePicker">选择图片</div>

</div>
</div>
</div>
<script type="text/javascript">
var weitoutiaoPhotoId = [];
$(function(){
var $list = $("#thelist");   //初始化
//var $btn =$("#ctlBtn");   //开始上传
var thumbnailWidth = 56;   //缩略图高度和宽度（单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档
var thumbnailHeight = 56;

var uploader = WebUploader.create({
auto: true,     // 选完文件后，是否自动上传。

// swf文件路径
swf: 'js/webuploader/Uploader.swf', //

// 文件接收服务端。
server: '/test/publish/photoupload', // 文件接收服务端

// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#filePicker',
fileNumLimit:9,   //文件最多九个
threads:1,       //上传并发数。上传多个会出现问题
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
method:'POST',
});

// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) { // webuploader事件.当选择文件后，文件被加载到文件队列中，触发该事件。等效于 uploader.onFileueued = function(file){...} ，类似js的事件定义。
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail" style="float:left">' +
'<img>' +
'<span title="删除" class="selfmedia_addtemplate_imgDelSpan remove-this" id="span_'+file.id+'" div_id="' + file.id + '">X</span>'+
//'<div class="info">' + file.name + '</div>' +
'</div>'
),
$img = $li.find('img');

$list.append( $li );     // $list为容器jQuery实例

//删除操作
$li.on('click', '.remove-this', function() {
uploader.removeFile( file, true );   //移除某一文件, 默认只会标记文件状态为已取消，如果第二个参数为 true 则会从 queue 中移除。

helperuser_publish_delWeiToutiaoPicture(this, file.id);
});

/** 创建缩略图如果为非图片文件，可以不用调用此方法。
thumbnailWidth x thumbnailHeight 为 100 x 100 */
uploader.makeThumb( file, function( error, src ) {   //webuploader方法
if ( error ) {
$img.replaceWith('<span>不能预览</span>');
return;
}

$img.attr( 'src', src );
}, thumbnailWidth, thumbnailHeight );
});

//点击上传操作
/*$btn.on( 'click', function() {
//$('#photopicker').refresh();   //刷新选择框，继续选图片
console.log("上传...");
uploader.upload();
console.log("上传结束...");
}); */

// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on( 'uploadSuccess', function( file, response ) {
weitoutiaoPhotoId.push(response.data);//累加微头条的图片ID
var successLi = $('#'+file.id);
var success = successLi.find('div.success');
if(!success.length){
success = $('<div class="success"></div>').appendTo(successLi);
}
success.html('<span style="font-size: 12px;color:green">上传成功</span>');
$('<div id='+file.id+'></div>').appendTo(success);

//找到 × 给 × 的data属性赋值，用于删除数组中的文件ID
var chaSpan = $('#span_'+file.id);   //找到span元素赋data属性
chaSpan.attr('data', response.data);   //给span加上data属性
});

// 文件上传失败，显示上传出错。
uploader.on( 'uploadError', function( file ) {
var errorLi = $('#'+file.id);
var error = errorLi.find('div.success');
if(!error.length){
error = $('<div class="success"></div>').appendTo(errorLi);
}
error.html('<span style="font-size: 12px;color:red">上传失败</span>');
$('<div id='+file.id+'></div>').appendTo(error);
});

});

/**
* @todo删除图片操作
* @param obj span × 按钮对象
* @param file_id 整张图片的ID
*/
function helperuser_publish_delWeiToutiaoPicture(obj, file_id){
var photo_id = $(obj).attr('data');
$('#'+file_id).remove();   //移除整张图片样式

weitoutiaoPhotoId.splice($.inArray(photo_id,weitoutiaoPhotoId),1);   //删除数组的该文件ID
}

</script>
</body>
</html>

[结果]
上传成功返回的json为：
{"status":"success","message":"\u4e0a\u4f20\u6210\u529f\uff01","data":"8756"}