页面无刷新Upload File

页面无刷新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;
            }
        }
    }
}

 

posted @ 2016-07-27 17:41  怪咖Eric  阅读(335)  评论(0)  编辑  收藏  举报