文件上传js插件，附带图片预览与验证功能，未完待续，请大神不啬指正，指教。



/**
 * author: qingfeng.Xu
 * @version 1.0
 * Upload Image And file.if  upload Image,pre show the Image.
 */
/*调用方式数据结构与上传结果回调处理
  $.xiaozhou_UploadFile(
  {
   url: "", //用于文件上传的服务器端请求地址
   type: 'post',//上传方式，通常设置为'post'
   secureuri: false, //是否需要安全协议，一般设置为false
   fileElementId: ifileElementId, //文件上传域的ID
   dataType: 'json', //返回值类型 一般设置为json
        
   success: function(data,status)  //服务器成功响应处理函数
   { 
    
   },
   error:function(data,status)
   {
    
   }
  }
 );  
*/ 

直接复制代码，学习、整合、修改，不喜勿喷。

(function($)
{
 var g_filename = ""; 
 $.extend({ 
  xiaozhou_UploadFile: function(s)
  {
         // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout  
         s = $.extend({}, $.ajaxSettings, s);      
         var id = new Date().getTime();
         // ADD  s.data   
       
   var form = $.createUploadForm(id, s.fileElementId, s.data);
   var io = $.createUploadIframe(id, s.secureuri);
   var frameId = 'jUploadFrame' + id;
   var formId = 'jUploadForm' + id;  
         // Watch for a new set of requests
         if ( s.global && ! $.active++ )
   {
    $.event.trigger( "ajaxStart" );
   }           
         var requestDone = false;
         // Create the request object
         var xml = {};  
         if ( s.global )
             $.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)
    {
     $.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 = $.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 )
       {
        $.event.trigger( "ajaxSuccess", [xml, s] );
       }
                            
                     } else
                         $.handleError(s, xml, status);
                 } catch(e)
     {
                     status = "error";
                     $.handleError(s, xml, status, e);
                 }
 
                 // The request was completed
                 if( s.global )
                     $.event.trigger( "ajaxComplete", [xml, s] );
 
                 // Handle the global AJAX counter
                 if ( s.global && ! --$.active )
                     $.event.trigger( "ajaxStop" );
 
                 // Process result
                 if ( s.complete )
                     s.complete(xml, status);
 
                 $(io).unbind()
 
                 setTimeout(function()
          { try
           {
            $(io).remove();
            $(form).remove(); 
            
           } catch(e)
           {
            $.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 = $('#' + formId);
    $(form).attr('action', s.url);
    $(form).attr('method', 'POST');
    $(form).attr('target', frameId);
             if(form.encoding)
    {
     $(form).attr('encoding', 'multipart/form-data');         
             }
             else
    { 
     $(form).attr('enctype', 'multipart/form-data');   
             }   
             $(form).submit();
    
 
         } catch(e)
   {   
             $.handleError(s, xml, null, e);
         }  
   $('#' + frameId).load(uploadCallback);
         return {abort: function () {}}; 
 
     },
     /** handleError 方法在$1.4.2之后移除了，此处重写改方法 **/
     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 ? $(s.context) : $.event).trigger( "ajaxError", [xhr, s, e] );
   }
     },
  createUploadIframe: function(id, uri)
  {
    //create frame
             var frameId = 'jUploadFrame' + id;
             var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
    if(window.ActiveXObject)
    {
                 if(typeof uri== 'boolean'){
      iframeHtml += ' src="' + 'javascript:false' + '"';
 
                 }
                 else if(typeof uri== 'string'){
      iframeHtml += ' src="' + uri + '"';
 
                 } 
    }
    iframeHtml += ' />';
    $(iframeHtml).appendTo(document.body);
 
             return $('#' + frameId).get(0);   
     },
     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); 
             } 
         }
         //额外添加，后续优化,要上传的文件的名称（包含路径）
          $('<input type="hidden" name="filename" value="' + g_filename + '" />').appendTo(form); 
   //set attributes
   $(form).css('position', 'absolute');
   $(form).css('top', '-1200px');
   $(form).css('left', '-1200px');
   $(form).appendTo('body');  
   return form;
     },   
  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" ){
           /*** 如果返回的是字符串(JSON格式字符串)，下面会报错，导致无法走入sucess方法 加上\"  ***/
           eval( "data = " + data );
           //eval("data = \" "+data+" \" ");
         }
         // evaluate scripts within html
         if ( type == "html" ){
          jQuery("<div>").html(data).evalScripts();
         }
            
        
         return data;
     },
     PreViewImage: function(i){
      // 默认选项
 
   var defaults = {     
   
   
     wrapSelector: null, //包裹图片的元素 
   
     fileSelector:  null , //选择图片的元素
   
     width : '100%',//图片宽度设置
   
     height: 'auto',//图片高度设置
   
     errorMessage: "不是图片",//错误提示  
   
    };
   
    var opts = $.extend(defaults, i);
   
    $(opts.fileSelector).on("change",function(){
     
    g_filename = $(this).val();
    var file = this.files[0];
    
    var imageType = /image.*/;
    
    
    if (file.type.match(imageType)) {
    
    //g_fileType = file.type;
    
    //alert(g_filename);
    var reader = new FileReader();
    
    reader.onload = function(){
    
    var img = new Image();
    
    img.src = reader.result;  
    
    $(img).width( opts.width);
    
    $(img).height( opts.height);
    
    $( opts.wrapSelector ).html(img);   
   
    
    };
    
    reader.readAsDataURL(file);
    
    
    }else{
    
    alert(opts.errorMessage);
    
    }
    
    });
        
  }
 });
 
})(jQuery);