ajaxfileupload.js

30957 단어 ajaxFileUpload
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">

좋은 웹페이지 즐겨찾기