页面无刷新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. 教你一招：解决win10/win8.1系统在安装、卸载软件时出现2502、2503错误代码的问题

    经常遇到win10/win8.1系统在安装.卸载软件时出现2502.2503错误代码的问题. 解决办法: 1.打开任务管理器后,切换到“详细信息”选项卡,找到explore.exe这个进程,然后结束进 ...

  2. bzoj4621: Tc605

    应要求写一下这个题的题解. 我的DP很奥(奇)妙(怪),不过跟标算还是殊途同归的(反正怎么做都行……) 先讲一下奥妙的性质吧. 首先,在最终序列中,每个数最多出现一段,并且,对于出现的数,每段数两两之 ...

  3. 如何运行Spark程序

    [hxsyl@CentOSMaster spark-2.0.2-bin-hadoop2.6]# ./bin/spark-submit --class org.apache.spark.examples ...

  4. Beta阶段第七次Scrum Meeting

    Beta阶段第七次Scrum Meeting 情况简述 BETA阶段第七次Scrum Meeting 敏捷开发起始时间 2016/12/20 00:00 敏捷开发终止时间 2016/12/21 00: ...

  5. 检测对象是否为数组 instanceof

    [1,2] instanceof Array //true Object.prototype.toString.apply([]); === "[object Array]"; O ...

  6. logistic regression与SVM

    Logistic模型和SVM都是用于二分类,现在大概说一下两者的区别 ① 寻找最优超平面的方法不同 形象点说,Logistic模型找的那个超平面,是尽量让所有点都远离它,而SVM寻找的那个超平面,是只 ...

  7. web前端基础知识-（四）DOM

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...

  8. sql笨办法同步数据

    Helpers.SqlHelper sqlHelper = new Helpers.SqlHelper("server=***;database=Cms;user id=sa;passwor ...

  9. deiban8 sourcelist

    deb http://ftp2.cn.debian.org/debian/ jessie main non-free contribdeb http://ftp2.cn.debian.org/debi ...

  10. asp.net MVC4 表单 - 下拉框

    1.下拉框代码方式 控制器内构建下拉项目: List<SelectListItem> list = new List<SelectListItem>(); list.Add(n ...