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