Send data through the Ajax form

Question

I have a form I sent it to every parameter via Ajax But do not send the form data. My question is how should I send the form data via ajax

html code :

<from action="" method="post" enctype="multipart/form-data">
   <input type = "file" name = "adrfile" />
   <input type = "button" value="Upload" onclick="javascript: upload();" />
</form>

Answer 1

File uploads cannot be done with the XmlHttpRequest object which is traditionally what is considered AJAX. The approach most people take when trying to create and async file upload is to submit the form and target an iframe . I would suggest using a javascript library like Uploadify .

There are many JQuery plugins out there as well that can help you with this. A quick google search should give you many options.

Answer 2

If you want a headache it can be done for a variety of Browsers - namely latest versions of Firefox, IE, Safari and Opera.

Need code in JS summat like (where obj is the object of the input type="file" item:

function DoReadFile(obj)
  {
    if (obj.files)
    {
      // Sensible browers
      if (1 == obj.files.length)
      {
        var file = obj.files[0];
        try {
          return obj.files[0].getAsBinary();
        }
        catch (error)
        {
           // Blank
        }
      }
    }
    else
    {
      // IE
      try
      {
        var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
        var fileHandle = fileSystem.OpenTextFile(obj.value, 1);
        var contents = contents.ReadAll();
        contents.Close();
        return contents;
      }
      catch (error)
      {
        // Blank
      }
    }
    throw "Cannot read file";
  }

You can then get JS to encrypt the data (base 64 etc) and send it along with the other stuff as a post. It cannot be a multi-part form though.

But it is a bit of a waste of time.