原理：将图片上传的页面放在iframe中，这样就可以在iframe中将图片提交到服务器而不需要页面刷新，提交成功后用脚本实现主页面显示上传的图片。

Default.aspx：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">

    <title></title>

    <script type="text/javascript">

        function doUpload() {

            var theFrame = document.getElementById("uploadframe");

            if (theFrame) {

                theFrame = theFrame.contentWindow;

                theFrame.selectAndUpload();

            }

        }

        function callback(str) {

            var theImg = document.getElementById("imgResult");

            theImg.setAttribute("src", str);

        }

</script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <h1>

            Asp.net 异步上传示例</h1>

        <iframe src="PicUpload.aspx" id="uploadframe" style="display: none;"></iframe>

        <p>

            <input type="button" id="btnBrowser" value="选择文件" onclick="doUpload()" />

        </p>

        <h2>

            上传结果</h2>

        <p>

            <img alt="上传后的图片" id="imgResult" style="width: 400px" />

        </p>

    </div>

    </form>

</body>

</html>

--------------------------

PicUpload.aspx：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PicUpload.aspx.cs" Inherits="PicUpload" %>

<!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 runat="server">

    <title></title>

    <script type="text/javascript">

        function selectAndUpload() {

            var theFileUpload = document.getElementById("<%=fileUpload1.ClientID%>");

            theFileUpload.onchange = function () {

                var fileExt = theFileUpload.value.substr(theFileUpload.value.lastIndexOf("."));

                if (!fileExt.match(/\.jpg|\.png|\.gif/i))//验证一下是不是图片

                {

                    top.alert("只能上传jpg,png,gif图片。");

                }

                else {

                    var myForm = document.getElementById("<%=form1.ClientID%>");

                    myForm.submit();

                }

            }

            theFileUpload.click();

        }

        function callback(filePath) {

            top.callback(filePath);

        }

</script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:FileUpload runat="server" ID="fileUpload1"></asp:FileUpload>

    </div>

    </form>

</body>

</html>

PicUpload.aspx.cs:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class PicUpload : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        if (IsPostBack && fileUpload1.HasFile)

        {

            string path = Server.MapPath("~/upload/" + fileUpload1.FileName);

            fileUpload1.SaveAs(path);

            ClientScript.RegisterClientScriptBlock(this.GetType(), "callback", "callback('upload/" + fileUpload1.FileName + "')", true);

        }

    }

}

　　

使用iframe实现图片上传预览效果的更多相关文章

  1. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  2. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  3. input file图片上传预览效果

    两种方法,方法一: js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $ ...

  4. JS实现图片上传预览效果：方法一

    <script type="text/javascript"> //处理file input加载的图片文件 $(document).ready(function(e) ...

  5. ASP.NET工作笔记之一：图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

  6. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  7. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  8. Javascript之图片上传预览

    使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaIma ...

  9. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

随机推荐

  1. python基础--基本数据类型考试_day3

    1.执行 Python 脚本的两种方式 终端和交互模式 法1:python helloword.py 法2:ps: 执行前需给预chmod 755 helloword.py (linux系统中)./h ...

  2. 1019在winddow上面安装MYSQL服务

    -- 在WINDOWS上安装MYSQL,利用运行包直接安装-- 第一步复制文件拷贝到对应目录-- 第二步修改配置文件,创建DATA目录[client]port=3312 [mysql]default- ...

  3. 链队列的C/C++实现

    #include <iostream> using namespace std; const int N = 10; typedef int ELEMTYPE; typedef struc ...

  4. 【日常笔记】datatables表格数据渲染

    现在有很多表格渲染方式 这里只是记录怎么使用datatables渲染数据 使用datatables可以更方便的来渲染数据 [中文api]http://datatables.club/index.htm ...

  5. Linux_虚拟机_安装VMware Tools

    以root用户执行,否则可能会出现权限不足,无法执行的情况 一.点击安装Vmware Tools   二.拖动安装文件到桌面并解压   三.双击并[在终端中运行]   四.根据提示回车或输入yes   ...

  6. Shell命令_文件系统常用命令df、du

    一.df(文件系统查看命令) [root@localhost ~]# df [选项] [挂载点] 选项: -a 显示所有的文件系统信息,包括特殊文件系统,如 /proc. /sysfs -h 使用习惯 ...

  7. 问题-栈S最多能容纳4个元素，现有6个元素按A、B、C、D、E、F顺序进栈，问可能的出栈顺序。

    住栈的特性:对于取出栈内元素每次只能从栈顶开始取(后进先出(栈满时,只能先出后进)) 由于栈内只能容纳4个元素: 所以 E F不可能第一个出栈: 当栈内少于四个元素时 既可以选择进栈,也可以选择出栈 ...

  8. if __name__ == '__main__':

    python if __name__ == '__main__': 模块是对象,并且所有的模块都有一个内置属性 __name__.一个模块的 __name__ 的值取决于您如何应用模块.如果 impo ...

  9. BIEE报表开发

    (1)报表开发实例结果图 (2)开发报表步骤: (1)创建分析 (2)创建仪表盘提示 (3)创建仪表盘并发布 登录网址,输入用户名和密码 1) 新建——>分析——>选择主题区域——> ...

  10. hadoop1.1.2安装过程

    实验环境:VMware 10.0.1+CentOS-6.6-i386 +jdk-6u24-linux-i586+hadoop-1.1.2.tar.gz 普通用户:michael 集群规划:1台mast ...