• 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(1000099999).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>
  • 相关阅读:
    STL源码剖析 真是一本好书
    消息映射与消息路由原理
    linux下无法正常打开pdf文件的解决方法
    [转载]Amazon's Dynamo 中文版
    [转载]NoSQL数据建模技术
    [转载]linuxkerneltuningfor500k
    YCSB初步介绍
    Lamport's Logical Clocks 和 Vector Clock
    googleperftools 试用
    [转载]Big List Of 20 Common Bottlenecks
  • 原文地址:https://www.cnblogs.com/ringwang/p/2272500.html
Copyright © 2020-2023  润新知