ajax_file_upload https://github.com/hachi-zzq/ajaxUploadFile/tree/master/download_demo

ajaxFileUpload.js

jQuery.extend({
    createUploadIframe: function(id, uri) {
        //create frame
        var frameId = 'jUploadFrame' + id;
        var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
        if (window.ActiveXObject) {
            if (typeof uri == 'boolean') {
                iframeHtml += ' src="' + 'javascript:false' + '"';
            } else if (typeof uri == 'string') {
                iframeHtml += ' src="' + uri + '"';
            }
        }
        iframeHtml += ' />';
        jQuery(iframeHtml).appendTo(document.body);
        return jQuery('#' + frameId).get(0);
    },
    createUploadForm: function(id, fileElementId, data) {
        //create form   
        var formId = 'jUploadForm' + id;
        var fileId = 'jUploadFile' + id;
        var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
        if (data) {
            for (var i in data) {
                jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
            }
        }
        var oldElement = jQuery('#' + fileElementId);
        var newElement = jQuery(oldElement).clone();
        jQuery(oldElement).attr('id', fileId);
        jQuery(oldElement).before(newElement);
        jQuery(oldElement).appendTo(form);
        //set attributes
        jQuery(form).css('position', 'absolute');
        jQuery(form).css('top', '-1200px');
        jQuery(form).css('left', '-1200px');
        jQuery(form).appendTo('body');
        return form;
    },
    ajaxFileUpload: function(s) {
        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout        
        s = jQuery.extend({}, jQuery.ajaxSettings, s);
        var id = new Date().getTime()
        var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data) == 'undefined' ? false : s.data));
        var io = jQuery.createUploadIframe(id, s.secureuri);
        var frameId = 'jUploadFrame' + id;
        var formId = 'jUploadForm' + id;
        // Watch for a new set of requests
        if (s.global && !jQuery.active++) {
            jQuery.event.trigger("ajaxStart");
        }
        var requestDone = false;
        // Create the request object
        var xml = {}
        if (s.global) jQuery.event.trigger("ajaxSend", [xml, s]);
        // Wait for a response to come back
        var uploadCallback = function(isTimeout) {
                var io = document.getElementById(frameId);
                try {
                    if (io.contentWindow) {
                        xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null;
                        xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument : io.contentWindow.document;
                    } else if (io.contentDocument) {
                        xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null;
                        xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document;
                    }
                } catch (e) {
                    jQuery.handleError(s, xml, null, e);
                }
                if (xml || isTimeout == "timeout") {
                    requestDone = true;
                    var status;
                    try {
                        status = isTimeout != "timeout" ? "success" : "error";
                        // Make sure that the request was successful or notmodified
                        if (status != "error") {
                            // process the data (runs the xml through httpData regardless of callback)
                            var data = jQuery.uploadHttpData(xml, s.dataType);
                            // If a local callback was specified, fire it and pass it the data
                            if (s.success) s.success(data, status);
                            // Fire the global callback
                            if (s.global) jQuery.event.trigger("ajaxSuccess", [xml, s]);
                        } else jQuery.handleError(s, xml, status);
                    } catch (e) {
                        status = "error";
                        jQuery.handleError(s, xml, status, e);
                    }
                    // The request was completed
                    if (s.global) jQuery.event.trigger("ajaxComplete", [xml, s]);
                    // Handle the global AJAX counter
                    if (s.global && !--jQuery.active) jQuery.event.trigger("ajaxStop");
                    // Process result
                    if (s.complete) s.complete(xml, status);
                    jQuery(io).unbind()
                    setTimeout(function() {
                        try {
                            jQuery(io).remove();
                            jQuery(form).remove();
                        } catch (e) {
                            jQuery.handleError(s, xml, null, e);
                        }
                    }, 100)
                    xml = null
                }
            }
            // Timeout checker
        if (s.timeout > 0) {
            setTimeout(function() {
                // Check to see if the request is still happening
                if (!requestDone) uploadCallback("timeout");
            }, s.timeout);
        }
        try {
            var form = jQuery('#' + formId);
            jQuery(form).attr('action', s.url);
            jQuery(form).attr('method', 'POST');
            jQuery(form).attr('target', frameId);
            if (form.encoding) {
                jQuery(form).attr('encoding', 'multipart/form-data');
            } else {
                jQuery(form).attr('enctype', 'multipart/form-data');
            }
            jQuery(form).submit();
        } catch (e) {
            jQuery.handleError(s, xml, null, e);
        }
        jQuery('#' + frameId).load(uploadCallback);
        return {
            abort: function() {}
        };
    },
    uploadHttpData: function(r, type) {
        var data = !type;
        data = type == "xml" || data ? r.responseXML : r.responseText;
        // If the type is "script", eval it in global context
        if (type == "script") jQuery.globalEval(data);
        // Get the JavaScript object, if JSON is used.
        if (type == "json") eval("data = " + data);
        // evaluate scripts within html
        if (type == "html") jQuery("<div>").html(data).evalScripts();
        return data;
    }
})

file_upload.css

