页面无刷新Upload File。

利用jquery.form.js的ajaxForm提交文件。

具体参考以下代码：

前台html

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="form_fileUpload.aspx.cs" Inherits="jq_form_plug.form_fileUpload" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Form插件提交文件表单

    </title>

    <script src="Script/jquery-1.12.3.min.js"></script>

    <script src="Script/jquery.form.js"></script>

    <script type="text/javascript">

        $(function () {

            var options = {

                success: function (data) {

                    alert("I am here!!");

                    $("#responseText").text(JSON.stringify(data));

                }

            };

            $("#form1").ajaxForm(options);

        });

    </script>

</head>

<body>

    <form id="form1" action="ajaxOperation.ashx" method="post" enctype="multipart/form-data">

        <table>

            <tr>

                <td>附件名字:</td>

                <td>

                    <input type="text" name="fileName" /></td>

            </tr>

            <tr>

                <td>附件:</td>

                <td>

                    <input type="file" name="document" /></td>

            </tr>

            <tr>

                <td colspan="2" style="align-content: center">

                    <input type="submit" value="模拟iframe提交表单" />

                </td>

            </tr>

        </table>

    </form>

    <br />

    <span>需要在ajaxOperation.ashx文件中对ActionName是formUpload的操作进行断点观察</span>

    <br />

    <br />

    <label id="responseText"></label>

</body>

</html>

Handler ajaxOperation.ashx.cs

using System;

using System.Collections.Generic;

using System.Collections.Specialized;

using System.Text;

using System.Web;

using Newtonsoft.Json;

namespace jq_form_plug

{

    /// <summary>

    /// ajaxOperation

    /// </summary>

    public class ajaxOperation : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            NameValueCollection frmCol = context.Request.Form;

            string actionName = context.Request.QueryString["Action"]; 

            HttpPostedFile file1 = context.Request.Files["document"];

            if (file1 != null)

            {

                //context.Response.Write("文件已上传");

                context.Response.ContentType = "application/json";

                context.Response.Write("[{\"Title\":\"学习使用AJAX技术\",\"Url\":\"#\",\"ArticleId\":\"Art1234\"},{\"Title\":\"使用JQuery构建网站\",\"Url\":\"#\",\"ArticleId\":\"Art1235\"},{\"Title\":\"使用JSON文件传输数据\",\"Url\":\"#\",\"ArticleId\":\"Art1236\"}]");

            }

            else

            {

                context.Response.Write("没有指定文件");

            }

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

页面无刷新Upload File的更多相关文章

  1. Ajax下载文件(页面无刷新)

    说明:Ajax是无法实现文件传输的,本文只是模拟了Ajax不刷新页面就可以请求并返回数据的效果.实质上还是通过提交form表单来返回文件流的输出. 分步实现逻辑: ajax请求服务器,访问数据库,根据 ...

  2. 基于jQuery的ajax系列之用FormData实现页面无刷新上传

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...

  3. HTTP与AJAX深入揭秘，不使用AJAX实现页面无刷新

    AJAX的原理是什么? 实际上就是发起HTTP请求,既然就是发起HTTP请求,那只要我们能够实现发起HTTP请求就可以在不使用AJAX的情况下实现相同的效果. 在前端有好多方式可以发起HTTP请求,比 ...

  4. JQuery 实现页面无刷新

    对于JQuery实现页面无刷新的效果,即:应用这个JQuery这个组件,可以实现在页面上加载数据库中的数据信息,但是并没有给用户页面刷新的感觉,这样既可以有效的进行数据交互,也可以不妨碍用户的其他操作 ...

  5. Asp.net页面无刷新请求实现

    Asp.net页面无刷新请求实现 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=&qu ...

  6. 浅谈页面无刷新技术ajax

    现在一般网站都是用ajax来实现页面无刷新操作的. 什么是无刷新:ajax可以实现页面与后台的数据交互,用户完全感觉不出页面有任何的刷新,这就是AJAX的无刷新. ajax方法实现: 可以对ajax进 ...

  7. JavaScript实现页面无刷新让时间走动

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

  8. axios页面无刷新提交from表单

    页面部分大概意思一下 <form method="post" enctype="multipart/form-data"> ... </for ...

  9. jQuery Pjax – 页面无刷新加载，优化用户体验

    pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入 HTML 到当前网页,带给你超快速的浏览器体验,而且有固定链接.标题以及后 ...

随机推荐

  1. LTE中的各种ID含义

    原文链接:http://www.hropt.com/ask/?q-7128.html ECI (28 Bits) = eNB ID(20 Bits) + Cell ID(8 Bits) 换成16进制就 ...

  2. 关于js的回调函数的一点看法

    算了一下又有好几个月没写博客了,最近在忙公司android的项目,所以也就很少抽时间来写些东西了.刚闲下来,我就翻了翻之前看的东西.做了android之后更加感觉到手机端开发的重要性,现在做nativ ...

  3. Linux之sar命令介绍

    sar(System Activity Reporter系统活动情况报告)是目前 Linux 上最为全面的系统性能分析工具之一,可以从多方面对系统的活动进行报告,包括:文件的读写情况.系统调用的使用情 ...

  4. sql server多重行列转置的优化

    将表1转化成表2: 表1 表2 得到表2的结果,需要经过多次pivot转换,再经union连接到一起,代码如下: ] from ( select 'a' as type, * from Table_1 ...

  5. static实现单例的隐患

    1. 前言 Java的单例有多种实现方式:单线程下的简单版本.无法在指令重排序下正常工作的Double-Check.static.内部类+static.枚举--.这篇文章要讨论的,是在使用static ...

  6. flask-- 基础篇

    flask简介: flask是一轻量级的web应用框架,它的实现是一个 wsgi 的微("Micro")框架,当然微("Micro")也不意味这它的功能存在不足 ...

  7. 用rose画UML图（用例图，活动图）

    用rose画UML图(用例图,活动图) 首先,安装rose2003,电脑从win8升到win10以后,发现win10并不支持rose2003的安装,换了rose2007以后,发现也不可以. 解决途径: ...

  8. 简单的maven配置

    groupId是指com.xx 组织标识 artifactId才是项目名称 2)编译源代码 mvn compile 3)编译测试代码 mvn test-compile 4)清空 mvn clean 5 ...

  9. Codeforces Round #384 (Div. 2) B. Chloe and the sequence（规律题）

    传送门 Description Chloe, the same as Vladik, is a competitive programmer. She didn't have any problems ...

  10. 响应式布局-Rem的用法

    前言: 文章较为系统地介绍了rem这个新的文字大小单位,绝对干货,绝对好文.转载时略有改动.   先来看看一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式 ...