AJAX upload chrome problem

Discussion in 'jQuery' started by wannesv, Dec 19, 2011.

  1. #1
    I'm currently trying to upload a picture, and using AJAX to show the pic without refreshing the page.
    Now this works perfect in Safari but for some reason it doesn't do anything in Chrome.
    I noticed Chrome always puts c:\fakepath\ before my filename when I get the value of the inputfield, does it have to do something with that ?

    [COLOR=#F9F9F9][FONT=Monaco][COLOR=#fbefb1]var [/COLOR]input [COLOR=#d9b583]= [/COLOR][COLOR=#ad98ab]document[/COLOR].getElementById([COLOR=#9fab82]"uploadID"[/COLOR]), [/FONT][/COLOR][COLOR=#f9f9f9]        formdata [COLOR=#d9b583]= [/COLOR][COLOR=#dd7e63]false[/COLOR];[/COLOR]
    
    
    [COLOR=#ae8257][COLOR=#f9f9f9]    [/COLOR][COLOR=#fbefb1]function [/COLOR]showUploadedItem [COLOR=#f9f9f9]([/COLOR][COLOR=#879ab3]source[/COLOR][COLOR=#f9f9f9]) {[/COLOR][/COLOR]
    [COLOR=#f9f9f9]        foto [COLOR=#d9b583]= [/COLOR]source;[/COLOR]
    [COLOR=#f9f9f9]    }   [/COLOR]
    
    
    [COLOR=#f9f9f9]    [COLOR=#d9b583]if [/COLOR]([COLOR=#ad98ab]window[/COLOR].FormData) {[/COLOR]
    [COLOR=#f9f9f9]          formdata [COLOR=#d9b583]= new [/COLOR]FormData();[/COLOR]
    [COLOR=#f9f9f9]    }[/COLOR]
    [COLOR=#f9f9f9]    [/COLOR]
    [COLOR=#9fab82][COLOR=#f9f9f9]    $([/COLOR]"input[type=file]"[COLOR=#f9f9f9]).change([/COLOR][COLOR=#fbefb1]function[/COLOR][COLOR=#f9f9f9](){[/COLOR][/COLOR]
    
    
    [COLOR=#f9f9f9]         foto [COLOR=#d9b583]= [/COLOR]$([COLOR=#9fab82]'input:file'[/COLOR]).val();[/COLOR]
    [COLOR=#f9f9f9]         [/COLOR]
    [COLOR=#f9f9f9]         [COLOR=#fbefb1]var [/COLOR]i [COLOR=#d9b583]= [/COLOR][COLOR=#dd7e63]0[/COLOR], len [COLOR=#d9b583]= [/COLOR][COLOR=#879ab3]this[/COLOR].files.length, img, reader, file;[/COLOR]
    [COLOR=#f9f9f9]    [/COLOR]
    [COLOR=#f9f9f9]        [COLOR=#d9b583]for [/COLOR]( ; i [COLOR=#d9b583]< [/COLOR]len; i[COLOR=#d9b583]++ [/COLOR]) {[/COLOR]
    [COLOR=#f9f9f9]            file [COLOR=#d9b583]= [/COLOR][COLOR=#879ab3]this[/COLOR].files[i];[/COLOR]
    [COLOR=#f9f9f9]    [/COLOR]
    [COLOR=#f9f9f9]            [COLOR=#d9b583]if [/COLOR]([COLOR=#d9b583]!![/COLOR]file.type.match([COLOR=#f0c981]/image.*/[/COLOR])) {[/COLOR]
    [COLOR=#f9f9f9]                [COLOR=#d9b583]if [/COLOR]( [COLOR=#ad98ab]window[/COLOR].FileReader ) {[/COLOR]
    [COLOR=#f9f9f9]                    reader [COLOR=#d9b583]= new [/COLOR]FileReader();[/COLOR]
    [COLOR=#f9f9f9]                    reader.[COLOR=#ae8257]onloadend [/COLOR][COLOR=#d9b583]= [/COLOR][COLOR=#fbefb1]function [/COLOR]([COLOR=#879ab3]e[/COLOR]) { [/COLOR]
    [COLOR=#f9f9f9]                        showUploadedItem(e.target.result, file.fileName);[/COLOR]
    [COLOR=#f9f9f9]                    };[/COLOR]
    [COLOR=#f9f9f9]                    reader.readAsDataURL(file);[/COLOR]
    [COLOR=#f9f9f9]                }[/COLOR]
    [COLOR=#f9f9f9]                [COLOR=#d9b583]if [/COLOR](formdata) {[/COLOR]
    [COLOR=#f9f9f9]                    formdata.append([COLOR=#9fab82]"images[]"[/COLOR], file);[/COLOR]
    [COLOR=#f9f9f9]                }[/COLOR]
    [COLOR=#f9f9f9]            }    [/COLOR]
    [COLOR=#f9f9f9]        }[/COLOR]
    [COLOR=#f9f9f9]    [/COLOR]
    [COLOR=#f9f9f9]        [COLOR=#d9b583]if [/COLOR](formdata) {[/COLOR]
    [COLOR=#f9f9f9]            $.ajax({[/COLOR]
    [COLOR=#9fab82][COLOR=#f9f9f9]                url: [/COLOR]"index.php?action=foto"[COLOR=#f9f9f9],[/COLOR][/COLOR]
    [COLOR=#f9f9f9]                type: [COLOR=#9fab82]"POST"[/COLOR],[/COLOR]
    [COLOR=#f9f9f9]                data: formdata,[/COLOR]
    [COLOR=#f9f9f9]                processData: [COLOR=#dd7e63]false[/COLOR],[/COLOR]
    [COLOR=#f9f9f9]                contentType: [COLOR=#dd7e63]false[/COLOR],[/COLOR]
    [COLOR=#f9f9f9]                success: [COLOR=#fbefb1]function [/COLOR]([COLOR=#879ab3]res[/COLOR]) {[/COLOR]
    [COLOR=#f9f9f9]                    canvas.width [COLOR=#d9b583]= [/COLOR]canvas.width; [COLOR=#736e73]// Clears the canvas[/COLOR][/COLOR]
    [COLOR=#f9f9f9]                    [/COLOR]
    [COLOR=#f9f9f9]                    canvas.width [COLOR=#d9b583]= [/COLOR]breedt;[/COLOR]
    [COLOR=#f9f9f9]                    canvas.height [COLOR=#d9b583]= [/COLOR]hoog;[/COLOR]
    
    [COLOR=#f9f9f9]                      context.drawImage(image, [COLOR=#dd7e63]0[/COLOR], [COLOR=#dd7e63]0[/COLOR]);[/COLOR]
    [COLOR=#f9f9f9]                    [/COLOR]
    [COLOR=#f9f9f9]                    image.src [COLOR=#d9b583]= [/COLOR][COLOR=#9fab82]'uploads/'[/COLOR][COLOR=#d9b583]+[/COLOR]foto;[/COLOR]
    [COLOR=#f9f9f9]                    [/COLOR]
    [COLOR=#f9f9f9]                    alert([COLOR=#9fab82]"image "[/COLOR][COLOR=#d9b583]+[/COLOR]image.src)[/COLOR]
    [COLOR=#f9f9f9]                    [/COLOR]
    [COLOR=#f9f9f9]                }[/COLOR]
    [COLOR=#f9f9f9]            });[/COLOR]
    [COLOR=#F9F9F9][FONT=Monaco]        }[/FONT][/COLOR]
    Code (markup):
    result of alert in Safari : image http://localhost:8888/2011-2012/kerstkaart/uploads/04.jpg

    result of alert in Chrome : image http://localhost:8888/2011-2012/kerstkaart/uploads/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcwAAAHGCAIAAAB2Iiy3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0ZBNzlCREIxRUE5MTFFMTlCNjFDRTM1N0MwNEJERjIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0ZBNzlCREMxRUE5MTFFMTlCNjFDRTM1N0MwNEJERjIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDRkE3OUJEOTFFQTkxMUUxOUI2MUNFMzU3QzA0QkRGMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDRkE3OUJEQTFFQTkxMUUxOUI2MUNFMzU3QzA0QkRGMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiDq3S0AARUCSURBVHja7L15dB3HdT7Y21ux7yS4ACC476uolbYWy5KjzVa8xRopjnOS8TnJZD8zk5yT/BefM7/E+cWZjD3x2I5jxZZtSbRky5K1W6Q2rhL3FQQJkACJHXh4e3fP1/0BVy2ABEESIAGyrsCnfv26q6uqq7767q1bt3THcTQlSpQoUTI5YqgqUKJEiZLJE0tVgRIlSpRMrLiuq5isEiVKlFwNUSCrRIkSJZMoylwwhdSK...Q49ddBBbLKJjtFQZZrNYQnOmbR1JjcZicayLgkPNR2TDqxlbyQKXNVnZZBWXMjWsmpClaQZXhZzrL7T2wH25Epg0eCDYQr4GwW62RcSkgTgdArvsggKWzYhGjospuA60sS85sYLVMERkKhOYJ0nl6lQwyy93GkJX14LudASbrWyWZo65LggO0mo5cA9ICAmFwkGjfHGDn5gr1RTCXW43LHFWQnV8cVyF5VIEuFT/AS1T7plE1hWLK3cgTkZbDyEFysaGg9b0ZsncQpIa3WfZnWF1lUCV+SnAmKDgtDl3olZMGVKKFaclCjlbRazx2Q3MUf1mo0kOfZnhJgTG6yptbEk5DBBLPscBmljAEc8GQzWJJBWgKhSWBcK7gPZuJI+O5sagliK76DsuEwYe4yASA7WWquQPaqAlmpiFhak/uTWkmfFSySQPOAcT

    All help would be appriciated
     
    wannesv, Dec 19, 2011 IP
  2. daljit

    daljit Well-Known Member

    Messages:
    312
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #2
    Hi,

    I will rectify the problem can you give share the URL of the site..

    Best Regards

    DJ
     
    daljit, Dec 20, 2011 IP