页面无刷新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. 【前端积累】常用事件的js公用方法

    var eventUtil={ // 添加句柄 addHandler:function(element,type,handler){ if(element.addEventListener){ ele ...

  2. 浅析 Android 的窗口

    来源:http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=555&fromuid=6   一.窗口的概念 在开发过程中,我们经常会 ...

  3. Scala中None, Nil, Nothing的区别

    Nil是一个空的List None是一个object,是Option的子类型 List[Nothing]

  4. csv to splite db form

    termsql: https://github.com/tobimensch/termsql termsql -i textfile -d ',' -o sqlite.db 添加列名 termsql ...

  5. Beta阶段发布说明

    OverWatch来浪狼人杀助手Beta版本发布说明 Beta版本的新功能 添加了忘记密码与重置密码的功能 添加了语音流程提示的功能 添加了搜索好友的功能 添加了添加好友的功能 添加了能够直接通过点击 ...

  6. HTML5学习总结-番外03 Angular Ionic

    一 Angular Angular使用了MVVC设计模式,MVVC在概念上是真正将页面与数据逻辑分离的模式,它把数据绑定工作放到一个JS里去实现,而这个JS文件的主要功能是完成数据的绑定,即把mode ...

  7. python模块(shelve,xml,configparser,hashlib,logging)

    1.1shelve模块 shelve 模块比pickle模块简单,只有一个open函数,返回类似字典对象,可读可写:key必须为字符串, 而值可以是python所支持的数据类型. shelve模块主要 ...

  8. new bird in github

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

  9. c# .net获取随机字符串！

    public string getStr(bool b,int n)//b:是否有复杂字符,n:生成的字符串长度 { string str = "0123456789abcdefghijkl ...

  10. PHP根据array_map、array_reduce和array_column获取二维数组中某个key的集合

    http://camnpr.com/php-python/1715.html 巧用array_map()和array_reduce()替代foreach循环