Home Page
  • May 21, 2024, 02:54:29 am *
  • Welcome, Guest
Please login or register.

Login with username, password and session length
Advanced search  


Official site launch very soon, hurrah!

Post reply

Warning: this topic has not been posted in for at least 120 days.
Unless you're sure you want to reply, please consider starting a new topic.

Note: this post will not display until it's been approved by a moderator.

Message icon:

(Clear Attachment)
(more attachments)
Restrictions: 10 per post, maximum total size 8192KB, maximum individual size 5120KB
Note that any files attached will not be displayed until approved by a moderator.
Type the letters shown in the picture
Listen to the letters / Request another image

Type the letters shown in the picture:
Please stop spamming. Your spam posts are moderated and will never be displayed on the internet. What is eighty-eight minus eighty-six (spell out the answer):
Пожалуйста, прекратите спамить. Ваши спам-сообщения модерируются и никогда не будут отображаться в Интернете. What color is grass.:

shortcuts: hit alt+s to submit/post or alt+p to preview

Topic Summary

Posted by: Dakusan
« on: October 03, 2015, 09:30:09 pm »

It is common knowledge that you can use the FormData class to send a file via AJAX as follows:
var DataToSend=new FormData();
DataToSend.append(PostVariableName, VariableData); //Send a normal variable
DataToSend.append(PostFileVariableName, FileElement.files[0], PostFileName); //Send a file
var xhr=new XMLHttpRequest();
xhr.open("POST", YOUR_URL, true);

Something that is much less known, which doesn't have any really good full-process examples online (that I could find), is sending a URL's file as the posted file.
This is doable by downloading the file as a Blob, and then directly passing that blob to the FormData. The 3rd parameter to the FormData.append should be the file name.

The following code demonstrates downloading the file. I did not worry about adding error checking.
function DownloadFile(
   FileURL,     //http://...
   Callback,    //The function to call back when the file download is complete. It receives the file Blob.
   ContentType) //The output Content-Type for the file. Example=image/jpeg
   var Req=new XMLHttpRequest();
   Req.onload=function() {
       Callback(new Blob([this.response], {type:ContentType}));
   Req.open("GET", FileURL, true);

And the following code demonstrates submitting that file
//User Variables
var DownloadURL="https://www.castledragmire.com/layout/PopupBG.png";
var PostURL="https://www.castledragmire.com/ProjectContent/WebScripts/Default_PHP_Variables.php";
var PostFileVariableName="MyFile";
var OutputFileName="Example.jpg";
//End of User Variables

DownloadFile(DownloadURL, function(DownloadedFileBlob) {
   //Get the data to send
   var Data=new FormData();
   Data.append(PostFileVariableName, DownloadedFileBlob, OutputFileName);

   //Function to run on completion
   var CompleteFunction=function(ReturnData) {
       //Add your code in this function to handle the ajax result
       var ReturnText=(ReturnData.responseText ? ReturnData : this).responseText;

   //Normal AJAX example
   var Req=new XMLHttpRequest();
   Req.onload=CompleteFunction; //You can also use "onreadystatechange", which is required for some older browsers
   Req.open("POST", PostURL, true);

   //jQuery example
   $.ajax({type:'POST', url:PostURL, data:Data, contentType:false, processData:false, cache:false, complete:CompleteFunction});

Unfortunately, due to cross site scripting (XSS) security settings, you can generally only use ajax to query URLs on the same domain. I use my Cross site scripting solutions and HTTP Forwarders for this. Stackoverflow also has a good thread about it.