Jump to content

Массовая загрузка фотографий в альбом на HTML5


Recommended Posts

Заменить содержимое файла templates/Default/albums_addphotos.tpl на содержимое ниже. Под стандартный дизайн.

1079664915_.png.4d86bfdb9f4d4f89b0e8448e0f2dc8d6.png

Спойлер
<script type="text/javascript">
var cnt = 0;
var UploadedFiles = 0;

function AlbumDeletePhoto(i) {
	Page.Loading('start');
	$.get('/index.php?go=albums&act=del_photo', {
		id: i
	}, function() {
		$('#photo_' + i).remove();
		var count_img = $('#count_img img').size();
		if (count_img < 1) $('#l_text').hide();
		Page.Loading('stop');
	});
}

function SetNewCover(i) {
	Page.Loading('start');
	$.get('/index.php?go=albums&act=set_cover', {
		id: i
	}, function() {
		$('.covers').css('background', '#fff');
		$('#cover_' + i).css('background', '#f6f9fb').css('border-top', '1px solid #fff');
		$('.cover_links').show();
		$('#cover_link_' + i).hide();
		Page.Loading('stop');
	});
}

function PhotoSaveDescr(i) {
	var descr = $('#descr_' + i).val();
	Page.Loading('start');
	$.post('/index.php?go=albums&act=save_descr', {
		id: i,
		descr: descr
	}, function(d) {
		Page.Loading('stop');
	});
}

function uploadSuccess(file, serverData) {
	response = serverData;
	if (response == 'max_img') {
		Box.Info('load_photo_er2', lang_dd2f_no, lang_max_imgs, 340);
		return false
	}
	if (response == 'big_size') {
		Box.Info('load_photo_er2', lang_dd2f_no, lang_max_size, 250);
		return false
	}
	if (response == 'hacking') {
		return false
	} else {
		response = response.split('|||');
		$('<span id="photo_' + response[0] + '"></span>').appendTo('#photos').html('<div class="hralbum" style="margin:0px;background:#efefef;"></div><div id="cover_' + response[0] + '" class="covers" style="padding-bottom:10px;padding-top:10px;padding-left:10px;"><a href="/photo' + response[2] + '_' + response[0] + '_sec=loaded" onClick="Photo.Show(this.href); return false"><div class="albums_cover"><span id="count_img"><img src="' + response[1] + '" alt="" /></span></div></a><div style="float:left;"><div class="albums_name" style="color:#888;padding-bottom:5px;"><b>' + lang_albums_add_photo + '</b></div><textarea class="inpst" id="descr_' + response[0] + '" style="width:406px;height:73px;"></textarea><div class="clear"></div></div><div class="menuleft l_pppho"><a href="/" onClick="SetNewCover(\'' + response[0] + '\'); return false;" id="cover_link_' + response[0] + '" class="cover_links"><img class="icon editphoto_ic" src="/templates/Default/images/spacer.gif" alt="" /><div>' + lang_albums_set_cover + '</div></a><a href="/" onClick="AlbumDeletePhoto(\'' + response[0] + '\'); return false;"><img class="icon del_photo_ic" src="/templates/Default/images/spacer.gif" alt="" /><div>' + lang_albums_del_photo + '</div></a><a href="/" onClick="PhotoSaveDescr(\'' + response[0] + '\'); return false;"><img class="icon save_ic" src="/templates/Default/images/spacer.gif" alt="" /><div>' + lang_albums_save_descr + '</div></a></div><div class="clear"></div></div>');
		count_img = $('#count_img img').size();
		if (count_img == 1) $('#l_text').show();
		$('body, html').animate({
			scrollTop: 99999
		}, 250);
	}
}

function uploadComplete(file) {
	UploadedFiles++;
	if (UploadedFiles == cnt) {
		$('#status').html($('<p>Загружено ' + cnt + ' из ' + cnt + '</p>'));
		$('.uploadButton').css('width', '145px').css('height', '11px').css('overflow', 'inherit');
		$('#upBar, .uploadbuttbg').hide();
		$('#uploadproc').css('width', '0px');
	} else $('#status').html($('<p>Загружено ' + UploadedFiles + ' из ' + cnt + '</p>'));
}

function uploadStart(file) {
	$('.uploadButton').css('width', '0px').css('height', '0px').css('overflow', 'hidden');
	$('#upBar, .uploadbuttbg').show();
	if (cnt > 1) $('#status').html($('<p>Загружено ' + UploadedFiles + ' из ' + cnt + '</p>'));
	else $('#status').html('Фотография загружается..');
	return true;
}

