ajaxfileupload.js

jQuery.extend
(
    {
        createUploadIframe: function(id, uri)
        {
            //create frame
            var frameId = 'jUploadFrame' + id;
                
            if(window.ActiveXObject) 
            {
                //判断浏览器是:IE9
                if(navigator.userAgent.indexOf("MSIE 9.0")>0)
                {
                    io = document.createElement('iframe'); 
                    io.id = frameId; 
                    io.name = frameId; 
                }
                //判断浏览器是否为IE6/7/8
                else if(navigator.userAgent.indexOf("MSIE 6.0") > 0 || navigator.userAgent.indexOf("MSIE 7.0") > 0 
                        || navigator.userAgent.indexOf("MSIE 8.0")> 0 )
                {
                    var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />'); 
                    if(typeof uri== 'boolean')
                    { 
                        io.src = 'javascript:false'; 
                    } 
                    else if(typeof uri== 'string')
                    { 
                        io.src = uri; 
                    } 
                }
                /*var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
                if(typeof uri== 'boolean')
                {
                    io.src = 'javascript:false';
                }
                else if(typeof uri== 'string')
                {
                    io.src = uri;
                }*/
            }
            else 
            {
                var io = document.createElement('iframe');
                io.id = frameId;
                io.name = frameId;
            }
            io.style.position = 'absolute';
            io.style.top = '-1000px';
            io.style.left = '-1000px';
    
            document.body.appendChild(io);
    
            return io;        
        },
        createUploadForm: function(id, fileElementId)
        {
            //create form    
            var formId = 'jUploadForm' + id;
            var fileId = 'jUploadFile' + id;
            var form = $('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');    
            var oldElement = $('#' + fileElementId);
            var newElement = $(oldElement).clone();
            $(oldElement).attr('id', fileId);
            $(oldElement).before(newElement);
            $(oldElement).appendTo(form);
            //set attributes
            $(form).css('position', 'absolute');
            $(form).css('top', '-1200px');
            $(form).css('left', '-1200px');
            $(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);
            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 ){
                                // 上传成功之后清空file控件的value
                                document.getElementById(s.fileElementId).value = '';
                                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);
                        //console.log("e="+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 
                            {
                                $(io).remove();
                                $(form).remove();    
                                                
                            }
                            catch(e) 
                            {
                                //console.log("e="+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 io = $('#' + frameId);
                var form = $('#' + formId);
                $(form).attr('action', s.url);
                $(form).attr('method', 'POST');
                $(form).attr('target', frameId);
                if(form.encoding)
                {
                    form.encoding = 'multipart/form-data';                
                }
                else
                {                
                    form.enctype = 'multipart/form-data';
                }            
                $(form).submit();
            } 
            catch(e) 
            {            
                //console.log("e="+e);
                //jQuery.handleError(s, xml, null, e);
            }
            if(window.attachEvent)
            {
                document.getElementById(frameId).attachEvent('onload', uploadCallback);
            }
            else
            {
                document.getElementById(frameId).addEventListener('load', uploadCallback, false);
            }         
            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" )
            {
                 var ie = (navigator.appVersion.indexOf("MSIE")!=-1);//IE
                 if(ie)
                 {
                     eval( "data = " + data);
                 }
                 else
                 {
                     eval( "data = " + $(data).text() );
                 }
            }
            // evaluate scripts within html
            if ( type == "html" )
            {
                jQuery("<div>").html(data).evalScripts();
            }
            //alert($('param', data).each(function(){alert($(this).attr('value'));}));
            return data;
        }
    }
);

 jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>上传测试页面</title>
<script src="js/jquery.min.js" ></script> 
<script src="js/ajaxfileupload.js" ></script> 

</head>
<body>
<div class="control-group">
                <label class="control-label" for="">上传图片：</label>
                <div class="controls">
                  
                  <input type="file" class="keyword51" value="" size="16" id="input_file_Name" name="input_file_Name" onChange="return upload(this);"/>
                                                           
                </div>
              </div>
              
</body>

<script type="text/javascript">

function upload(sender)
{        
    
        
    //执行上传操作
    $.ajaxFileUpload
    (
        {
            url:url,    //上传地址
            secureuri:false,
            fileElementId:'input_file_Name',//上传，input type=file的id属性值
            dataType: 'json',
            success: function (data)
            {
                console.info(data);
                             
            },
            error: function (data)
            {
                //console.log(data);
                //popDialog.show('<s:text name="data.html.cp.message"/>', '<s:text name="data.html.cp.inputmusicfileerror"/>');
            }
        }
    );
    return true;
}
</script>
</html>

 

<a id="uploadImg" href="javascript:void(0)">从本地上传<input type="file" name="image" id="stfile" size="1">