ASP.NET[HTML控件]无组件无刷新的图片上传方式

此技术的原理就是用FORM提交到IFRAME里面，由IFRAME 响应，响应的页面负责保存图片，然后返回到另外一个接受路径的页面，由接受页面调用第一个页面的函数，显示图片。由于是有IFRAME页面响应处理，所以页面不存在刷新的过程，而且使用的控件都是HTML控件，提高用户体验。

第一步，上传页面：黄色背景为注意的部分

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title ></ title >
     < script  src ="../JavaScripts/Jquery/jquery-1.5.2.min.js"  type ="text/javascript" ></ script >
     < script  type ="text/javascript"  language ="javascript" >
     // 上传完成之后处理返回值
         function  SingleImgUploaded(type, fileName) {
             if  (fileName  ==   "" ) {
                alert( " 文件名不存在 " );               
                 return ;
            }

             if  (type  ==   " 1 " ) {
                 // 上传用户头像

            }
             // alert(fileName);
            $( " #testimgbox " ).attr( " src " ,  " /upload/1/ "   +  fileName);

        }
         function  imgsubmit() {

             // alert("1");
             // $("frmUserImgIFR").attr("src", "/upload/saveimg.aspx?ReturnURL=/upload/recimg.html");
              $( " #form1 " ).attr( " action " ,  " /upload/saveimg.aspx?ReturnURL=/upload/recimg.html " );
             $( " #form1 " ).submit();   



        } </ script >

</ head >
< body >
< table   border ="0"  cellpadding ="0"  cellspacing ="0" >
   < tr >
       < td  >       < br >< br >
         < table   border ="0"  cellspacing ="0"  cellpadding ="0" >          
           < tr >
             < td > &nbsp;&nbsp;&nbsp;&nbsp;
             < form  id ="form1"  name ="form1"  method ="post"   target ="frmUserImgIFR"  enctype ="multipart/form-data" >
               < input  type ="file"  name ="Filedata"  onchange ="javascript:imgsubmit();"  size ="100"   >               
               < input  name ="uploadType"  type ="hidden"  id ="hhidUserImgUploadType"  value ="1"   />            
               <!-- <input type="submit" name="Submit" value="上传"> -->
               < br >
               < img  id ="testimgbox"  src =""   />
              
               < div  style ="display: none;" >
                   < iframe  id ="frmUserImgIFR"  name ="frmUserImgIFR"  src ="" ></ iframe >
               </ div >
             
               </ form >                  
         </ td >
           </ tr >
         </ table >
       </ td >
   </ tr >
  
</ table >
</ body >
</ html >

 

第二部，保存的页面

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;

public  partial  class upload_saveimg : System.Web.UI.Page
{
     protected  void Page_Load( object sender, EventArgs e)
    {
         // string ss = Request["ttype"].ToString();

         string returnURL = Request[ " ReturnURL "];
        returnURL = (returnURL ==  null ?  "" : returnURL);
         string uploadType = Request[ " uploadType "];
        uploadType = (uploadType ==  null ?  "" : uploadType);

        HttpPostedFile file = Request.Files[ " Filedata "];
        
         string uploadPath =  @" E:\vs\WebSite\upload\1\ ";
        

         if (file !=  null)
        {
             string fileExt = file.FileName.Substring(file.FileName.LastIndexOf( ' . ') +  1).ToLower();
            fileExt = ( " , " + fileExt +  " , ");
             if (( " ,jpg,jpeg,gif,png, ").IndexOf(fileExt) <  0)
            {
                Response.Redirect(returnURL +  " ?FileName=&uploadType= " + uploadType,  true);

                 return;
            }

             if (!Directory.Exists(uploadPath))
            {
                Directory.CreateDirectory(uploadPath);
            }

            Random r =  new Random();

             string NewFileName = System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(DateTime.Now.ToString( " yyyyMMddHHmmSS ") + r.Next( 10000,  99999).ToString(),  " MD5 ");

            NewFileName +=  " . " + file.FileName.Split( ' . ')[ 1];
            file.SaveAs(uploadPath + NewFileName);
             // 下面这句代码缺少的话，上传成功后上传队列的显示不会自动消失
             // Response.Write(NewFileName);

            Response.Redirect(returnURL +  " ?FileName= " + NewFileName +  " &uploadType= " + uploadType,  true);

             return;
        }
         else
        {
            Response.Redirect(returnURL +  " ?FileName=&uploadType= " + uploadType,  true);

             return;
        }
    }
}

 第三步，显示返回的图片：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title ></ title >
     < script  type ="text/javascript"  language ="javascript" >
         var  fileName  =  queryStr( " FileName " );
         var  uploadType  =  queryStr( " uploadType " );

         try  {
        
             window.parent.SingleImgUploaded(uploadType, fileName);        
        }
catch  (e) {
            alert(e);
        }
         //         finally {
         //             window.parent.SingleImgUploaded(uploadType, fileName);
         //         }

         // 处理url中的字符串，取出某个键p的值
         function  queryStr(p) {
             var  url  =  window.location.search;
             var  paras  =  url.substring(url.indexOf( " ? " )  +   1 , url.length).split( " & " );
             return  splitChain(paras, p);
        }
         // 处理a=1&b=2&c=3这样的字符串，分割并取出键p的值
         function  splitChain(paras, p) {
             var  paraObj  =  {}
             for  (i  =   0 ; j  =  paras[i]; i ++ ) {
                paraObj[j.substring( 0 , j.indexOf( " = " )).toLowerCase()]  =  j.substring(j.indexOf( " = " )  +   1 , j.length);
            }
             if  (p  !=   null ) {
                 var  returnValue  =  paraObj[p.toLowerCase()];
                 if  ( typeof  (returnValue)  ==   " undefined " ) {
                     return   "" ;
                }  else  {
                     return  returnValue;
                }
            }  else  {
                 return  paraObj;
            }
        }
     </ script >
</ head >
< body >

</ body >
</ html >

 

 

 

 

转载于:https://www.cnblogs.com/ringwang/archive/2011/12/02/2272500.html