2016-04-06 4 views
1

新しいイメージをアップロードするときに、ページをリロードしたりページを切り替えることなく、プロファイルイメージイメージをこの新しいイメージに変更します。私は、AJAX getメソッドでjQueryを使用して、イメージのソースをbase64でエンコードされた文字列に変更しています。jQueryでbase64イメージの文字列を更新したときにイメージのリフレッシュが発生しない

表示プロフィール画像jQueryの機能 -

$("img.profilepicture").each(function() { 
    var profileid = $("#profileid").val(); 
    var action = "image"; 
    var self = $(this); 
    getprofileimage(profileid, action,self); 
}); 

function getprofileimage(profileid, action, self) { 
    $.ajax({ 
    type: "GET", 
    url: "StoryServlet", 
    data: { 
     'action': action, 
     'for': profileid, 
     'timestamp': new Date().getTime() 
    }, 
    processData: false, 
    contentType: false, 
    success: function (data) { 
     self.attr('src',data.base64String); 
     self.attr('title','profilepic'); 
    } 
    });  
} 

アップロード画像jQueryの機能 -

$("#uploadpic").click(function (e) { 
    e.preventDefault(); 
    var fd = new FormData(document.querySelector("form")); 
    $.ajax({ 
    type: "POST", 
    url: "StoryServlet", 
    data: fd, 
    processData: false, 
    contentType: false, 
    success: function (data) { 
     $("#picsucess").text(data.filename + " " + "uploaded sucessfully!"); 
     $("#picsucess").fadeIn(); 
     $("#picsucess").fadeOut(10000); 
    }  
    }).done(function (data) { 
    //done block 
    }).fail(function (jqXHR, textStatus) { 
    $("#fadein").text('File upload failed ...'); 
    $("#fadein").fadeIn(); 
    $("#fadein").fadeOut(10000); 
    }).complete(function (jqXHR, textStatus) { 
    location.reload(); 
    });  
}); 

答えて

0

あなたはこの中で$アヤックスに渡されたデータを処理する必要が

processData: false, 
contentType: false, 

を削除しますケース(表示プロファイルの画像機能)、またコンテンツタイプを適切に読み取るように設定するnサーバー。
も安全であると

dataType: 'json', 

を追加します。あなたの応答が有効なjsonであることを確認してください。

+0

processDataを削除します。false、contentType:false、ジョブを実行しました。ありがとう! – bodhi