PHP Ajax上传文件实例,ajaxfileupload.js - php上传下载

PHP Ajax上传文件实例,ajaxfileupload.js

讲过利用jquery ajax与php实现图片上传,下面我介绍利用php ajax实现各种文件无刷新上传,直接放实例希望给各位同学有帮助,可以批量进行添加上传,简单方便,代码如下:

<script type= "text/javascript"  src= "jquery-1.5.1.min.js" ></script>      <script    type= "text/javascript"  >      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;      }  })    </script>      <form id= "upform"  action= ""  method= "post"  enctype= "multipart/form-data" >      <input id= 'fname'  size= '80'  /><br> <input type= "file"  name= "file1"          id= "file1"  size= "30"  /> <input type= "button"  value= "上传"          onclick= "return ajaxFileUpload();"  /> <span id= "msg"          style= "display: none" >UpLoading...</span>  </form>      <script type= "text/javascript" >  var  str =  '' ;  function  ajaxFileUpload(){        $( "#msg" )      .ajaxStart( function (){         $( this ).show();      });       /*       .ajaxComplete(function(){          $(this).hide();       });       */       $.ajaxFileUpload(      {         url: 'up_deal.php' ,         secureuri: false ,         fileElementId: 'file1' ,         dataType:  'text' ,          //data:{name:'qinmi', id:'123'},          success:  function (data){                 if (data== 'error' ){                    $( '#msg' ).html( "<span style='color:red'>上传失败</span>" );                } else {                    $( '#msg' ).html( "<span style='color:green'>上传成功</span>" );                    str +=  data+ '@' ;                    $( '#fname' ).val(str);                }             }         }      );       return   false ;  }  </script> 

 

up_deal.php,代码如下:

<?php  if  ((( $_FILES [ "file1" ][ "type" ] ==  "image/gif" )  || ( $_FILES [ "file1" ][ "type" ] ==  "image/jpeg" )  || ( $_FILES [ "file1" ][ "type" ] ==  "image/bmp" )  || ( $_FILES [ "file1" ][ "type" ] ==  "image/pjpeg" ))  && ( $_FILES [ "file1" ][ "size" ] < 100000)){ //100KB        $extend  =  explode ( "." , $_FILES [ "file1" ][ "name" ]);       $key  =  count ( $extend )-1;       $ext  =  "." . $extend [ $key ];       $newfile  = time(). $ext ;       //开源代码phpfensi.com        if (! file_exists ( 'upload' )){ mkdir ( 'upload' );}      move_uploaded_file( $_FILES [ "file1" ][ "tmp_name" ], "upload/"  .  $newfile );      @unlink( $_FILES [ 'file1' ]);       echo   $newfile ;  } else  {       echo   'error' ;  }  ?> 

查看更多关于PHP Ajax上传文件实例,ajaxfileupload.js - php上传下载的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did29316