html, body
{
    margin: 0;
    padding: 0;
}
body
{
    font: 12px/1.3em Arial, Helvetica, sans-serif;
    color: #000;
    background-color: #fff;
}
h1, h2, h3, h4, h5
{
    margin: 0 0 1em;
    color: #F2683E;
}
h1
{
    font-size: 18px;
    font-weight: normal;
}
p{margin: 0 0 1em;}
a,
a:link,
a:visited{color: #F2683E;}
a:hover,
a:active{}
a img{border: none;}
form{margin: 0;}
fieldset{padding: 0;}
hr
{
    height: 1px;
    border: none;
    color: #999;
    background-color: #999;
}

/* ~~~ === POSITIONG SELECTORS ======================================= ~~~ */
#wrapper
{
    position: relative;
    width: 773px;
    height: 474px;
}

#content
{
    float: left;
    display: inline;
    width: 541px;
    height: 341px;
    margin: 30px 0 0 8px;
    padding: 22px;
}

file_upload.php

<?php
	$error = "";
	$msg = "";
	$fileElementName = 'fileToUpload';
	if(!empty($_FILES[$fileElementName]['error']))
	{
		switch($_FILES[$fileElementName]['error'])
		{
			case '1':
				$error = 'The uploaded file exceeds the upload_max_filesize directive in php.ini';
				break;
			case '2':
				$error = 'The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form';
				break;
			case '3':
				$error = 'The uploaded file was only partially uploaded';
				break;
			case '4':
				$error = 'No file was uploaded.';
				break;
			case '6':
				$error = 'Missing a temporary folder';
				break;
			case '7':
				$error = 'Failed to write file to disk';
				break;
			case '8':
				$error = 'File upload stopped by extension';
				break;
			case '999':
			default:
				$error = 'No error code avaiable';
		}
	}elseif(empty($_FILES['fileToUpload']['tmp_name']) || $_FILES['fileToUpload']['tmp_name'] == 'none')
	{
		$error = 'No file was uploaded..';
	}else 
	{
			$msg .= " File Name: " . $_FILES['fileToUpload']['name'] . ", ";
			$msg .= " File Size: " . @filesize($_FILES['fileToUpload']['tmp_name']);
			//for security reason, we force to remove all uploaded file
			@unlink($_FILES['fileToUpload']);		
	}		
	echo "{";
	echo				"error: '" . $error . "',\n";
	echo				"msg: '" . $msg . "'\n";
	echo "}";
?>

iframe_upload.html

<script src="jquery-1.4.4.min.js"></script>
<script src="ajaxfileupload.js"></script>
<!--隐藏的iframe,注意name值-->
<iframe name="if"></iframe>

<form method="post" action="action.php" enctype="multipart/form-data"  target="if">
    <!--form表单，注意target值要与iframe值一致-->
    <input type="file" name="img">
    <input type="submit" value="submit">
</form>

instruction.md

Please contact me at cailongqun@yahoo.com.cn, if you need any website development.

This is a hacked version of Ajaxupload plugin created by, which is really good enought for normal use. In this hacked version, it submits the specified file type of input element only, so we don't bother with extra form fields. how to use it?

1. include jquery.js & ajaxfileupload.js javascript files

2. create a function to be fired when the upload button clicked. e.g. function ajaxFileUpload() { //starting setting some animation when the ajax starts and completes $("#loading") .ajaxStart(function(){ $(this).show(); }) .ajaxComplete(function(){ $(this).hide(); });

    /*
    	prepareing ajax file upload
    	url: the url of script file handling the uploaded files
                    fileElementId: the file type of input element id and it will be the index of  $_FILES Array()
    	dataType: it support json, xml
    	secureuri:use secure protocol
    	success: call back function when the ajax complete
    	error: callback function when the ajax failed
    	
            */
    $.ajaxFileUpload
    (
    	{
    		url:'doajaxfileupload.php', 
    		secureuri:false,
    		fileElementId:'fileToUpload',
    		dataType: 'json',
    		success: function (data, status)
    		{
    			if(typeof(data.error) != 'undefined')
    			{
    				if(data.error != '')
    				{
    					alert(data.error);
    				}else
    				{
    					alert(data.msg);
    				}
    			}
    		},
    		error: function (data, status, e)
    		{
    			alert(e);
    		}
    	}
    )
    
    return false;
   

   }

upload.php

<html>
	<head>
		<title>Ajax File Uploader Plugin For Jquery</title>
<link href="ajaxfileupload.css" type="text/css" rel="stylesheet">
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="ajaxfileupload.js"></script>
	<script type="text/javascript">
	function ajaxFileUpload()
	{
		$("#loading")
		.ajaxStart(function(){
			$(this).show();
		})
		.ajaxComplete(function(){
			$(this).hide();
		});
		$.ajaxFileUpload
		(
			{
				url:'doajaxfileupload.php',
				secureuri:false,
				fileElementId:'fileToUpload',
				dataType: 'json',
//				data:{name:'logan', id:'id'},
				success: function (data, status)
				{
					if(typeof(data.error) != 'undefined')
					{
						if(data.error != '')
						{
							alert(data.error);
						}else
						{
							alert(data.msg);
						}
					}
				},
				error: function (data, status, e)
				{
					alert(e);
				}
			}
		)
		
		return false;
	}
	</script>	
	</head>

	<body>
<div id="wrapper">
    <div id="content">
    	<h1>Ajax File Upload Demo</h1>
    	<p>Jquery File Upload Plugin  - upload your files with only one input field</p>
				<p>
				need any Web-based Information System?<br> Please <a href="http://www.phpletter.com/">Contact Us</a><br>
				We are specialized in <br>
				<ul>
					<li>Website Design</li>
					<li>Survey System Creation</li>
					<li>E-commerce Site Development</li>
				</ul>    	
		<img id="loading" src="loading.gif" style="display:none;">
		<form name="form" action="" method="POST" enctype="multipart/form-data">
		<table cellpadding="0" cellspacing="0" class="tableForm">

		<thead>
			<tr>
				<th>Please select a file and click Upload button</th>
			</tr>
		</thead>
		<tbody>	
			<tr>
				<td><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"></td>			</tr>

		</tbody>
			<tfoot>
				<tr>
					<td><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></td>
				</tr>
			</tfoot>
	
	</table>
		</form>    	
    </div>
    

	</body>
</html>