2 Replies - 675 Views - Last Post: 18 August 2012 - 06:59 PM

#1 iheartbreakz  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 196
  • Joined: 27-April 11

classifying download link

Posted 18 August 2012 - 06:35 PM

the problem is that the function $('span.status').html(serverData); shows the latest download link.. so when people do multiple file upload, all links get replaced by the link to the latest file uploaded. Is there anyway i can make span.status in a way that it shows the links to each file even the person uploads multiple files

P.S: The function span.status shows the download link


<script type="text/javascript">
$(function(){
	$('#swfupload-control').swfupload({
		upload_url: "upload.php?do=verify&method=flash",
		file_post_name: 'upfile',
		file_size_limit : "<? echo ($maxfilesize * 1024); ?>",
		file_types : "<? echo $file_types; ?>",
		file_types_description : "File Types",
		file_upload_limit : 25000,
		flash_url : "js/swfupload/swfupload.swf",
		button_image_url : 'js/swfupload/wdp_buttons_upload_114x29.png',
		button_width : 819,
		button_height : 83,
		button_placeholder : $('#button')[0],
		debug: false
	})
		.bind('fileQueued', function(event, file){
			var listitem='<span class="status" ></span>'+
			'<div class="progressWrapper" id="'+file.id+'" >'+
			'<div class="upProgFileName">'+
				''+file.name+''+
				'</div>'+
				'<div class="upProgBarBackground"><div class="upProgBar"></div><div class="upProgBarText"></div></div>'+
				'<div class="upProgCancelWrapper">'+
				'<img class="upProgCancel" src="/js/swfupload/cancel.png" alt="Cancel"/>'+
				'</div>'+
				'</div>';
			$('#log').append(listitem);
			$('div#'+file.id+' .upProgCancel').bind('click', function(){
				var swfu = $.swfupload.getInstance('#swfupload-control');
				swfu.cancelUpload(file.id);
				$('div#'+file.id).slideUp('fast');
			});
			// start the upload since it's queued
	// Here are some POST values to send. Thes
				var swfu = $.swfupload.getInstance('#swfupload-control');
swfu.addPostParam("usercheck", $("input#usercheck").val());
swfu.addPostParam("passcheck", $("input#passcheck").val());
			$(this).swfupload('startUpload');

		})
		.bind('fileQueueError', function(event, file, errorCode, message){
			alert('Size of the file '+file.name+' is greater than limit');
		})
		.bind('fileDialogComplete', function(event, numFilesSelected, numFilesQueued){
			$('#queuestatus').text('Files Selected: '+numFilesSelected+' / Queued Files: '+numFilesQueued);
		})
		.bind('uploadStart', function(event, file){
			$('.blockhdr724c').show();
			$('div#'+file.id).find('div.progressvalue').text('0%');
			$('div#'+file.id).find('div.upProgCancel').show();
		})
		.bind('uploadProgress', function(event, file, bytesLoaded){
			//Show Progress
			var percentage=Math.round((bytesLoaded/file.size)*100);
			$('div#'+file.id).find('div.upProgBar').css('width', percentage+'%');
			$('div#'+file.id).find('div.upProgBarText').text(percentage+'%');
		})
		.bind('uploadSuccess', function(event, file, serverData){
			
			var item=$('div#'+file.id);
			item.find('div.upProgBar').css('width', '100%');
			item.find('div.upProgBarText').text('100%');
			var pathtofile='<a href="/'+file.name+'" target="_blank" >view &raquo;</a>';
			$('span.status').html(serverData);
			$('.progressWrapper').hide();


		})
		.bind('uploadComplete', function(event, file){
			// upload has completed, try the next one in the queue
			$(this).swfupload('startUpload');
		})
	
});


CSS:
.progressWrapper			{ white-space:nowrap; padding:5px 10px; text-align:left; width:776px; overflow:hidden; text-overflow:ellipsis; border-bottom:1px solid #E9F1F4; }
div.upProgFileName		{ float:left; position:relative; width:220px; height:16px; line-height:16px; border:1px solid transparent; padding-right:10px; overflow:hidden; text-overflow:ellipsis; }
div.upProgBarBackground			{ float:left; position:relative; width:310px; height:16px; line-height:16px; border:1px solid #7ECBE9; background-color:#EDF7FC; }
div.upProgBar				{ position:absolute; background-color:#FF9933; width:0px; height:16px; background-color: rgb(255, 153, 51); }
div.upProgBarText		{ position:absolute; width:310px; height:16px; text-align:center; }
div.upProgCancelWrapper	{ float:left; position:relative; width:auto; height:16px; line-height:16px; border:1px solid transparent; padding-left:5px; cursor:pointer; }
img.upProgCancel				{ height:16px;	width:16px; }


Is This A Good Question/Topic? 0
  • +

Replies To: classifying download link

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4399
  • View blog
  • Posts: 12,255
  • Joined: 18-April 07

Re: classifying download link

Posted 18 August 2012 - 06:53 PM

Well instead of span.status, you just need to give each element an ID and have it update the correct element using the ID, not a class.

For example, instead of $('span.status') which may target multiple items, you give each item an id like "status1", "status2", "status3" etc and then use $("#status1").html(serverData). Of course you can construct the name "#status1" dynamically as you go along.

:)
Was This Post Helpful? 0
  • +
  • -

#3 iheartbreakz  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 196
  • Joined: 27-April 11

Re: classifying download link

Posted 18 August 2012 - 06:59 PM

that would take forever if a person were to upload 100 files.. is there any way that i can edit this function or something to give out different download links

.bind('uploadSuccess', function(event, file, serverData){

var item=$('div#'+file.id);
item.find('div.upProgBar').css('width', '100%');
item.find('div.upProgBarText').text('100%');
var pathtofile='<a href="/'+file.name+'" target="_blank" >view &raquo;</a>';
$('span.status').html(serverData);
$('.progressWrapper').hide();
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1