标签:
很多用户不懂怎么写上传完成后的处理事件。我带大家来写个。
/*global Qiniu */
/*global plupload */
/*global FileProgress */
/*global hljs */
$(function() {
var uploader = Qiniu.uploader({
runtimes: ‘html5,flash,html4‘,
browse_button: ‘pickfiles‘,
container: ‘container‘,
drop_element: ‘container‘,
max_file_size: ‘100mb‘,
flash_swf_url: ‘js/plupload/Moxie.swf‘,
dragdrop: true,
chunk_size: ‘4mb‘,
uptoken_url: "servlet/responseHandler",
domain: $(‘#domain‘).val(),
// downtoken_url: ‘/downtoken‘,
// unique_names: true,
// save_key: true,
// x_vars: {
// ‘id‘: ‘1234‘,
// ‘time‘: function(up, file) {
// var time = (new Date()).getTime();
// // do something with ‘time‘
// return time;
// },
// },
auto_start: true,
init: {
‘FilesAdded‘: function(up, files) {
$(‘table‘).show();
$(‘#success‘).hide();
plupload.each(files, function(file) {
var progress = new FileProgress(file, ‘fsUploadProgress‘);
progress.setStatus("缁?澶?绶?...");
});
},
‘BeforeUpload‘: function(up, file) {
var progress = new FileProgress(file, ‘fsUploadProgress‘);
var chunk_size = plupload.parseSize(this.getOption(‘chunk_size‘));
if (up.runtime === ‘html5‘ && chunk_size) {
progress.setChunkProgess(chunk_size);
}
},
‘UploadProgress‘: function(up, file) {
var progress = new FileProgress(file, ‘fsUploadProgress‘);
var chunk_size = plupload.parseSize(this.getOption(‘chunk_size‘));
progress.setProgress(file.percent + "%", up.total.bytesPerSec, chunk_size);
},
‘UploadComplete‘: function() {
$(‘#success‘).show();
// alert("woaini");
// var v = 4,
// document.getElementById(‘woaini‘).outerHTML = ‘<a>woaini</a>‘;
// alert("wobuai");
},
‘FileUploaded‘: function(up, file, info) {
var progress = new FileProgress(file, ‘fsUploadProgress‘);
progress.setComplete(up, info);
},
‘Error‘: function(up, err, errTip) {
$(‘table‘).show();
var progress = new FileProgress(err.file, ‘fsUploadProgress‘);
progress.setError();
progress.setStatus(errTip);
}
// ,
// ‘Key‘: function(up, file) {
// var key = "";
// // do something with key
// return key
// }
}
});
uploader.bind(‘FileUploaded‘, function() {
console.log(‘hello man,a file is uploaded‘);
});
$(‘#container‘).on(
‘dragenter‘,
function(e) {
e.preventDefault();
$(‘#container‘).addClass(‘draging‘);
e.stopPropagation();
}
).on(‘drop‘, function(e) {
e.preventDefault();
$(‘#container‘).removeClass(‘draging‘);
e.stopPropagation();
}).on(‘dragleave‘, function(e) {
e.preventDefault();
$(‘#container‘).removeClass(‘draging‘);
e.stopPropagation();
}).on(‘dragover‘, function(e) {
e.preventDefault();
$(‘#container‘).addClass(‘draging‘);
e.stopPropagation();
});
$(‘#show_code‘).on(‘click‘, function() {
$(‘#myModal-code‘).modal();
$(‘pre code‘).each(function(i, e) {
hljs.highlightBlock(e);
});
});
$(‘body‘).on(‘click‘, ‘table button.btn‘, function() {
$(this).parents(‘tr‘).next().toggle();
});
var getRotate = function(url) {
if (!url) {
return 0;
}
var arr = url.split(‘/‘);
for (var i = 0, len = arr.length; i < len; i++) {
if (arr[i] === ‘rotate‘) {
return parseInt(arr[i + 1], 10);
}
}
return 0;
};
$(‘#myModal-img .modal-body-footer‘).find(‘a‘).on(‘click‘, function() {
var img = $(‘#myModal-img‘).find(‘.modal-body img‘);
var key = img.data(‘key‘);
var oldUrl = img.attr(‘src‘);
var originHeight = parseInt(img.data(‘h‘), 10);
var fopArr = [];
var rotate = getRotate(oldUrl);
if (!$(this).hasClass(‘no-disable-click‘)) {
$(this).addClass(‘disabled‘).siblings().removeClass(‘disabled‘);
if ($(this).data(‘imagemogr‘) !== ‘no-rotate‘) {
fopArr.push({
‘fop‘: ‘imageMogr2‘,
‘auto-orient‘: true,
‘strip‘: true,
‘rotate‘: rotate,
‘format‘: ‘png‘
});
}
} else {
$(this).siblings().removeClass(‘disabled‘);
var imageMogr = $(this).data(‘imagemogr‘);
if (imageMogr === ‘left‘) {
rotate = rotate - 90 < 0 ? rotate + 270 : rotate - 90;
} else if (imageMogr === ‘right‘) {
rotate = rotate + 90 > 360 ? rotate - 270 : rotate + 90;
}
fopArr.push({
‘fop‘: ‘imageMogr2‘,
‘auto-orient‘: true,
‘strip‘: true,
‘rotate‘: rotate,
‘format‘: ‘png‘
});
}
$(‘#myModal-img .modal-body-footer‘).find(‘a.disabled‘).each(function() {
var watermark = $(this).data(‘watermark‘);
var imageView = $(this).data(‘imageview‘);
var imageMogr = $(this).data(‘imagemogr‘);
if (watermark) {
fopArr.push({
fop: ‘watermark‘,
mode: 1,
image: ‘http://www.b1.qiniudn.com/images/logo-2.png‘,
dissolve: 100,
gravity: watermark,
dx: 100,
dy: 100
});
}
if (imageView) {
var height;
switch (imageView) {
case ‘large‘:
height = originHeight;
break;
case ‘middle‘:
height = originHeight * 0.5;
break;
case ‘small‘:
height = originHeight * 0.1;
break;
default:
height = originHeight;
break;
}
fopArr.push({
fop: ‘imageView2‘,
mode: 3,
h: parseInt(height, 10),
q: 100,
format: ‘png‘
});
}
if (imageMogr === ‘no-rotate‘) {
fopArr.push({
‘fop‘: ‘imageMogr2‘,
‘auto-orient‘: true,
‘strip‘: true,
‘rotate‘: 0,
‘format‘: ‘png‘
});
}
});
var newUrl = Qiniu.pipeline(fopArr, key);
var newImg = new Image();
img.attr(‘src‘, ‘loading.gif‘);
newImg.onload = function() {
img.attr(‘src‘, newUrl);
img.parent(‘a‘).attr(‘href‘, newUrl);
};
newImg.src = newUrl;
return false;
});
});
在标记处添加如下代码,实现在前端显示返回来的图片。(用js来实现前端的控件显示)
var res = eval("(" + info.toString() + ")");
alert(res.key);
var sourceLink = domain + res.key; //获取上传成功后的文件的Url
alert(sourceLink);
$("#images").attr("src",sourceLink);
var input=top.document.getElementById("photo_small");
input.setAttribute("src",sourceLink);
标签:
原文地址:http://blog.csdn.net/guoer9973/article/details/44748849