Doubts in uploading image into file database using ajax

Question

Focus on the questions, please

I have the following HTML

 <form enctype="multipart/form-data" onsubmit="uploadProfilePicture();" method="post" name="prof_picture">
 <input id="upload_profile_picture" style="display:none;"name="image" accept="image/jpeg" type="file">
 <input id="upload_profile_picture2" value="Submit" type="submit" style="display:none;">
 <a id="change_profile_picture" class="profile_option" onclick="$('#upload_profile_picture').click();">Mudar foto de perfil</a>

PHP (profileFunctions.php)

if(isset($_POST['prof_picture'])){
    alert("test");
}

JS

function uploadProfilePicture(){

    $.ajax({
            type:'POST',
            url: "profile/profileFunctions.php",
            data:$(this).serialize(),
            cache:false,
            success:function(data){
                console.log("success");
                console.log(data);
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });

}

I have used ajax before but the thing is I'm actually really in doubt because of this file being an image:

1º What exactly should be in "data:" within the ajax request? And what should I do to parse the file correctly?

2º In PHP image validation how can I retrieve the extension of the file AND how exactly should I do the isset($_POST)?

3º If I am to propose the image to the user instantly if ajax.success should cache be set to true? How does cache behave on this situation?

Have you considered using a plugin like uploadify? http://www.uploadify.com/ — Kai Qing, Dec 18 '13 at 00:06
I don't suggest putting the image data into the database. I would suggest saving it to the file system and storing its location into the database. — Justin Wood, Dec 18 '13 at 00:07

score 0 · Answer 1 · answered Dec 18 '13 at 00:09

0

XHR technology does not permit to upload the images.

You have to find a workaround, something like using an iframe.

answered Dec 18 '13 at 00:09

Darkhan

1,258
2
13
21

are you sure about that? xD – user111671 Dec 18 '13 at 00:11
@user111671 as far as I know. Similar question was asked here: http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload – Darkhan Dec 18 '13 at 00:13
xhr2 does support images/files – Adam Merrifield Dec 18 '13 at 04:15
@AdamMerrifield yea, but it's not XHR – Darkhan Dec 18 '13 at 04:23
@Daveel I'm suggesting it because he isn't specifying a browser & http://caniuse.com/xhr2 – Adam Merrifield Dec 18 '13 at 04:43
@AdamMerrifield hmmm, I actually thought cross-browsiness of XHR2 was worse than what it is today – Darkhan Dec 18 '13 at 04:48
@Daveel it is quite well. – Adam Merrifield Dec 18 '13 at 05:17

score 0 · Answer 2 · answered Dec 18 '13 at 00:18

0

Please use iframe instead of ajax.

<form target="my_iframe_name" action="my_script_can_receive_file.php" ....>
...
</form>
<iframe name="my_iframe_name"  onload="javascript:alert('uploaded')" style="width:1px;height:1px;position:absoulte;left:-99999px;top:-99999px" src="javascript:void(0)"></iframe>

However, if you want check the status of your upload, you may need more work on both [my_script_can_receive_file.php] and [js] to talk the status to the main frame.

answered Dec 18 '13 at 00:18

Zac

1,062
2
7
12

But use iframe ->how<- exactly? I've always thought iframe was supposed to embed something and ajax to connect in real time with the server isn't that right? Then why would I use iframe? – user111671 Dec 18 '13 at 00:21
AJAX does not support file transfer. iframe is an adapter, you post into the iframe instead to current frame (the main page) by using [target] and [action] attributes in [form] tag. Then, you use [onload] in [iframe] to find out the status of you upload result – Zac Dec 18 '13 at 00:24

Doubts in uploading image into file database using ajax

2 Answers2