ajaxFileUpload.js 上传 图片

<input type="file id=“file1” name=“file” οnchange="ajaxFileUpload(“要上传图片的区域”)” />

function ajaxFileUpload() {
$.ajaxFileUpload({
url: apiHost + ‘/uploadfilestreamios.aspx?Filepath=1.png&IsFLM=false&UserCode=1&ExName=png’, //用于文件上传的服务器端请求地址
secureuri: false, //是否需要安全协议，一般设置为false
fileElementId: ‘file1’, //文件上传域的ID
dataType: ‘text’, //返回值类型 一般设置为json
success: function(data, status) //服务器成功响应处理函数
{

						var str = eval("(" + data.split("}")[0] + "}" + ")");
						if(str.Success == "1") {

							var _imgUrl = str.URL;
							/* $(".simditor-body").html($(".simditor-body").html() + "<p><img id='woyu' class='myimg' src='" + _imgUrl + "' style='max-width:800px;height:auto;'/></p>"); //把图片添加到文本域中
							//                      	
							_editor.sync(); //将编辑器的正文内容同步到 textarea 元素的 val 属性，返回值为编辑器正文的 HTML 内容。
							$("#mmb").css("display","none");
							alert("成功啦") */
							if($(".simditor-body .child_text").first().text()==""){
								$(".simditor-body .child_text").first().remove();
							}
							var _imgUrl = str.URL;
							var isMyImg="<img style='width:265px;margin-left: 5px;cursor: pointer;' onclick='window.open(\"" + _imgUrl + "\")' src=" + _imgUrl + " />";
							if($(".simditor-body .miniu:last").find("img").length>2||$(".simditor-body .miniu:last").find("img").length==0){
								$(".simditor-body ").append('<p class="miniu">'+isMyImg+'</p>');
							}else{
								$(".simditor-body").find(".miniu:last").append(isMyImg);
							}
						}
						
					},
					error: function(data, status, e) //服务器响应失败处理函数
					{
						alert(e);
					}
				});
				return false;
			}

如下是ajaxFileUpload.js

jQuery.extend({

createUploadIframe: function(id, uri)
{
    //create frame
    var frameId = 'jUploadFrame' + id;

    if(window.ActiveXObject) {
        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;
},
addOtherRequestsToForm: function(form,data)
{
    // add extra parameter
    var originalElement = $('<input type="hidden" name="" value="">');
    for (var key in data) {
        name = key;
        value = data[key];
        var cloneElement = originalElement.clone();
        cloneElement.attr({'name':name,'value':value});
        $(cloneElement).appendTo(form);
    }
    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);
    if ( s.data ) form = jQuery.addOtherRequestsToForm(form,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
                {
                    $(io).remove();
                    $(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 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)
    {
        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" )
    {
        // If you add mimetype in your response,
        // you have to delete the '<pre></pre>' tag.
        // The pre tag in Chrome has attribute, so have to use regex to remove
        var data = r.responseText;
        var rx = new RegExp("<pre.*?>(.*?)</pre>","i");
        var am = rx.exec(data);
        //this is the desired data extracted
        var data = (am) ? am[1] : "";    //the only submatch or empty
        eval( "data = " + data );
    }
    // evaluate scripts within html
    if ( type == "html" )
        jQuery("<div>").html(data).evalScripts();
    //alert($('param', data).each(function(){alert($(this).attr('value'));}));
    return data;
},

handleError: function( s, xhr, status, e )      {  
    // If a local callback was specified, fire it  
            if ( s.error ) {  
                s.error.call( s.context || s, xhr, status, e );  
            }  

            // Fire the global callback  
            if ( s.global ) {  
                (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );  
            }  
}  

})