Tema: Cambiar funcion de jquery a jacascript
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 20/06/2014, 15:59
wilsonlazo
 
Fecha de Ingreso: julio-2013
Mensajes: 60
Antigüedad: 11 años, 4 meses
Puntos: 0
Cambiar funcion de jquery a jacascript
Hola gente como puedo cambiar esta funcion de jquery a funcion de javascript
o sea como este.
function upload(id){
//here
}
para poder utilizar varias veces la funcion..
el objetivo es que quiero utlizar la funcione para suber varias imagenes en la misma pagina..
espero su ayuda y saludos..

Código Javascript: 
Ver original
  1. $(function() {
  2.         // Botón para subir la firma
  3.         var btn_firma = $('#addImage'), interval;
  4.             new AjaxUpload('#addImage', {
  5.                 action: 'includes/uploadFile.php',
  6.                 onSubmit : function(file , ext){
  7.                     if (! (ext && /^(jpg|png)$/.test(ext))){
  8.                         // extensiones permitidas
  9.                         alert('Sólo se permiten Imagenes .jpg o .png');
  10.                         // cancela upload
  11.                         return false;
  12.                     } else {
  13.                         $('#loaderAjax').show();
  14.                         btn_firma.text('Espere por favor');
  15.                         this.disable();
  16.                     }
  17.                 },
  18.                 onComplete: function(file, response){
  19.  
  20.                     // alert(response);
  21.                     
  22.                     btn_firma.text('Cambiar Imagen');
  23.                     
  24.                     respuesta = $.parseJSON(response);
  25.  
  26.                     if(respuesta.respuesta == 'done'){
  27.                         $('#fotografia').removeAttr('scr');
  28.                         $('#fotografia').attr('src','images/' + respuesta.fileName);
  29.                         $('#loaderAjax').show();
  30.                         // alert(respuesta.mensaje);
  31.                     }
  32.                     else{
  33.                         alert(respuesta.mensaje);
  34.                     }
  35.                         
  36.                     $('#loaderAjax').hide();    
  37.                     this.enable();  
  38.                 }
  39.         });
  40.     });
Código HTML: 
Ver original
  1. <form method="post" action="index.php">
  2.             <div id="contenedorImagen">
  3.                 <img id="fotografia" class="fotografia" src="images/nofoto.jpg">
  4.             </div>
  5.  
  6.             <button class="boton" type="button" id="addImage">Cambiar Imagen</button>
  7.            
  8.             <div class="loaderAjax" id="loaderAjax">
  9.                 <img src="images/default-loader.gif">
  10.                 <span>Publicando Fotografía...</span>
  11.             </div>
  12. </form>

la libreria que estoy utilizando es es este:

