需求:1、只能上传图片
2、图片小于10M
3、不同用户身份最多上传图片数不同
4、展示将要上传的图片
5、展示图片加载进度
6、用户可以删除将要上传的图片
function setupAdvertsReplacementPianoPage() {
var imageIdArray = [],
imageUrlArray = [],
defaultHtml = '',
imageIdLen = 0;
// 获取 sessionStorage 里面的 imageId 和 imageUrl
if (sessionStorage.getItem('auditing-replacement-paino-imageId') && sessionStorage.getItem('auditing-replacement-paino-imageUrl')) {
imageIdArray = JSON.parse(sessionStorage.getItem('auditing-replacement-paino-imageId'));
imageUrlArray = JSON.parse(sessionStorage.getItem('auditing-replacement-paino-imageUrl'));
imageIdLen = imageIdArray.length;
$('.image-ids').val(imageIdArray.join());
// 将上传的图片添加到页面中
for (var i = 0; i < imageIdLen; i++) {
defaultHtml += '<div class="weui-grid item item-' + imageIdArray[i] + '" data-id="' + imageIdArray[i] + '"data-filename=' + imageUrlArray[i] + '"><p class="image"><img src="' + imageUrlArray[i] + '" width="98" height="98" alt=""></p><a class="delete iconfont icon-roundclosefill" href="#"></a></div>';
}
$('.upload-images .images').html(defaultHtml);
}
//上传图片
$('.submit-images').on('click', function () {
var file = $('.img_box').find('.input-file')[0],
fileNum = file.files.length;
if (!file.files || !fileNum) {
$.toast('您还未选择文件!', 'cancel');
return false;
}
if (fileNum > 3) {
$.alert('您选择的图片超过三张,不能上传哦!');
return false;
}
if (fileNum < 2) {
if ((file.files[0].size / (1024 * 1024)) > 10) {
$.toast("图片大小不能超过10M", "cancel");
return false;
}
} else {
for (var i = 0; i < fileNum; i++) {
if ((file.files[i].size / (1024 * 1024)) > 10) {
$.toast("每张图片大小不能超过10M", "cancel");
return false;
}
}
}
});
$('.add-images').click(function () {
if ($('.upload-images .item').length >= 3) {
$.alert('您已经上传了三张图片,不能再上传啦!');
return false;
}
});
$('.img_box form').submit(function () {
var $this = $(this),
$file = $this.find("input[type=file]"),
$popup = $this.closest(".popup-add-image"),
$progress = $popup.find('.progress'),
$bar = $popup.find('.bar'),
$percent = $popup.find('.percent'),
$status = $popup.find('.status'),
imgLen = $('.upload-images .item').length,
fileNum = $('.img_box').find('.input-file')[0].files.length;
if ($('.upload-images .item').length >= 3) {
$.alert('您已经上传了三张图片,不能再上传啦!');
return false;
}
if (imgLen + fileNum > 3) {
var restNum = 3 - imgLen;
$.alert('您已经上传了' + imgLen + '张图片,只能再上传' + restNum + '张图片哦!');
return false;
}
$this.ajaxSubmit({
beforeSend: function () {
var percentVal = '0%';
$progress.show();
$bar.width(percentVal);
$percent.html(percentVal);
$status.hide();
},
uploadProgress: function (event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
$bar.width(percentVal);
$percent.html(percentVal);
},
success: function (data) {
var percentVal = '100%',
dataArr = JSON.parse(data);
for (var i = 0; i < dataArr.length; i++) {
imageIdArray.push(dataArr[i].id);
imageUrlArray.push(dataArr[i].filename);
}
sessionStorage.setItem('auditing-replacement-paino-imageId', JSON.stringify(imageIdArray));
sessionStorage.setItem('auditing-replacement-paino-imageUrl', JSON.stringify(imageUrlArray));
$('.image-ids').val(imageIdArray.join());
$bar.width(percentVal);
$percent.html(percentVal);
},
complete: function (xhr) {
var dataArr = JSON.parse(JSON.parse(xhr.responseText)),
html = '';
for (var i = 0; i < dataArr.length; i++) {
if (dataArr[i].status === "s") {
$status.html("上传成功。").addClass("alert-success").removeClass("alert-error");
html = '<div class="weui-grid item item-' + dataArr[i].id + '" data-id="' + dataArr[i].id + '"data-filename=' + dataArr[i].filename + '"><p class="image"><img src="' + dataArr[i].filename + '" width="98" height="98" alt=""></p><a class="delete iconfont icon-roundclosefill" href="#"></a></div>';
$(".images").append(html);
$.closePopup();
} else {
$status.html(dataArr[i].message).addClass("alert-error").removeClass("alert-success");
}
}
setTimeout(function () {
var percentVal = '0%';
$file.val("");
$progress.show();
$bar.width(percentVal);
$percent.html(percentVal);
$status.hide();
}, 1000);
},
error: function () {
showNotificationError();
}
});
return false;
});
$('.upload-images .images').on('click', '.delete', function () {
var $this = $(this),
$images = $this.closest('.images');
if ($this.hasClass('loading')) {
return false;
}
$this.addClass('loading');
$.confirm({
text: '确认删除图片吗?',
onOK: function () {
imageIdArray = [];
imageUrlArray = [];
$this.closest('.item').remove();
$images.find('.item').each(function () {
var $item = $(this);
imageIdArray.push($item.data('id'));
imageUrlArray.push($item.data('filename'));
});
sessionStorage.setItem('auditing-replacement-paino-imageId', JSON.stringify(imageIdArray));
sessionStorage.setItem('auditing-replacement-paino-imageUrl', JSON.stringify(imageUrlArray));
$('.image-ids').val(imageIdArray.join());
},
onCancel: function () {
$this.removeClass('loading');
}
});
return false;
});
}
function setupAuditingEditPage() {
var auditing_edit_type_imageId = '',
auditing_edit_type_imageUrl = '',
auditing_edit_imageId = [],
auditing_edit_imageUrl = [],
auditing_edit_defaultHtml = '',
auditing_edit_imageIdArray = [],
auditing_edit_imageUrlArray = [],
advertype,
video_data,
$videoPanel = $('.video-panel'),
$videoBtn = $videoPanel.find('.btn-submit'),
uploader,
uploadAuth,
ali_videoid,
UploadAddress,
uploadvodTimeoutID;
// 获取 sessionStorage 里面的 train-title,train-subtitle,train-price 和 train-description 来赋值
$('.train-title').val(sessionStorage.getItem('train-title') ? sessionStorage.getItem('train-title') : '');
$('.train-subtitle').val(sessionStorage.getItem('train-subtitle') ? sessionStorage.getItem('train-subtitle') : '');
$('.train-price').val(sessionStorage.getItem('train-price') ? sessionStorage.getItem('train-price') : '');
$('.train-description').val(sessionStorage.getItem('train-description') ? sessionStorage.getItem('train-description') : '');
if (sessionStorage.getItem('video-data') && sessionStorage.getItem('ali-videoid')) {
video_data = JSON.parse(sessionStorage.getItem('video-data'));
$('.object-videoid').val(video_data.videoid);
$('.video-wrap').html('<video width="250" height="150" controls="controls" src="' + video_data.filename + '" poster="' + video_data.coverurl + '"></video>');
}
//针对 type 不一样的页面存不一样的 sessionStorage
advertype = location.search.substr(1).split('&')[0].split('=')[1];
switch (advertype) {
case '0':
auditing_edit_type_imageId = 'auditing_edit_0_imageId';
auditing_edit_type_imageUrl = 'auditing_edit_0_imageUrl';
break;
case "1":
auditing_edit_type_imageId = 'auditing_edit_1_imageId';
auditing_edit_type_imageUrl = 'auditing_edit_1_imageUrl';
break;
case "2":
auditing_edit_type_imageId = 'auditing_edit_2_imageId';
auditing_edit_type_imageUrl = 'auditing_edit_2_imageUrl';
break;
default:
break;
}
// 获取sessionStorage里面的imageId和imageUrl
if (sessionStorage.getItem(auditing_edit_type_imageId) && sessionStorage.getItem(auditing_edit_type_imageUrl)) {
auditing_edit_imageIdArray = JSON.parse(sessionStorage.getItem(auditing_edit_type_imageId));
auditing_edit_imageUrlArray = JSON.parse(sessionStorage.getItem(auditing_edit_type_imageUrl));
$('.object-imageid').val(auditing_edit_imageIdArray.join());
for (var i = 0; i < auditing_edit_imageIdArray.length; i++) {
auditing_edit_defaultHtml += '<div class="weui-grid item item-' + auditing_edit_imageIdArray[i] + '" data-id="' + auditing_edit_imageIdArray[i] + '"data-filename=' + auditing_edit_imageUrlArray[i] + '"><p class="image"><img src="' + auditing_edit_imageUrlArray[i] + '" width="98" height="98" alt=""></p><a class="delete iconfont icon-roundclosefill" href="#"></a></div>';
}
$('.images').html(auditing_edit_defaultHtml);
}
//点击开始上传时,不能上传空图片
$('.submit-images').on('click', function () {
var file = $('.img_box').find('.input-image-file')[0],
fileNum = file.files.length;
if (!file.files || !fileNum) {
$.toast('您还未选择文件!', 'cancel');
return false;
}
if ($('.isAdmin').val() === 'value') {
if (fileNum > 8) {
$.alert('您选择的图片超过八张,不能上传哦!');
return false;
}
} else {
if (fileNum > 5) {
$.alert('您选择的图片超过五张,不能上传哦!');
return false;
}
}
if (fileNum < 2) {
if ((file.files[0].size / (1024 * 1024)) > 10) {
$.toast("图片大小不能超过10M", "cancel");
return false;
}
} else {
for (var i = 0; i < fileNum; i++) {
if ((file.files[i].size / (1024 * 1024)) > 10) {
$.toast("每张图片大小不能超过10M", "cancel");
return false;
}
}
}
});
//提醒普通用户图片最多上传五张,管理员最多上传八张
$('.add-images').click(function () {
if ($('.isAdmin').val() === 'value') {
if ($('.upload-images .item').length >= 8) {
$.alert('您已经上传了八张图片,不能再上传啦!');
return false;
}
} else {
if ($('.upload-images .item').length >= 5) {
$.alert('您已经上传了五张图片,不能再上传啦!');
return false;
}
}
});
//图片上传是一个单独的表单,监听submit
$('.img_box form').submit(function () {
var $this = $(this),
$file = $this.find("input[type=file]"),
$popup = $this.closest(".popup-add-image"),
$progress = $popup.find('.progress'),
$bar = $popup.find('.bar'),
$percent = $popup.find('.percent'),
$status = $popup.find('.status'),
imgLen = $('.upload-images .item').length,
fileNum = $('.img_box').find('.input-image-file')[0].files.length;
if ($('.isAdmin').val() === 'value') {
if (imgLen >= 8) {
$.alert('您已经上传了八张图片,不能再上传啦!');
return false;
}
if (imgLen + fileNum > 8) {
var restNum = 8 - imgLen;
$.alert('您已经上传了' + imgLen + '张图片,只能再上传' + restNum + '张图片哦!');
return false;
}
} else {
if (imgLen >= 5) {
$.alert('您已经上传了五张图片,不能再上传啦!');
return false;
}
if (imgLen + fileNum > 5) {
var restNum = 5 - imgLen;
$.alert('您已经上传了' + imgLen + '张图片,只能再上传' + restNum + '张图片哦!');
return false;
}
}
$this.ajaxSubmit({
beforeSend: function () {
var percentVal = '0%';
$progress.show();
$bar.width(percentVal);
$percent.html(percentVal);
$status.hide();
},
uploadProgress: function (event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
$bar.width(percentVal);
$percent.html(percentVal);
},
success: function (data) {
var percentVal = '100%',
dataArr = JSON.parse(data);
for (var i = 0; i < dataArr.length; i++) {
auditing_edit_imageId.push(dataArr[i].id);
auditing_edit_imageUrl.push(dataArr[i].filename);
}
sessionStorage.setItem(auditing_edit_type_imageId, JSON.stringify(auditing_edit_imageId));
sessionStorage.setItem(auditing_edit_type_imageUrl, JSON.stringify(auditing_edit_imageUrl));
$('.object-imageid').val(auditing_edit_imageId.join());
$bar.width(percentVal);
$percent.html(percentVal);
},
complete: function (xhr) {
var dataArr = JSON.parse(JSON.parse(xhr.responseText)),
html = '';
for (var i = 0; i < dataArr.length; i++) {
if (dataArr[i].status === "s") {
$status.html("上传成功。").addClass("alert-success").removeClass("alert-error");
html = '<div class="weui-grid item item-' + dataArr[i].id + '" data-id="' + dataArr[i].id + '"data-filename=' + dataArr[i].filename + '"><p class="image"><img src="' + dataArr[i].filename + '" width="98" height="98" alt=""></p><a class="delete iconfont icon-roundclosefill" href="#"></a></div>';
$('.images').append(html);
$.closePopup();
} else {
$status.html(dataArr[i].message).addClass("alert-error").removeClass("alert-success");
}
}
setTimeout(function () {
var percentVal = '0%';
$file.val('');
$progress.show();
$bar.width(percentVal);
$percent.html(percentVal);
$status.hide();
}, 1000);
},
error: function () {
showNotificationError();
}
});
return false;
});
$('.upload-images .images').on('click', '.delete', function () {
var $this = $(this),
$images = $this.closest('.images');
if ($this.hasClass('loading')) {
return false;
}
$this.addClass('loading');
$.confirm({
text: '确认删除图片吗?',
onOK: function () {
auditing_edit_imageId = [];
auditing_edit_imageUrl = [];
$this.closest('.item').remove();
$images.find('.item').each(function () {
var $item = $(this);
auditing_edit_imageId.push($item.data('id'));
auditing_edit_imageUrl.push($item.data('filename'));
});
sessionStorage.setItem(auditing_edit_type_imageId, JSON.stringify(auditing_edit_imageId));
sessionStorage.setItem(auditing_edit_type_imageUrl, JSON.stringify(auditing_edit_imageUrl));
$('.object-imageid').val(auditing_edit_imageId.join());
},
onCancel: function () {
$this.removeClass('loading');
}
});
return false;
});
uploader = new VODUpload({
// 开始上传
'onUploadstarted': function (uploadInfo) {
uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, UploadAddress);
},
// 文件上传成功
'onUploadSucceed': function () {
$videoBtn.removeClass('loading');
$videoBtn.text('开始上传');
$videoPanel.find('.input-file').val('');
function uploadvodSuccess() {
if (uploadvodTimeoutID) {
clearTimeout(uploadvodTimeoutID);
}
uploadvodTimeoutID = setTimeout(function () {
$.ajax({
url: getUncachedUrl('/Base/SiteVideoHandler'),
type: 'POST',
data: {
act: 'move_uploadvod_success',
videoid: ali_videoid,
typeid: $('.video-panel .type-id').val()
},
success: function (data) {
if (data.status === 's') {
$.hideLoading();
sessionStorage.setItem('video-data', JSON.stringify(data));
$('.object-videoid').val(data.videoid);
$('.video-wrap').html('<video width="250" height="150" controls="controls" src="' + data.filename + '" poster="' + data.coverurl + '"></video>');
} else {
uploadvodSuccess();
}
},
error: function () {
$.hideLoading();
}
});
}, 500);
}
$.showLoading('正在处理视频');
uploadvodSuccess();
},
// 文件上传失败
'onUploadFailed': function () {
$videoBtn.removeClass('loading');
},
// 文件上传进度,单位:字节
'onUploadProgress': function (uploadInfo, totalSize, uploadedSize) {
$videoBtn.text(Math.ceil(uploadedSize * 100 / totalSize) + "%");
},
// 上传凭证超时
'onUploadTokenExpired': function () {
uploader.resumeUploadWithAuth(uploadAuth);
}
});
$videoPanel.find('.input-file').change(function () {
var userData = '{"Vod":{"UserData":"{"IsShowWaterMark":"false","Priority":"7"}"}}';
uploader.cleanList();
for (var i = 0; i < event.target.files.length; i++) {
uploader.addFile(event.target.files[i], null, null, null, userData);
}
});
$videoPanel.find('.btn-submit').click(function () {
var filename = $videoPanel.find('.input-file').val().substring($videoPanel.find('.input-file').val().lastIndexOf('\\') + 1);
if ($videoBtn.hasClass('loading')) {
return false;
}
if (!filename) {
$.toast('您还未选择文件!', 'cancel');
return false;
}
$videoBtn.addClass('loading');
$.ajax({
url: getUncachedUrl('/Base/SiteVideoHandler'),
type: 'POST',
data: {
act: 'move_uploadvod',
filename: filename,
typeid: 2
},
success: function (data) {
uploadAuth = data.UploadAuth;
UploadAddress = data.UploadAddress;
ali_videoid = data.VideoId;
uploader.startUpload();
sessionStorage.setItem('ali-videoid', ali_videoid);
$('.object-videoid').val(ali_videoid);
},
error: function () {
$.toast('error', 'cancel');
}
});
return false;
});
}
参考资料:http://malsup.com/jquery/form/progress2.html