首页 > 文章 > php教程 > PHP Ajax上传文件实例[ajaxfileupload.js]

PHP Ajax上传文件实例[ajaxfileupload.js]

WBOY原创: 2016-06-13 09:49:311384浏览

讲过利用jquery ajax与php实现图片上传，下面我介绍利用php ajax实现各种文件无刷新上传，直接放实例希望给各位同学有帮助。

可以批量进行添加上传，简单方便

代码如下

复制代码

jQuery.extend({

    createUploadIframe: function(id, uri)
    {
           //create frame
            var frameId = 'jUploadFrame' id;
            var iframeHtml = '            if(window.ActiveXObject)<br />            {<br />                 if(typeof uri== 'boolean'){<br />                   iframeHtml = ' src="' 'javascript:false' '"';<br /> </p> <p>                }<br />                 else if(typeof uri== 'string'){<br />                   iframeHtml = ' src="' uri '"';<br /> </p> <p>                } <br />            }<br />            iframeHtml = ' />';<br>            jQuery(iframeHtml).appendTo(document.body);<br> </p> <p>            return jQuery('#' frameId).get(0);        <br>     },<br>     createUploadForm: function(id, fileElementId, data)<br>     {<br>        //create form <br>        var formId = 'jUploadForm' id;<br>        var fileId = 'jUploadFile' id;<br>        var form = jQuery('<form action="" method="POST" name="' formId '" id="' formId '" enctype="multipart/form-data"></form>');   <br>        if(data)<br>        {<br>            for(var i in data)<br>            {<br>               jQuery('<input type="hidden" name="' i '" value="' data[i] '" />').appendTo(form);<br>            }          <br>        }      <br>        var oldElement = jQuery('#' fileElementId);<br>        var newElement = jQuery(oldElement).clone();<br>        jQuery(oldElement).attr('id', fileId);<br>        jQuery(oldElement).before(newElement);<br>        jQuery(oldElement).appendTo(form);<br> </p> <p> </p> <p>       <br>        //设置属性<br>        jQuery(form).css('位置', '绝对');<br>        jQuery(form).css('top', '-1200px');<br>        jQuery(form).css('left', '-1200px');<br>        jQuery(form).appendTo('body');     <br>        退货表格；<br>     },<br> </p> <p>    ajaxFileUpload：函数 {<br>         // TODO 引入全局设置，允许客户端修改所有请求，而不仅仅是超时      <br>         s = jQuery.extend({}, jQuery.ajaxSettings, s);<br>         var id = new Date().getTime()        <br>        var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data));<br>        var io = jQuery.createUploadIframe(id, s.secureuri);<br>        var frameId = 'jUploadFrame' id;<br>        var formId = 'jUploadForm' id;       <br>         // 观察一组新的请求<br>         if ( s.global && !jQuery.active )<br>        {<br>            jQuery.event.trigger( "ajaxStart" );<br>        }            <br>         var requestDone = false;<br>         // 创建请求对象<br>         var xml = {}   <br>         if ( s.global )<br>             jQuery.event.trigger("ajaxSend", [xml, s]);<br>         // 等待响应返回<br>         var uploadCallback = function(isTimeout)<br>        {          <br>            var io = document.getElementById(frameId);<br>             尝试<br>            {             <br>               if(io.contentWindow)<br>               {<br>                    xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;<br>                    xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;<br>                    <br>               }否则 if(io.contentDocument)<br>               {<br>                    xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;<br>                   xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;<br>               }                    <br>             }抓住(e)<br>            {<br>               jQuery.handleError(s, xml, null, e);<br>            }<br>             if ( xml || isTimeout == "超时") <br>            {             <br>                 requestDone = true;<br>                 var 状态；<br>                 尝试{<br>                    状态= isTimeout！=“超时”？ "成功" : "错误";<br>                     // 确保请求成功或未修改<br>                     if ( 状态 != "错误" )<br>                   {<br>                         // 处理数据（无论回调如何，都通过 httpData 运行 xml）<br>                         var data = jQuery.uploadHttpData( xml, s.dataType );    <br>                         // 如果指定了本地回调，则触发它并向其传递数据<br>                         if ( s.成功 )<br>                             s.success( 数据, 状态 );<br>     <br>                         // 触发全局回调<br>                         if( s.global )<br>                             jQuery.event.trigger( "ajaxSuccess", [xml, s] );<br>                     } 其他<br>                         jQuery.handleError(s, xml, status);<br>                 } catch(e) <br>               {<br>                     状态=“错误”;<br>                     jQuery.handleError(s, xml, status, e);<br>                 }<br> </p> <p>                // 请求已完成<br>                 if( s.global )<br>                     jQuery.event.trigger( "ajaxComplete", [xml, s] );<br> </p> <p>                // 处理全局 AJAX 计数器<br>                 if ( s.global && ! --jQuery.active )<br>                     jQuery.event.trigger( "ajaxStop" );<br> </p> <p>                // 处理结果<br>                 if ( s.complete )<br>                     s.complete(xml, 状态);<br> </p> <p>                jQuery(io).unbind()<br> </p> <p>                setTimeout(function()<br>                                 {   尝试 <br>                                    {<br>                                        jQuery(io).remove();<br>                                        jQuery(表单).remove();   <br>                                        <br>                                    } catch(e) <br>                                    {<br>                                        jQuery.handleError(s, xml, null, e);<br>                                    }                              <br> </p> <p>                                }, 100)<br> </p> <p>                xml = null<br> </p> <p>            }<br>         }<br>         // 超时检查器<br>         if ( s.timeout > 0 ) <br>        {<br>             setTimeout(function(){<br>                 // 检查请求是否仍在发生<br>                 if( !requestDone ) uploadCallback( "timeout" );<br>             }, s.timeout);<br>         }<br>         尝试<br>        {<br> </p> <p>           var form = jQuery('#' formId);<br>            jQuery(form).attr('action', s.url);<br>            jQuery(form).attr('方法', 'POST');<br>            jQuery(form).attr('target', frameId);<br>             if(form.encoding)<br>            {<br>               jQuery(form).attr('编码', '多部分/表单数据');               <br>             }<br>             其他<br>            {   <br>               jQuery(form).attr('enctype', 'multipart/form-data');        <br>             }        <br>             jQuery(form).submit();<br> </p> <p>        } catch(e) <br>        {          <br>             jQuery.handleError(s, xml, null, e);<br>         }<br>        <br>        jQuery('#'frameId).load(uploadCallback );<br>         返回{中止：函数（）{}}； <br> </p> <p>    },<br> </p> <p>    uploadHttpData: function( r, type ) {<br>         var data = !type;<br>         数据=类型==“xml”||数据？ r.responseXML : r.responseText;<br>         // 如果类型是“script”，则在全局上下文中对其进行评估<br>         if ( type == "script" )<br>             jQuery.globalEval( 数据 );<br>         // 如果使用 JSON，则获取 JavaScript 对象。<br>         if ( type == "json" )<br>             eval( "data = " data );<br>         // 评估 html<br> 中的脚本         if ( type == "html" )<br>             jQuery("</p> <div>").html(data).evalScripts();<br> <p>        返回数据；<br>     }<br> })</p> <p>脚本><br> </p> <p></p> <form id="upform" action="" method="post" enctype="multipart/form-data"> <br>     <输入id='fname' size='80'/><br>        id=“文件1”大小=“30”/> <input type="button" value="上传">        onclick =“返回ajaxFileUpload（）；” >> <span id="msg"></span>        style="display: none">正在上传...<br> </表格><br> <p><br> var str = '';<br> 函数 ajaxFileUpload(){ <br>     $("#msg")<br>     .ajaxStart(function(){<br>        $(this).show();<br>     });<br>     /*<br>     .ajaxComplete(function(){<br>        $(this).hide();<br>     });<br>     */<br>     $.ajaxFileUpload(<br>     {<br>        url:'up_deal.php',<br>        secureuri：假，<br>        fileElementId:'file1',<br>        数据类型：'文本'，<br>        //data:{name:'qinmi', id:'123'},<br>        成功：函数（数据）{<br>               if(数据=='错误'){<br>                   $('#msg').html("<span style="color:red">上传失败</span>");<br>               }其他{<br>                   $('#msg').html("<span style="color:green">上传成功</span>");<br>                   str = 数据'@';<br>                   $('#fname').val(str);<br>               }<br>            }<br>        }<br>     );<br>     返回错误；<br> }<br> </脚本></p> </form> </div> </td> </tr> </table> <p><br> <br> up_deal.php</p> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy6450')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id="copy6450"> <p><?php<br /> if ((($_FILES["file1"]["type"] == "image/gif")<br /> || ($_FILES["file1"]["type"] == "image/jpeg")<br /> || ($_FILES["file1"]["type"] == "image/bmp")<br /> || ($_FILES["file1"]["type"] == "image/pjpeg"))<br /> && ($_FILES["file1"]["size"] < 100000)){//100KB<br /> $extend = explode(".",$_FILES["file1"]["name"]);<br /> $key = count($extend)-1;<br /> $ext = ".".$extend[$key];<br /> $newfile = time().$ext;<br /> </p> <p> if(!file_exists('upload')){mkdir('upload');}<br /> move_uploaded_file($_FILES["file1"]["tmp_name"],"upload/" . $newfile);<br /> @unlink($_FILES['file1']);<br /> echo $newfile;<br /> }else {<br /> echo 'error';<br /> }<br /> ?></p> </td> </tr> </table> </td> <td width="“109”align" onclick="doCopy('copy6450')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;"> <?php </p> if ((($_FILES["file1"]["type"] == "image/gif") || ($_FILES["file1"]["type"] == "image/jpeg") || ($_FILES["file1"]["type"] == "image/bmp") || ($_FILES["file1"]["type"] == "image/pjpeg")) && ($_FILES["file1"]["size"]     $extend = Explode(".",$_FILES["file1"]["name"]);     $key = count($extend)-1;     $ext = ".".$extend[$key];     $newfile = time().$ext;     if(!file_exists('upload')){mkdir('upload');}     move_uploaded_file($_FILES["file1"]["tmp_name"],"upload/" . $newfile);     @unlink($_FILES['file1']);     回显 $newfile; }否则{     echo '错误'; } ？> </td> </tr></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn</div></div></div><div class="nphpSytBox"><span>上一篇：<a class="dBlack" title="php连接不上MySQL问题解决办法" href="http://m.php.cn/zh/faq/172657.html">php连接不上MySQL问题解决办法</a></span><span>下一篇：<a class="dBlack" title="PHP利用XML备份MySQL数据库实例" href="http://m.php.cn/zh/faq/172663.html">PHP利用XML备份MySQL数据库实例</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>相关文章</h2><em><a href="http://m.php.cn/zh/article.html" class="bBlack"><i>查看更多</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/zh/faq/92233.html" title="Windows7系统下Netbeans+PHPUnit搭建PHP单元测试开发环境及PHPUn" class="aBlack">Windows7系统下Netbeans+PHPUnit搭建PHP单元测试开发环境及PHPUn</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh/faq/97151.html" title="程序猿ProMonkey V2.03" class="aBlack">程序猿ProMonkey V2.03</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh/faq/94770.html" title="PHP Navigator" class="aBlack">PHP Navigator</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh/faq/90182.html" title="php返回数组中指定的一列（php5.5.0默认函数array_column()在php" class="aBlack">php返回数组中指定的一列（php5.5.0默认函数array_column()在php</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh/faq/208396.html" title="htmlentities和htmlspecialchars 的区别详解" class="aBlack">htmlentities和htmlspecialchars 的区别详解</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>公益在线PHP培训，帮助PHP学习者快速成长！</p></div><div class="footermid"><a href="http://m.php.cn/zh/about/us.html">关于我们</a><a href="http://m.php.cn/zh/about/disclaimer.html">免责声明</a><a href="http://m.php.cn/zh/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>