页面无刷新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. C++11中的std::function

    看看这段代码 先来看看下面这两行代码: std::function<void(EventKeyboard::KeyCode, Event*)> onKeyPressed; std::fun ...

  2. C语言结构体对齐

    1.结构体变量中的元素如何访问? (1)数组中元素的访问方式:表面上有2种方式(数组下标方式和指针方式):实质上都是指针方式访问.(2)结构体变量中的元素访问方式:只有一种,用.或者->的方式来 ...

  3. AngularJS模型

    1. AngularJS模型主要就是使用的AngularJS的ng-model指令. ng-model指令可以将输入域的值与 AngularJS 创建的变量绑定. <!DOCTYPE html& ...

  4. python学习之路 第四天

    1.函数动态参数: #!/usr/bin/env python3     def show(*sss,**eee):         print(sss,type(sss))         prin ...

  5. Appium环境搭建+cordova

    1.安装JDK 配置JAVA_HOME(变量值为jdk的安装目录)以及Path path值如下: 验证是否生效 2.安装node.js 选择适合自己的版本官网直接下载https://nodejs.or ...

  6. 【BZOJ-3881】Divljak AC自动机fail树 + 树链剖分+ 树状数组 + DFS序

    3881: [Coci2015]Divljak Time Limit: 20 Sec  Memory Limit: 768 MBSubmit: 508  Solved: 158[Submit][Sta ...

  7. centos在线安装svn

    centos在线安装svn 用下列命令安装svn服务 yum install subversion 创建svn版本库目录 mkdir -p /var/svn/svnrepos 创建版本库 svnadm ...

  8. Android ooVoo Apk附件关联分析

    为什么要分析附件关联 发送和接收的图片以及头像等从网上下载的存储在手机的sdcard上面以转换后的名字命名,需要分析数据库中的记录所对应的sdcard的文件才能关联.比如数据库存储是http://oo ...

  9. new bird in github

    首次使用先要建立本地github信息: git config - -global user.name  newbird git config - -global user.email   newbir ...

  10. Web Service简要概念，学习记录！

    Web Service平台需要一套协议来实现分布式应用程序的创建.任何平台都有它的数据表示方法和类型系统.要实现互操作性,Web Service平台必须提供一套标准的类型系统,用于沟通不同平台.编程语 ...