ajax upload - Like AJAX
ajax upload - Like AJAX1) Put the code above in a file called micoxUpload.js
/* standard small functions */
function $m(quem){
return document.getElementById(quem)
}
function remove(quem){
quem.parentNode.removeChild(quem);
}
function addEvent(obj, evType, fn){
// elcio.com.br/crossbrowser
if (obj.addEventListener)
obj.addEventListener(evType, fn, true)
if (obj.attachEvent)
obj.attachEvent("on"+evType, fn)
}
function removeEvent( obj, type, fn ) {
if ( obj.detachEvent ) {
obj.detachEvent( 'on'+type, fn );
} else {
obj.removeEventListener( type, fn, false ); }
}
/* THE UPLOAD FUNCTION */
function micoxUpload(form,url_action,id_element,html_show_loading,html_error_http){
/******
* micoxUpload - Submit a form to hidden iframe. Can be used to upload
* Use but dont remove my name. Creative Commons.
* Versão: 1.0 - 03/03/2007 - Tested no FF2.0 IE6.0 e OP9.1
* Author: Micox - Náiron JCG - elmicoxcodes.blogspot.com - [email protected]
* Parametros:
* form - the form to submit or the ID
* url_action - url to submit the form. like action parameter of forms.
* id_element - element that will receive return of upload.
* html_show_loading - Text (or image) that will be show while loading
* html_error_http - Text (or image) that will be show if HTTP error.
*******/
//testing if 'form' is a html object or a id string
form = typeof(form)=="string"?$m(form):form;
var erro="";
if(form==null || typeof(form)=="undefined"){ erro += "The form of 1st parameter does not exists.\n";}
else if(form.nodeName.toLowerCase()!="form"){ erro += "The form of 1st parameter its not a form.\n";}
if($m(id_element)==null){ erro += "The element of 3rd parameter does not exists.\n";}
if(erro.length>0) {
alert("Error in call micoxUpload:\n" + erro);
return;
}
//creating the iframe
var iframe = document.createElement("iframe");
iframe.setAttribute("id","micox-temp");
iframe.setAttribute("name","micox-temp");
iframe.setAttribute("width","0");
iframe.setAttribute("height","0");
iframe.setAttribute("border","0");
iframe.setAttribute("style","width: 0; height: 0; border: none;");
//add to document
form.parentNode.appendChild(iframe);
window.frames['micox-temp'].name="micox-temp"; //ie sucks
//add event
var carregou = function() {
removeEvent( $m('micox-temp'),"load", carregou);
var cross = "javascript: ";
cross += "window.parent.$m('" + id_element + "').innerHTML = document.body.innerHTML; void(0); ";
$m(id_element).innerHTML = html_error_http;
$m('micox-temp').src = cross;
//del the iframe
setTimeout(function(){ remove($m('micox-temp'))}, 250);
}
addEvent( $m('micox-temp'),"load", carregou)
//properties of form
form.setAttribute("target","micox-temp");
form.setAttribute("action",url_action);
form.setAttribute("method","post");
form.setAttribute("enctype","multipart/form-data");
form.setAttribute("encoding","multipart/form-data");
//submit
form.submit();
//while loading
if(html_show_loading.length > 0){
$m(id_element).innerHTML = html_show_loading;
}
}
2) Include this file in your HTML
<script type="text/javascript" src="micoxUpload.js"></script>
3) Parameters of micoxUpload function:
1. form - the form to submit or the ID of a form .
2. url_action - url to submit the form. like 'action' parameter of forms.
3. id_element - element that will receive return of upload.
4. html_show_loading - Text (or image) that will be show while loading
5. html_error_http - Text (or image) that will be show if HTTP error.
4) Ok. Now you have a lot of forms to call the Asynchronous upload function. 3 Examples:
4.1) Basic from a button (or input-type-button) in a form:
<legend>Basic use</legend>
<form>
<input type="file" name="name" />
<div id="upload_1" class="recebe"> </div>
<button 'upa.php','upload_1','Loading...','Error in upload'); return false;" type="button">test</button>
</form>
</fieldset>
4.2) When input-file lost focus (onblur):
<fieldset>
<legend>On blur use</legend>
<form>
<input type="file" name="name" 'upa.php','upload_2','Loading...','Error in upload')" />
<div id="upload_2" class="recebe"> </div>
</form>
</fieldset>
4.3) Making acessible whitout JavaScript :
<fieldset>
<legend>Unobstrusive</legend>
<form action="upa.php" target="_blank">
<input type="file" name="name" 'upa.php','upload_3','Loading...','Error in upload')" />
<div id="upload_3" class="recebe"> </div>
<button type="submit">Go</button>
</form>
</fieldset>
Ok. Bugs, errors, comment here.
In next post, a more flexible version of this function for who understend JavaScript. Helpful...Thx
页:
[1]