Upload text and image using getXMLHttpRequest

[BkJim]

Hi every one,I am trying to upload text and image using getXMLHttpRequest, but I have no idea ofthe best way to process. Some help would be apreciated.Thank's.

 

Html file

<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <td><input type="text" name="title" id="title"></td> </tr> <tr> <td><textarea name="article" id="article"></textarea></td> </tr> <tr> <td> <form action="" method="post" enctype="multipart/form-data" name="frmart" id="frmart"> <input name="photo" type="file" id="photo" /> </form> </td> </tr> <tr> <td><input name="submit" type="button" onclick="submitArticle();" /></td> </tr></table>

 

JavaScript file

function getXMLHttpRequest() { var xhr = null; if (window.XMLHttpRequest || window.ActiveXObject) { if (window.ActiveXObject) { try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } } else { xhr = new XMLHttpRequest(); } } else { alert("XMLHTTPRequest object cannot be support !"); return null; } return xhr;}

function submitArticle(){ var xhr = getXMLHttpRequest(); var article = encodeURIComponent(document.getElementById('article').value); var title = encodeURIComponent(document.getElementById('title').value); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) { document.getElementById('article').innerHTML = xhr.responseText; } }; xhr.open("POST", "Article.php", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send("&article="+article+"&title="+title);}

 

PHP file

if (isset($_POST['article']) && !empty($_POST['article']) && isset($_POST['title'])){ $Picture = basename($_FILES['photo']['name']); $File = "Photos/".$_FILES['photo']['name']; $sql = 'INSERT INTO article VALUES("", "'.$_POST['title'].'", "'.$_POST['article'].'")'; mysql_query($sql) or die('Erreur SQL !'.$sql.'<br />'.mysql_error()); $id = mysql_insert_id(); if ($_FILES["photo"]["size"] > 0) { copy($_FILES['photo']['tmp_name'], $File); $sql_p = 'INSERT INTO picture VALUES("", "'.$id.'", "'.$_FILES['photo']['name'].'", "'.$_FILES['photo']['size'].'", "'.$_FILES['photo']['type'].'", "'.$Picture.'")'; mysql_query($sql_p) or die('Erreur SQL !'.$sql_p.'<br />'.mysql_error()); }}

 

[justsomeguy]

You can't use Javascript to do that, because Javascript doesn't have access to read the file that you're trying to upload. In order to perform an upload that simulates ajax functionality, the common solution is to add a hidden iframe to the page, submit the form normally to that iframe (so the page doesn't reload), and put a load handler on the iframe to capture the server's response and send that back to Javascript.

[thescientist]

I was actually just looking into this, to support uploading files to a backend PHP API using angular's $resource (REST/AJAX interface). Basically, it led me to the FileReader API.

https://developer.mozilla.org/en-US/docs/Web/API/FileReader

http://www.html5rocks.com/en/tutorials/file/dndfiles/

http://www.nickdesteffen.com/blog/file-uploading-over-ajax-using-html5

 

Seems promising, at least for my situation since it's for an admin section and not for casual users of the site (re: browser support).

Edited September 25, 2013 by thescientist

[yaragallamurali]

You can't use Javascript to do that, because Javascript doesn't have access to read the file that you're trying to upload. In order to perform an upload that simulates ajax functionality, the common solution is to add a hidden iframe to the page, submit the form normally to that iframe (so the page doesn't reload), and put a load handler on the iframe to capture the server's response and send that back to Javascript.

 

Hi i have the same kind of requirement. I am not able to understand clearly what you are saying. up to adding an hidden iframe is ok. what do u meant by "submit the form normally to that iframe" ? do you mean to say submit the form through the iframe or something else. how can we submit the request to the iframe which is on the same page. can u provide some more explanation. if possible some sample code. It will be so much help full to me. Thanking you so much.

[BkJim]

justsomeguy, on 25 Sept 2013 - 12:19 PM, said:

You can't use Javascript to do that, because Javascript doesn't have access to read the file that you're trying to upload. In order to perform an upload that simulates ajax functionality, the common solution is to add a hidden iframe to the page, submit the form normally to that iframe (so the page doesn't reload), and put a load handler on the iframe to capture the server's response and send that back to Javascript.

 

Hi i have the same kind of requirement. I am not able to understand clearly what you are saying. up to adding an hidden iframe is ok. what do u meant by "submit the form normally to that iframe" ? do you mean to say submit the form through the iframe or something else. how can we submit the request to the iframe which is on the same page. can u provide some more explanation. if possible some sample code. It will be so much help full to me. Thanking you so much.

 

 

Hi, I am looking for same explanation.

Thank you so much.

[Don E]

See this link to give you more of an understanding of how to submit to a hidden iframe: http://stackoverflow.com/questions/8306640/use-hidden-iframe-to-submit-dataMake sure you set the iframe to be hidden.

