页面无刷新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. SQL 基础语法（一）

    SQL 语法 数据库表 一个数据库通常包含一个或多个表.每个表由一个名字标识(例如"客户"或者"订单").表包含带有数据的记录(行). 下面的例子是一个名为 & ...

  2. SQLSERVER 获取datetime日期的查询语句

    SELECT varchar(10:57AM SELECT varchar(CONVERT(100), GETDATE(), 2): 11.05.16 SELECT varchar(CONVERT(1 ...

  3. Block常用方法以及注意事项

    1. ViewController间传递数据 2. Block的@property必须定义为copy

  4. 玩转Redis之Window安装使用(干货)

    距离上次定Gc.Db框架,好久没有更新博客了,今日没什么事,就打算就Redis写点东西. Redis是一个开源(BSD许可),内存存储的数据结构服务器,可用作数据库,高速缓存和消息队列代理.它支持字符 ...

  5. Leetcode 55. Jump Game

    我一开始认为这是一道DP的题目.其实,可以维护一个maxReach,并对每个元素更新这个maxReach = max(maxReach, i + nums[i]).注意如果 i>maxReach ...

  6. noip2012 开车旅行

    此题100分的解法就是先预处理出每个点的下一个点之后倍增就好了.其实并没有太大难度. pbihao用双向链表写过了此题.在本地上我treap狂操他,but在rqnoj上,我依靠反复提交才A掉此题(最后 ...

  7. HTML5学习总结-番外05 移动终端适配

    一 viewport 在使用移动端设备浏览网页时,移动端浏览器是直接把整个页面放到一个虚拟的视图里来显示的,通常来说这个虚拟的视图大小会比手机屏幕大,用户可以通过手势操作来平移.缩放这个视图. 如果不 ...

  8. C#之索引器

    实际中不使用这个东西,只做了解 using System; using System.Collections.Generic; using System.Linq; using System.Text ...

  9. css 实现悬浮效果

    <!DOCTYPE html><html><head>  <meta charset="UTF-8">    <title&g ...

  10. jQuery对数组操作

    //对象数组 var trackObj1={ , "direcLine":"line31" }; var currentTrack=[]; currentTra ...