BkJim Posted September 25, 2013 Share Posted September 25, 2013 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()); }} Link to comment Share on other sites More sharing options...
justsomeguy Posted September 25, 2013 Share Posted September 25, 2013 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. Link to comment Share on other sites More sharing options...
thescientist Posted September 25, 2013 Share Posted September 25, 2013 (edited) 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 Link to comment Share on other sites More sharing options...
yaragallamurali Posted September 26, 2013 Share Posted September 26, 2013 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. 1 Link to comment Share on other sites More sharing options...
BkJim Posted September 26, 2013 Author Share Posted September 26, 2013 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. Link to comment Share on other sites More sharing options...
Don E Posted September 26, 2013 Share Posted September 26, 2013 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. Link to comment Share on other sites More sharing options...
yaragallamurali Posted September 26, 2013 Share Posted September 26, 2013 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. Link to comment Share on other sites More sharing options...
davej Posted September 26, 2013 Share Posted September 26, 2013 Why does AJAX need an iframe in this case but not other cases? Link to comment Share on other sites More sharing options...
yaragallamurali Posted September 26, 2013 Share Posted September 26, 2013 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. Link to comment Share on other sites More sharing options...
davej Posted September 26, 2013 Share Posted September 26, 2013 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/ Link to comment Share on other sites More sharing options...
thescientist Posted September 26, 2013 Share Posted September 26, 2013 (edited) 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 Link to comment Share on other sites More sharing options...
yaragallamurali Posted September 26, 2013 Share Posted September 26, 2013 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. Link to comment Share on other sites More sharing options...
yaragallamurali Posted September 26, 2013 Share Posted September 26, 2013 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. Link to comment Share on other sites More sharing options...
thescientist Posted September 26, 2013 Share Posted September 26, 2013 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. Link to comment Share on other sites More sharing options...
yaragallamurali Posted September 27, 2013 Share Posted September 27, 2013 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. Link to comment Share on other sites More sharing options...
davej Posted September 27, 2013 Share Posted September 27, 2013 So the hidden iframe is the safe approach? Link to comment Share on other sites More sharing options...
Ingolme Posted September 27, 2013 Share Posted September 27, 2013 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. Link to comment Share on other sites More sharing options...
davej Posted September 28, 2013 Share Posted September 28, 2013 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted September 28, 2013 Share Posted September 28, 2013 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'; }?> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now