javascript文件

uploadPreview.js

/*

*
*插件介绍:图片上传本地预览插件 兼容浏览器(IE 谷歌 火狐) 不支持safari 当然如果是使用这些内核的浏览器基本都兼容
*使用方法:
*界面构造(IMG标签外必须拥有DIV 而且必须给予DIV控件ID)
* <div id="imgdiv"><img id="imgShow" width="120" height="120" /></div>
* <input type="file" id="up_img" />
*调用代码:
* new uploadPreview({ UpBtn: "up_img", DivShow: "imgdiv", ImgShow: "imgShow" });
*参数说明:
*UpBtn:选择文件控件ID;
*DivShow:DIV控件ID;
*ImgShow:图片控件ID;
*Width:预览宽度;
*Height:预览高度;
*ImgType:支持文件类型 格式:["jpg","png"];
*callback:选择文件后回调方法;


*/


/*
*work:图片预览插件
*/
var uploadPreview = function(setting) {
    /*
 
    *work:this(当前对象)
    */
    var _self = this;
    /*
  
    *work:判断为null或者空值
    */
    _self.IsNull = function(value) {
        if (typeof (value) == "function") { return false; }
        if (value == undefined || value == null || value == "" || value.length == 0) {
            return true;
        }
        return false;
    }
    /*


    *work:默认配置
    */
    _self.DefautlSetting = {
        UpBtn: "",
        DivShow: "",
        ImgShow: "",
        Width: 100,
        Height: 100,
        ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
        ErrMsg: "选择文件错误,图片类型必须是(gif,jpeg,jpg,bmp,png)中的一种",
        callback: function() { }
    };
    /*
    *work:读取配置
    */
    _self.Setting = {
        UpBtn: _self.IsNull(setting.UpBtn) ? _self.DefautlSetting.UpBtn : setting.UpBtn,
        DivShow: _self.IsNull(setting.DivShow) ? _self.DefautlSetting.DivShow : setting.DivShow,
        ImgShow: _self.IsNull(setting.ImgShow) ? _self.DefautlSetting.ImgShow : setting.ImgShow,
        Width: _self.IsNull(setting.Width) ? _self.DefautlSetting.Width : setting.Width,
        Height: _self.IsNull(setting.Height) ? _self.DefautlSetting.Height : setting.Height,
        ImgType: _self.IsNull(setting.ImgType) ? _self.DefautlSetting.ImgType : setting.ImgType,
        ErrMsg: _self.IsNull(setting.ErrMsg) ? _self.DefautlSetting.ErrMsg : setting.ErrMsg,
        callback: _self.IsNull(setting.callback) ? _self.DefautlSetting.callback : setting.callback
    };
    /*
   
    *work:获取文本控件URL
    */
    _self.getObjectURL = function(file) {
        var url = null;
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
    /*
 
    *work:绑定事件
    */
    _self.Bind = function() {
    //判断当前的<input type="file">是否值改变了
        document.getElementById(_self.Setting.UpBtn).onchange = function() {
        //是否设置了值
            if (this.value) {
            //校验上传的文件是否是合法的后缀名
                if (!RegExp("\.(" + _self.Setting.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
                    alert(_self.Setting.ErrMsg);
                    this.value = "";
                    return false;
                }
                //取出文件的地址
                if (navigator.userAgent.indexOf("MSIE") > -1) {
                    try {
                        document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]);
                    } catch (e) {
                        var div = document.getElementById(_self.Setting.DivShow);
                        this.select();
                        top.parent.document.body.focus();
                        var src = document.selection.createRange().text;
                        document.selection.empty();
                        document.getElementById(_self.Setting.ImgShow).style.display = "none";
                        div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                        div.style.width = _self.Setting.Width + "px";
                        div.style.height = _self.Setting.Height + "px";
                        div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;
                    }
                } else {
                    document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]);
                }
                _self.Setting.callback();
            }
        }
    }
    /*
    
    *work:执行绑定事件
    */
    _self.Bind();

}

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             
        },  
//创建一个表单  表单中有  file域  还有其他参数  都当成了
        createUploadForm: function(id, fileElementId, data)  
        {  
            //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);  
              
            //增加文本参数的支持  
            if (data) {  
                for (var i in data) {  
                    $('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').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, 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" );   // java 的 evoke
            }              
            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" )
            data = r.responseText;
            
            //alert("看看这个js里面的的data是什么：  " +data );
            var start = data.indexOf(">");
            if(start != -1 ){
            var end = data.indexOf("<",start+1);
           
            if( end != -1 ){
                data = data.substring(start+1,end );
                }
            }
           
                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] );
       }
   }
    })