代码之家  ›  专栏  ›  技术社区  ›  Shripad Krishna

如何让swfupload在上传后返回图像URL?

  •  1
  • Shripad Krishna  · 技术社区  · 14 年前

    我正面临一个非常奇怪的问题。我正在使用swfupload将多个图像上载到ImageShack服务器。我还将返回的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 回复  |  直到 4 年前
        1
  •  3
  •   Alex    4 年前

    哦,很简单。 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); 
    })