ajax文件上传成功解决浏览器兼容问题

分类：js_jQuery答疑 - 常见问题 · 发布时间：2021-10-08 18:44 · 阅读：5979
这篇文章主要为大家详细介绍了ajax文件上传的相关资料，成功解决了浏览器兼容问题，感兴趣的小伙伴们可以参考一下
ajaxfileupload控制很好用，不过发现上传文件后的结果为被浏览器处理，IE不会，谷哥和火狐都会进行处理，而且谷哥和火狐处理后的结果都不一样，这里对以上三种浏览器进行了兼容性调整。
 jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; var iframeHtml = ''; jQuery(iframeHtml).appendTo(document.body); return jQuery('#' + frameId).get(0); }, createUploadForm: function(id,fileElementId,data,fileElement) { //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; if(fileElement == null) oldElement = jQuery('#' + fileElementId); else oldElement = fileElement; 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),s.fileElement); 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) console.log( jQuery.uploadHttpData); 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(){ try { jQuery('#' + frameId).remove(); jQuery(form).remove(); } catch(e){} }}; }, uploadHttpData: function( r, type ) { var data =""; data = (type == "xml" ? r.responseXML : r.responseText); if ( type == "script" ) jQuery.globalEval( data ); /** * auth garen 2016-06-17 * 对文件上传后的响应结果进行处理，支持IE FF GC * */ if ( type == "json" ){ var reg =""; if(data.indexOf("<pre>")>-1){ reg=/<pre>(.+)<\/pre>/g; }else{ reg=/<pre.+?>(.+)<\/pre>/g; } var result = data.match(reg); var stri1=RegExp.$1; if(stri1!=null&&stri1!="" &&stri1.trim().length>0){ data = stri1; } eval( "data =" + data); } if ( type == "html" ) jQuery("<div>").html(data).evalScripts(); return data; }, handleError: function( s, xml, status, e ) { // If a local callback was specified, fire it if ( s.error ) s.error( xml, status, e ); // Fire the global callback if ( s.global ) jQuery.event.trigger( "ajaxError", [xml, s, e] ); } });</pre></div><p>更多精彩内容请参考专题<a target="_blank" href="">《ajax上传技术汇总》</a>，<a target="_blank" href="">《javascript文件上传操作汇总》</a>和<a target="_blank" href="">《jQuery上传操作汇总》</a>进行学习。</p><p>以上就是本文的全部内容，希望对大家的学习有所帮助。</p></div>                    
        </div>
        
                <div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee;">
            <strong style="color: #666;">标签：</strong>
            <div class="tags" style="display: inline-flex; margin-top: 10px;">
                                <span class="tag">ajax</span>
                                <span class="tag">文件上传</span>
                                <span class="tag">兼容</span>
                            </div>
        </div>
            </article>
    
        <div style="margin-top: 40px;">
        <h2 style="margin-bottom: 20px; color: #333; font-size: 22px;">相关文章</h2>
        <div class="article-list">
                        <a href="/article.php?id=550083" class="article-card">
                <h3>AJAX乱码与异步同步以及封装jQuery库实现步骤详解</h3>
                <p class="description">这篇文章主要介绍了异步通信技术AJAX乱码问题、异步与同步、手动封装一个jQuery库，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧</p>
            </a>
                        <a href="/article.php?id=549176" class="article-card">
                <h3>AJAX的跨域问题解决方案</h3>
                <p class="description">跨域简单的说,就是从一个域名的网页去访问另一个域名网页的资源,下面这篇文章主要给大家介绍了关于AJAX的跨域问题解决的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下</p>
            </a>
                        <a href="/article.php?id=548871" class="article-card">
                <h3>利用Ajax实现智能回答的机器人示例代码</h3>
                <p class="description">这篇文章主要介绍了利用Ajax实现智能回答的机器人,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下</p>
            </a>
                        <a href="/article.php?id=548849" class="article-card">
                <h3>ajax、axios和fetch之间优缺点重点对比总结</h3>
                <p class="description">今天被问到用没用过ajax axios,我回答经常用axios,但ajax用的比较少,下面这篇文章主要给大家介绍了关于ajax、axios和fetch之间优缺点重点对比总结的相关资料,需要的朋友可以参考下</p>
            </a>
                        <a href="/article.php?id=546597" class="article-card">
                <h3>如何通过axios发起Ajax请求(最新推荐)</h3>
                <p class="description">Axios是专注于网络数据请求的库，相比于原生的XMLHttpRequest对象，axios简单易用。相比于Jquery，axios更加轻量化，只专注于网络数据请求，这篇文章主要介绍了如何通过axios发起Ajax请求,需要的朋友可以参考下</p>
            </a>
                    </div>
    </div>
        
    <div style="margin-top: 40px; text-align: center;">
        <a href="/category.php?id=70&type=classify" 
           style="display: inline-block; padding: 12px 30px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
                  color: #fff; text-decoration: none; border-radius: 25px; font-size: 16px;">
            返回分类
        </a>
        <a href="/index.php" 
           style="display: inline-block; padding: 12px 30px; background: #fff; 
                  color: #667eea; text-decoration: none; border-radius: 25px; font-size: 16px; 
                  margin-left: 15px; border: 2px solid #667eea;">
            返回首页
        </a>
    </div>
</div>

    </main>
    <footer class="site-footer">
        <div class="container">
            <div class="footer-content">
                <p>&copy; 2026 0133技术栈。All Rights Reserved.</p>
            </div>
        </div>
    </footer>
    <script>
        // 移动端菜单切换
        document.addEventListener('DOMContentLoaded', function() {
            var menuBtn = document.querySelector('.mobile-menu-btn');
            var navList = document.querySelector('.nav-list');
            
            if (menuBtn) {
                menuBtn.addEventListener('click', function() {
                    navList.classList.toggle('active');
                    this.classList.toggle('active');
                });
            }
        });
    </script>
</body>
</html>
ajax文件上传成功 解决浏览器兼容问题

ajax文件上传成功解决浏览器兼容问题
