问题
I am facing a really weird problem. I am using swfupload to upload multiple images to the imageshack server. I am also storing the returned URLs in the database. How do i show the URL returned from imageshack to the user as soon as i receive it? Is there any way to make swfupload return the URL once upload finishes? Here is the code that i use for uploading images:
$('#swfupload-control').swfupload({
upload_url: "<%= upload_url-%>",
file_post_name: 'photo',
post_params: {"authenticity_token" : "<%= form_authenticity_token %>"},
file_size_limit : "100024",
file_types : "*.jpg;*.png;*.gif",
file_types_description : "Image files",
file_upload_limit : 5,
flash_url : "/flash/swfupload.swf",
button_image_url : '/javascripts/swfupload/XPButtonUploadText_61x22.png',
button_width : 62,
button_height : 22,
button_placeholder : $('#button')[0],
debug: false
})
.bind('fileQueued', function(event, file){
var listitem='<li id="'+file.id+'" >'+
'File: <em>'+file.name+'</em> ('+Math.round(file.size/1024)+' KB) <span class="progressvalue" ></span>'+
'<div class="progressbar" ><div class="progress" ></div></div>'+
'<p class="status" >Pending</p>'+
'<span class="cancel" > </span>'+
'</li>';
$('#log').append(listitem);
$('li#'+file.id+' .cancel').bind('click', function(){ //Remove from queue on cancel click
var swfu = $.swfupload.getInstance('#swfupload-control');
swfu.cancelUpload(file.id);
$('li#'+file.id).slideUp('fast');
});
// start the upload since it's queued
$(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){
$('#log li#'+file.id).find('p.status').text('Uploading...');
$('#log li#'+file.id).find('span.progressvalue').text('0%');
$('#log li#'+file.id).find('span.cancel').hide();
})
.bind('uploadProgress', function(event, file, bytesLoaded){
//Show Progress
var percentage=Math.round((bytesLoaded/file.size)*100);
$('#log li#'+file.id).find('div.progress').css('width', percentage+'%');
$('#log li#'+file.id).find('span.progressvalue').text(percentage+'%');
})
.bind('uploadSuccess', function(event, file, serverData){
var item=$('#log li#'+file.id), fetchedfile;
item.find('div.progress').css('width', '100%');
item.find('span.progressvalue').text('100%');
var pathtofile='<a href="'+fetchedfile+'" target="_blank" >view »</a>';
item.addClass('success').find('p.status').html('Done!!! | '+pathtofile);
})
.bind('uploadComplete', function(event, file){
// upload has completed, try the next one in the queue
$(this).swfupload('startUpload');
})
});
There is no inbuilt callback function for fetching the URL of the uploaded image file in the swfupload documentation.
回答1:
Oh it was simple. uploadSuccess returns serverData!
.bind('uploadSuccess', function(event, file, serverData){
var item=$('#log li#'+file.id), fetchedfile;
item.find('div.progress').css('width', '100%');
item.find('span.progressvalue').text('100%');
fetchedfile = serverData;
var pathtofile='<a href="'+fetchedfile+'" target="_blank" >view »</a>';
item.addClass('success').find('p.status').html('Done!!! | '+pathtofile);
})
来源:https://stackoverflow.com/questions/3296234/how-do-i-get-swfupload-to-return-image-url-after-upload