AJAX file upload/form submit without jquery or iframes?

If I understood you correct, you can use the following code to upload the file async. Modify it as you like

var AjaxFileUploader = function () {    this._file = null;    var self = this;    this.uploadFile = function (uploadUrl, file) {        var xhr = new XMLHttpRequest();        xhr.onprogress = function (e) {            ...        };        xhr.onload = function (e) {            ...        };        xhr.onerror = function (e) {            ...        };        xhr.open("post", uploadUrl, true);        xhr.setRequestHeader("Content-Type", "multipart/form-data");        xhr.setRequestHeader("X-File-Name", file.name);        xhr.setRequestHeader("X-File-Size", file.size);        xhr.setRequestHeader("X-File-Type", file.type);        xhr.send(file);    };};AjaxFileUploader.IsAsyncFileUploadSupported = function () {    return typeof (new XMLHttpRequest().upload) !== 'undefined';} if (AjaxFileUploader.IsAsyncFileUploadSupported) {        ajaxFileUploader = new AjaxFileUploader();        $("form").submit(function () {            var uploader = $("#fileUploader")[0];            if (uploader.files.length == 0) {                return;            } else {                ajaxFileUploader.uploadFile(                    "/YourUploadUrl",                    uploader.files[0]);            }            return false;        });    }

To upload the form use the FormData class, populate it with form values and post it with XHR.

Update:For HTML4 try the following

• http://www.albanx.com/?pid=5&subid=21
• Asynchronous file upload (AJAX file upload) using jsp and javascript

http://fineuploader.com/ is a ajax file-uploader.

This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere.

No need to add jquery or any other third party library, just add IPerfect JS library and you are good to go.

IP_uploadFile(URL,responseType,this[object],[dynamicFunctionForResponse])

if user select responseType as 'html' then dynamicFunctionForResponse will get response in HTML format. In below example you will get 'done' response in alert.

HTML

    <script type="text/javascript" src="http://services.iperfect.net/js/IP_generalLib.js"></script>    <script language='javascript'>    function testResponse(data){    alert(data)    }    </script>

Body

    <form method="POST" enctype="multipart/form-data"  onsubmit="IP_uploadFile('testupload.php','html',this,testResponse); return false;">        <input type="file" name="file1">        <input type="submit" name="submit1" value="Click here">    </form>

PHP: testupload.php

    move_uploaded_file($_FILES['file1']['tmp_name'], realpath("./")."/upload/".$_FILES["file1"]["name"]);    echo "done";