[yaragallamurali]

See this link to give you more of an understanding of how to submit to a hidden iframe: http://stackoverflow.com/questions/8306640/use-hidden-iframe-to-submit-dataMake sure you set the iframe to be hidden.

Thank you so much. it is really help full.

[davej]

Why does AJAX need an iframe in this case but not other cases?

[yaragallamurali]

Why does AJAX need an iframe in this case but not other cases?

I think ajax is not required in this approach. Normal javascript is enough. Ajax cannot read files from hard disk nor can handle binary data. Not only uploading binary data you cannot even get the binary data using ajax. you can only get text or xml using ajax but while uploading you cannot upload anything using Ajax. I hope this helps.

[davej]

Various hopeful noises...

 

http://www.html5rocks.com/en/tutorials/file/xhr2/

 

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest?redirectlocale=en-US&redirectslug=DOM%2FXMLHttpRequest%2FUsing_XMLHttpRequest#Submitting_forms_and_uploading_files

 

http://holyhoehle.wordpress.com/2010/09/19/uploading-files-using-ajax/

[thescientist]

I think ajax is not required in this approach. Normal javascript is enough. Ajax cannot read files from hard disk nor can handle binary data. Not only uploading binary data you cannot even get the binary data using ajax. you can only get text or xml using ajax but while uploading you cannot upload anything using Ajax. I hope this helps.

 

Not true, although it may not be widly supported yet. I would review these links though.

 

I was actually just looking into this, to support uploading files to a backend PHP API using angular's $resource (REST/AJAX interface). Basically, it led me to the FileReader API.

https://developer.mozilla.org/en-US/docs/Web/API/FileReader

http://www.html5rocks.com/en/tutorials/file/dndfiles/

http://www.nickdesteffen.com/blog/file-uploading-over-ajax-using-html5

 

Seems promising, at least for my situation since it's for an admin section and not for casual users of the site (re: browser support).

Edited September 26, 2013 by thescientist

[yaragallamurali]

 

Not true, although it may not be widly supported yet. I would review these links though.

 

I have viewed ur links. I don't think those api's (objects and functions) are standard. few browsers may support and some may not. I am not sure.

[yaragallamurali]

I have viewed ur links. I don't think those api's (objects and functions) are standard. few browsers may support and some may not. I am not sure.

Ok i thought that they are not part of the standard. seems like they are in practice.

[thescientist]

that's what I was trying to say. They are not fully implemented in all browsers, but are part of the HTML5 spec.

 

For the sake of progressive enhancement, you can use FileReader if its available, or another alternative if it's not.

[yaragallamurali]

that's what I was trying to say. They are not fully implemented in all browsers, but are part of the HTML5 spec.

 

For the sake of progressive enhancement, you can use FileReader if its available, or another alternative if it's not.

I think for html5 to be implemented fully, it will take sometime. No browser is supporting it to the full extent.

[davej]

So the hidden iframe is the safe approach?

[Ingolme]

Hidden iframe is the safest approach. As an effort to push browsers to support HTML 5 I'd only use the iframe as a fallback method for if the HTML 5 API isn't available.

 

The reason you need an iframe for files and not for any other kind of input is because all the other inputs can have their values read by Javascript without a problem. Javascript can't read file content.

[davej]

When someone gets a simple boilerplate of this iframe approach working please post it. I will do the same.

 

---EDIT---

 

I am going to get back to this thread -- but first I need to review PHP file handling.

Edited October 6, 2013 by davej

[Ingolme]

The theory is simple. The important attribute in the form is target.

Here's pretty much how it works, though there may be better done scripts than this, I just made this one up on the spot.

 

HTML:

<iframe name="fileupload" id="fileupload"></iframe><form id="fileform" method="post" enctype="multipart/form-data" action="upload.php" target="fileupload"><div><input type="file" name="file"></div></form><form... id="mainform"> <!-- Other form --></form>

Javascript:

var form = document.getElementById("mainform");var frame = document.getElementById("frame");var fileform = document.getElementById("fileform");frame.onload = checkFile;form.onsubmit = doStuff;function doStuff(e) {    e = e || window.event;    // Upload the file first, when it's uploaded, manage the rest of the data    fileform.submit();    if(e.preventDefault) e.preventDefault();    return false;}function checkFile() {    var data = frame.contentDocument.body || frame.contentWindow.document.body;    if(data == "OK") {        // Manage the rest of the form data with ordinary AJAX requests here    } else {        console.log("Unable to upload file");    }}

PHP (upload.php):

<?php    // Do ordinary file upload stuff here.    $success = false;    if(!$_FILES['file']['error']) {        $success = move_uploaded_file( ... );    }    if($success) {        echo 'OK';    }?>