上传后如何让swfupload返回图片网址?

时间:2010-07-21 04:02:58

标签: javascript jquery ruby-on-rails swfupload

我面临一个非常奇怪的问题。我使用swfupload将多个图像上传到ima​​geshack服务器。我还将返回的URL存储在数据库中。我收到后如何显示从imageshack返回给用户的URL?上传完成后有没有办法让swfupload返回URL?以下是我用于上传图片的代码:

   $('#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" >&nbsp;</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 &raquo;</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');  
     })  
});

在swfupload文档中没有内置的回调函数来获取上传的图像文件的URL。

1 个答案:

答案 0 :(得分:3)

哦,很简单。 uploadSuccess返回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 &raquo;</a>'; 
         item.addClass('success').find('p.status').html('Done!!! | '+pathtofile); 
     })