function uploadProgress(file, bytesLoaded, bytesTotal) {
	pw = 270;
	var w = Math.ceil(pw * (UploadedFiles / cnt + (bytesLoaded / (file.size * cnt))));
	$('#uploadproc').css('width', w + 'px');
}

function fileDialogComplete(numFilesSelected, numFilesQueued) {
	cnt = numFilesSelected;
	UploadedFiles = 0;
}

function photos_fileQueueError(file, errorCode, message) {
	try {
		switch (errorCode) {
			case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:
				$('.uploadButton').css('width', '0px').css('height', '0px').css('overflow', 'hidden');
				$('.uploadbuttbg').show();
				Box.Info('load_photo_er2', lang_dd2f_no, 'Максимально можно загрузить 20 фотографий за один раз.', 350, 3000);
				setTimeout(function() {
					$('.uploadButton').css('width', '145px').css('height', '11px').css('overflow', 'inherit');
					$('.uploadbuttbg').hide();
				}, 3000);
				break;
			case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
			case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
			case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
			case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
				break;
		}
	} catch (ex) {
		//false 
	}
}
var photoUpload = {
	arr: [],
	maxSize: 5 * 1024 * 1024,
	go: function(e) {
		var _a = photoUpload,
			files = e.files,
			len = files.length,
			queue = [],
			maxlen = 10;
		if (!len) return false;
		if (len > maxlen) {
			e.value = '';
			return alert('Можно загрузить до 10 фотографий');
		}
		for (var i = 0; i < len; i++) {
			var file = files[i],
				ext = file.name.split('.'),
				ext = ext[ext.length - 1];
			if (file.size > _a.maxSize) {
				e.value = '';
				return alert('Превышен максимальный размер');
			}
			queue.push(file);
		}
		_a.arr = queue;
		fileDialogComplete(len);
		uploadStart();
		_a.startUpload(queue[0]);
	},
	startUpload: function(file) {
		var _a = photoUpload,
			xhr = new XMLHttpRequest();
		xhr.upload.addEventListener('progress', function(evt) {
			if (evt.lengthComputable) {
				uploadProgress(file, evt.loaded, evt.total);
			}
		}, false);
		xhr.onreadystatechange = function(e) {
			if (e.target.readyState == 4) {
				if (e.target.status == 200) {
					_a.arr = _a.arr.slice(1);
					if (_a.arr.length > 0) _a.startUpload(_a.arr[0]);
					uploadComplete();
					uploadSuccess(file, xhr.responseText);
				}
			}
		};
		xhr.open("POST", '/index.php?go=albums&act=upload&aid={aid}', true);
		var form = new FormData();
		form.append('uploadfile', file);
		xhr.send(form);
	}
}
</script>
<div class="buttonsprofile albumsbuttonsprofile">
	<a href="/albums/{user-id}" onClick="Page.Go(this.href); return false;">Все альбомы</a>
	<a href="/albums/view/{aid}" onClick="Page.Go(this.href); return false;">{album-name}</a>
	<div class="activetab">
		<a href="/albums/add/{aid}" onClick="Page.Go(this.href); return false;">
			<div>Добавление фотографий</div>
		</a>
	</div>
</div>
<div class="clear"></div>
<div class="load_photo_quote">Поддерживаемые форматы файлов:  JPG, PNG и GIF.</div>
<div class="h1" id="l_text" style="display:none;">Загруженные фотографии</div>
<span id="photos"></span>
<div class="clear"></div>
<div class="load_photo_but" style="margin-left:245px;">
	<div class="fl_l">
		<div class="button_div fl_l"><button onclick="this.nextSibling.click();">Выберите фотографии</button><input type="file" multiple="true" style="display:none;" onchange="photoUpload.go(this);"></div>
		<div class="uploadButton">
			<div id="uploadButton"></div>
		</div>
		<div class="uploadbuttbg no_display"></div>
	</div>
	<div class="button_div_gray fl_l" style="margin-left:10px;"><button onClick="Page.Go('/albums/view/{aid}'); return false;">Просмотр альбома</button></div>
</div>
<div class="swf_loaded" id="upBar">
	<div class="video_show_bg swf_uploaded">
		<div class="upProcLotitle" id="status"></div>
		<div style="background:url('{theme}/images/progress_grad.gif?1');border:1px solid #45688e;height:18px;position:absolute" id="uploadproc"></div>
		<div style="background:#fff;border:1px solid #cccccc;width:270px;height:18px;margin-bottom:10px"></div>
		Не закрывайте эту вкладку, пока не завершится загрузка..
	</div>
</div>
<input type="hidden" value="{aid}" id="aid" />

 

 

Edited by Mario
  • Like 2
  • Upvote 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...