百度webuploader图片点击预览和上传实现（angularjs版）

时间：2015-08-25 20:55:52 收藏：1 阅读：9292

//注意，请自行下载最新版angularjs,webuploader.js, jquery.js

<!DOCTYPE html>
<html>

<link href="webuploader.css" rel="stylesheet">
<script src="webuploader.js"></script>

<style>

.image-host{

width:100%;

}

.image-block{

position:relative;
width:100px;
height:100px;

margin:10px 10px;
float:left;
display:inline-block;

}

.image-block img{

width:100px;
height:100px;

}

</style>
</head>

<body>

angular.module(‘imgApp‘,[]).controller(‘imgController‘,function($http,$rootScope){

$rootScope.imgArr = [{‘url‘:‘http://ww3.sinaimg.cn/mw600/672ac5f1jw1dyvqs9ya0zj.jpg‘},{‘url‘:‘http://ww3.sinaimg.cn/mw600/672ac5f1jw1dyvqs9ya0zj.jpg‘},{‘url‘:‘http://ww3.sinaimg.cn/mw600/672ac5f1jw1dyvqs9ya0zj.jpg‘}];

});
</script>

var imgurlArr = new Array();

jQuery(function($) {
var config = {

swfUri: ‘/webuploader/0.1.5/.swf‘,

tokenUrl : ‘http://xx.com/uploadtoken‘,
imageUrl : ‘http://yy.com‘,
imageUploadUrl : ‘http://upload.qiniu.com/‘,
thumbnailWidth : 100,//285,
thumbnailHeight : 100//204
}

var appElement =$(‘div[ng-controller=imgController]‘);
var $scope = angular.element(appElement).scope();

//根据想要设置的图片数量，通过imgarr来调节，动态生成相应数量的点击上传控件
var imglen = $scope.imgArr.length;
for(var i=0;i<imglen;i++)
initImage({ imageUploadUrl: config.imageUploadUrl, imagePicker: ‘#image-picker‘+i,
imageList: ‘#image-box‘+i, imageUrl: config.imageUrl, imageField: ‘#image-url‘+i,
width: config.thumbnailWidth, height: config.thumbnailHeight});

// 全局令牌
$.ajax({
url: config.tokenUrl,
type: ‘POST‘,
dataType:‘json‘,
crossDomain: true,
withCredentials: true,
success: function(json) {
gToken = json.token;

//下面这段被注释掉，如果只是实现预览功能，上面那部分就可以实现，如果要实现上传，那么还需要和图片存储服务器交互，
//这里使用的是qiniu服务的服务，如果选择任意的服务器，将服务器域名修改，并将下面这段注释去掉，并注释上面那相同的部分，就可以
//在上传成功里看到响应了
/* var imglen = $scope.imgArr.length;
for(var i=0;i<imglen;i++)
initImage({token: gToken, imageUploadUrl: config.imageUploadUrl, imagePicker: ‘#image-picker‘+i,
imageList: ‘#image-box‘+i, imageUrl: config.imageUrl, imageField: ‘#image-url‘+i,
width: config.thumbnailWidth, height: config.thumbnailHeight});

},
error:function(){
}
});

// 创建缩略图
imageUploader.makeThumb( file, function(error, src) {
if (error) {
$img.replaceWith(‘<span>不能预览</span>‘);
return;
}

//通过config.imagePicker，我们获知具体是哪个图片框被点击选择图片，作为判断填充图片的id
var imageIndex = config.imagePicker.substr(13);

//填充图片64编码地址，不是服务器url，只有成功上传后才能在下面的onsuccess里获取，所以不影响预览
$scope.imgArr[imageIndex].url = src;
$scope.$apply();

}, config.width, config.height);

$(config.imagePicker).find(‘.webuploader-pick‘).text(‘重新选择‘);
});
imageUploader.on(‘uploadBeforeSend‘, function(object, data, headers) {
data.token = config.token;
});
imageUploader.on(‘uploadSuccess‘, function(file, response) {

//这里获取服务器响应的数据，需要和qiniu或者你自己选择的服务商商定
alert(response.key);

//这里会在隐藏的input里填充从服务器获取的图片url
$(config.imageField).val(config.imageUrl + ‘/‘ + response.key);
imageUploader.reset();
});
imageUploader.on(‘uploadError‘, function(file) {

imageUploader.reset();
});

}

});

</script>
<div class="image-host" ng-app="imgApp" ng-controller="imgController">
<div class="image-block" ng-repeat="one in imgArr">
<input type="hidden" id="image-url{{$index}}" >
<div id="image-box{{$index}}"><img ng-src="{{one.url}}"></div>
<div id="image-picker{{$index}}" >选择图片</div>
</div>

</div>

</body>
</html>

下面是修改后的webuploder.css

.webuploader-container {
position: relative;
}
.webuploader-element-invisible {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px,1px,1px,1px);
}
.webuploader-pick {
position: relative;
display: inline-block;
cursor: pointer;
background: #5CB85C;
width:100px;
padding: 6px 15px;
color: #fff;
text-align: center;
border-radius: 3px;
overflow: hidden;

}
.webuploader-pick-hover {
background: #50B64E;
}

.webuploader-pick-disable {
opacity: 0.6;
pointer-events:none;
}

.webuploader-container>div {
width:86px;

}

下一篇，将讲解，批量拖动图片预览，和点击后批量上传，由于要修改百度webpuloader.js，所以源代码会放置到github上面，进行分享哦