标签：
//注意，请自行下载最新版angularjs,webuploader.js, jquery.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="view" content="width=device-width;user-scalable=no;initial-scale=1.0">
<script src="jquery.js"></script>
<script src="angular.min.js"></script>
<!--注意点击上传css改过-->
<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>
<script>
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>
<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(){
}
});
function initImage(config) {
// 图片相关
// 文件上传相关
var imageUploader = WebUploader.create({
auto: true,
swf: ‘static/.swf‘,
server: config.imageUploadUrl,
pick: config.imagePicker,
fileVal: ‘file‘,
resize: false,
fileNumLimit: 1,
accept: {
title: ‘请选择正确类型图片‘,
extensions: ‘gif,jpg,jpeg,bmp,png‘,
mimeTypes: ‘image/*‘
}
});
imageUploader.on(‘beforeFileQueued‘, function(file) {
imageUploader.reset();
});
imageUploader.on(‘fileQueued‘, function(file) {
// 创建缩略图
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上面，进行分享哦
百度webuploader图片点击预览和上传实现（angularjs版）
标签：
原文地址：http://www.cnblogs.com/eternaluve/p/4758262.html
