Trying to upload file with JS.

[rain13]

Hello.Could anyone give me info about file uploading?

 

Here's my html form

<form enctype="multipart/form-data" action="upload.php" method="POST">Please choose a file: <input name="uploaded" type="file" /><br /><input type="submit" value="Upload" /></form>

And when I hit submit button I get the following post parameter

-----------------------------31112091625756rnContent-Disposition: form-data; name="uploaded"; filename="acp.css"rnContent-Type: text/cssrnrn body {rn        font: 13px arial, helvetica, sans-serif;rn    }rnrntd.this {rn        font: 13px arial, helvetica, sans-serif;rn    }rnrn    #header ul {rn        list-style: none;rn        padding: 0;rn        margin: 0;rn    }rnrn    #header li {rn        float: left;rn        border: 1px solid #307C99;rn        border-bottom-width: 0;rn        margin: 0 1 0 0;rn    }rnrn    li.Selected {rn        position: relative;rn        top: 1px;rn        background-color: #dbedff;rn    }rnrn    li.NotSelected {rn        position: relative;rn        top: 1px;rn        background-color: #99ccff;rn    }rnrn    #content {rn        border: 1px solid #307C99;rn        clear: both;rn		background-color: #dbedff;rn    }rnrnTABLE,TR,TD,BODY,SELECT,INPUT,BUTTON,TEXTAREA{font-size :12px }rnrna{rn	text-decoration: none;rn	color: #0011ff;rn}rnrnrn-----------------------------31112091625756--rn

I would like to know what's this called? 31112091625756. I guess I need to know what it is in order to generate valid post parameter.

Here is javascript submitter I've made so far. Could anyone tell if there is better/easier way that does not include jQuery ? Like formObject.submit() without reloading whole page and with out having to manually write post parameter or something?

function getXMLObject()  //XML OBJECT{   var xmlHttp = false;   try {     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")  // For Old Microsoft Browsers   }   catch (e) {     try {       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  // For Microsoft IE 6.0+     }     catch (e2) {       xmlHttp = false   // No Browser accepts the XMLHTTP Object then false     }   }   if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {     xmlHttp = new XMLHttpRequest();        //For Mozilla, Opera Browsers   }   return xmlHttp;  // Mandatory Statement returning the ajax object created}var xmlhttp = new getXMLObject();    //xmlhttp holds the ajax objectfunction Upload(action) {  var getdate = new Date();  //Used to prevent caching during ajax call  if(xmlhttp) {    xmlhttp.open("POST","./index.php?p="+p+"&a=upload&id="+id,true); //ToServer    xmlhttp.onreadystatechange = handleServerResponse;    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');	var post_data = "Editor=" + txtname.value+"&title="+escape(txttitle.value);    xmlhttp.send(post_data); //Posting txtname to PHP File  }}

Edited July 10, 2013 by SoItBegins

[justsomeguy]

"-----------------------------31112091625756" is the content boundary. Multi-part requests and responses use content boundaries to separate the parts.

 

Ajax-style uploads do not use the ajax object. You can add whatever post variables you want, but you're not going to be able to use Javascript to read the contents of the file and add it to the request, at least not in the majority of browsers.

 

One common way is to add a hidden iframe to the page, submit the form to that iframe as the form's target, and have a load handler on the iframe to retrieve the response from the server and handle it like an ajax response once the response completes. If the response contains HTML code then that might be a problem, the browser will see it as HTML content and will attempt to fix any invalid code before you have a change to get the contents of the iframe. If you change the content type of the response to try and make the browser avoid "correcting" anything in the response, then some browsers (produced by Microsoft) will show a download box when the response comes back. If the response doesn't contain HTML code then the browser shouldn't do much, although some browsers (produced by Google) will try to wrap the entire thing in a <pre> tag.

[rain13]

Thanks a lot. I got it work that way.

 

I have one extra question: whats the best way for removing iframe with deleted file from files list?

 

I have structure like:

iframe1

iframe2

...

iframenSeparate iframe for every file.

 

And what I am currently doing is that once upload is complete I echo delete link back to user:

echo "File: ". basename( $_FILES['uploaded']['name']). ' <a href="./upload.php?a=delete&file='.$id.'">delete</a>';

And when user clicks on that link I inform him about it:

 die("File have been successfully deleted.");

But in my opinion it would look nicer if that iframe were removed instead of displaying "File have been successfully deleted." there. What's the best way of doing that? Can I make that delete link inside iframe so that it would also delete iframe itself or should I write javascript code that would check iframe contents once in every second and delete it if it contains "File have been successfully deleted."?Just looking forward to hear some thoughts/ideas on that.

Edited July 13, 2013 by SoItBegins

[justsomeguy]

I don't really understand why you have multiple iframes, when I do an ajax upload I'll use Javascript to create a hidden iframe, set the form's target to the new iframe, do the upload, and once it finishes remove the iframe again. iframes are supposed to show external content, so I'm not sure why you have 1 iframe per file, you could just show all of that information on the page without using iframes and then use Javascript to remove the elements that contain the file information if they press delete. Now you're talking about clicking a link inside the iframe which would remove the iframe on the parent page, which sounds a little over-complicated. But if you want to do that then inside the iframe you can target the parent page with window.parent, so you can call a function on the parent to remove the iframe or just use the parent's document object to get the iframe and remove it.

[rain13]

Thanks for explanation. I was just looking for different ideas/methods. Just out of curiosity how does your javascript determine if upload was success or not?

[justsomeguy]

Like with other ajax requests, it looks at the response from the server.

[rain13]

Do you do that by sending separate request to server or do you use that same iframe to get the response?

Edited July 15, 2013 by SoItBegins

[justsomeguy]

Since the form gets submitted to the iframe, the server's response will be the contents of the iframe after the request finishes.

[rain13]

Thanks for your reply. Just wanted be sure that my logic is right.