Código Javascript: 
Ver original
  1. (function(){var G=document,K=window;function D(O){if(typeof O=="string"){O=G.getElementById(O)}return O}function C(Q,P,O){if(K.addEventListener){Q.addEventListener(P,O,false)}else{if(K.attachEvent){var R=function(){O.call(Q,K.event)};Q.attachEvent("on"+P,R)}}}var B=function(){var O=G.createElement("div");return function(P){O.innerHTML=P;var Q=O.childNodes[0];O.removeChild(Q);return Q}}();function E(P,O){return P.className.match(new RegExp("(\\s|^)"+O+"(\\s|$)"))}function F(P,O){if(!E(P,O)){P.className+=" "+O}}function L(Q,O){var P=new RegExp("(\\s|^)"+O+"(\\s|$)");Q.className=Q.className.replace(P," ")}function M(O){if(K.jQuery){return jQuery(O).offset()}var Q=0,P=0;do{Q+=O.offsetTop||0;P+=O.offsetLeft||0}while(O=O.offsetParent);return{left:P,top:Q}}function A(Q){var S,P,R,O;var T=M(Q);S=T.left;R=T.top;P=S+Q.offsetWidth;O=R+Q.offsetHeight;return{left:S,right:P,top:R,bottom:O}}function I(O){if(!O.pageX&&O.clientX){return{x:O.clientX+G.body.scrollLeft+G.documentElement.scrollLeft,y:O.clientY+G.body.scrollTop+G.documentElement.scrollTop}}return{x:O.pageX,y:O.pageY}}var H=function(){var O=0;return function(){return"ValumsAjaxUpload"+O++}}();function N(O){return O.replace(/.*(\/|\\)/,"")}function J(O){return(/[.]/.exec(O))?/[^.]+$/.exec(O.toLowerCase()):""}(function(){var O=null;Ajax_upload=AjaxUpload=function(R,P){if(R.jquery){R=R[0]}else{if(typeof R=="string"&&/^#.*/.test(R)){R=R.slice(1)}}R=D(R);this._input=null;this._button=R;this._disabled=false;this._submitting=false;this._settings={action:"upload.php",name:"userfile",data:{},autoSubmit:true,onChange:function(S,T){},onSubmit:function(S,T){},onComplete:function(T,S){}};for(var Q in P){this._settings[Q]=P[Q]}this._createInput();this._rerouteClicks();if(!O){this._createIframe()}};AjaxUpload.prototype={setData:function(P){this._settings.data=P},disable:function(){this._disabled=true},enable:function(){this._disabled=false},set_data:function(P){this.setData(P)},_createInput:function(){var Q=this;var P=G.createElement("input");P.setAttribute("type","file");P.setAttribute("name",this._settings.name);
  2. var S={position:"absolute",margin:"-5px 0 0 -175px",padding:0,width:"220px",height:"10px",opacity:0,cursor:"pointer",display:"none"};
  3. for(var R in S){
  4.     P.style[R]=S[R]
  5.     }
  6.     if(!(P.style.opacity==="0")){
  7.         P.style.filter="alpha(opacity=0)"}
  8.         G.body.appendChild(P);C(P,"change",function(){var T=N(this.value);if(Q._settings.onChange.call(Q,T,J(T))==false){return }if(Q._settings.autoSubmit){Q.submit()}});this._input=P},_rerouteClicks:function(){var P=this;var Q,R=false;C(P._button,"mouseover",function(S){if(!P._input||R){return }R=true;Q=A(P._button)});C(document,"mousemove",function(T){var S=P._input;if(!S||!R){return }if(P._disabled){L(P._button,"hover");S.style.display="none";return }var U=I(T);if((U.x>=Q.left)&&(U.x<=Q.right)&&(U.y>=Q.top)&&(U.y<=Q.bottom)){S.style.top=U.y+"px";S.style.left=U.x+"px";S.style.display="block";F(P._button,"hover")}else{R=false;S.style.display="none";L(P._button,"hover")}})},_createIframe:function(){var P=H();_iframe=B('<iframe name="'+P+'" />');_iframe.id=P;_iframe.style.display="none";G.body.appendChild(_iframe)},submit:function(){var P=this,S=this._settings;if(this._input.value===""){return }var Q=N(this._input.value);if(!(S.onSubmit.call(this,Q,J(Q))==false)){var T=this._createForm();T.appendChild(this._input);T.submit();G.body.removeChild(T);T=null;this._input=null;this._createInput();var R=_iframe;C(R,"load",function(){var V=false;if(R.src=="about:blank"){if(V){R.remove()}return }var W=R.contentDocument?R.contentDocument:frames[R.id].document;var U=W.body.innerHTML;S.onComplete.call(P,Q,U);R.src="about:blank";V=true});this._createIframe()}else{this._input.value=""}},_createForm:function(){var Q=this._settings;var R=B('<form method="post" enctype="multipart/form-data"></form>');R.style.display="none";R.action=Q.action;R.target=_iframe.name;G.body.appendChild(R);for(var S in Q.data){var P=G.createElement("input");P.type="hidden";P.name=S;P.value=Q.data[S];R.appendChild(P)}return R}}})()})();