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>    
            <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" />
              
              <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>

相关阅读:
HTML
HTML协议
索引原理与慢查询优化
事务，存储过程
视图，触发器
Mysql之单表查询
剑指offer 面试题4：二维数组中的查找
剑指offer 面试题3：数组中重复的数字
剑指offer 面试题2：实现Singleton模式
剑指offer 面试题1：赋值运算符函数

原文地址：https://www.cnblogs.com/ringwang/p/2272500.html