最近要做微信的图文上传，因为一个图文了表中可以有多个图文，所有按钮需要随时添加，所以做了一种无刷新上传的方法。
首先我们要在html页面中写上这样的几段代码
javascript：
$(function () {
//这个是为了绑定我们所有的上传按钮，包括动态添加的按钮
$(document).on("change", ".filebutton", function () {
$(this).parent().children("span").html(‘开始上传中....‘);
$(this).parent().submit();
});
})
//这个方法是为了让iframe中的页面调用修改本页内容的方法（可以根据自己需要修改）
function uploadSuccess(msg) {
var info = msg.split(‘|‘);
var _from = $("#" + info[2] + "_ts");
_from.html(info[0]);
if (info[1] != "") {
_from.append("<a href=‘uplod/" + info[1] + "‘ target=\"_blank\" imgurl=\"" + info[1] + "\">查看图片</a>");
}
else {
_from.append("<a imgurl=\"\"></a>");
}
}
html
<form method="post" action="../ajax/Upload.ashx?id=boximg" target=‘boximg_f‘ enctype="multipart/form-data"><!--这里用到了target属性来指向下面的iframe让页面在iframe中刷新-->
<input class="filebutton" type="file" id="boximg" name="fileUp" />
<span id="boximg_ts" runat="server" class="help-inline">上传的文件不能大于500KB</span> </form>
<!--这里隐藏这个iframe让别人看不出来刷新的效果-->
<iframe id="boximg_f" name="boximg_f" style="display:none;"></iframe>
然后我们需要建立这个Upload.ashx文件来接收post过来的文件数据
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
using System.Net;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using WeiXinHaiBLL;
namespace WeiXinHai.ajax
{
/// <summary>
/// Upload 的摘要说明
/// </summary>
public class Upload : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//string fname = context.Request.QueryString["op"].ToString();
//string str =fname+"({name:‘judy‘,age:‘23‘})";
string id = context.Request.QueryString["id"];
try
{
//获取当前Post过来的file集合对象,在这里我只获取了<input type=‘file‘ name=‘fileUp‘/>的文件控件
string file1 = "";
if (id == "citu")
{
file1 = "fileUps";
}
else
{ file1 = "fileUp"; }
HttpPostedFile file = context.Request.Files[file1];
if (file != null)
{
//当前文件后缀名
string ext = Path.GetExtension(file.FileName).ToLower();
//验证文件类型是否正确
if (!ext.Equals(".gif") && !ext.Equals(".jpg") && !ext.Equals(".png") && !ext.Equals(".bmp"))
{
//ajax/uplodereturn.html
//这里window.parent.uploadSuccess()是我在前端页面中写好的javascript function,此方法主要用于输出异常和上传成功后的图片地址
context.Response.Redirect("uplodereturn.html?error=fileerror&id=" + id, false);
return;
}
//验证文件的大小
if (file.ContentLength > (1024 * 500))
{
//这里window.parent.uploadSuccess()是我在前端页面中写好的javascript function,此方法主要用于输出异常和上传成功后的图片地址
context.Response.Redirect("uplodereturn.html?error=tobig&id=" + id, false);
return;
}
FileInfo files = new FileInfo(file.FileName);
//当前文件上传的目录
string serverPath = System.Web.HttpContext.Current.Server.MapPath("~");
string selfPath = "images\\uplod\\";
//当前待上传的服务端路径
string toFilePath = Path.Combine(serverPath, selfPath);
//生成将要保存的随机文件名
string fileName = GetImageName() + ext;
//获得要保存的文件路径
string serverFileName = toFilePath + fileName;
//物理完整路径
string toFileFullPath = serverFileName; //HttpContext.Current.Server.MapPath(toFilePath);
//将要保存的完整文件名
string toFile = toFileFullPath;//+ fileName;
context.Request.Files[0].SaveAs(toFile);
//开始上传
//file.SaveAs(imageUrl);
//这里window.parent.uploadSuccess()是我在前端页面中写好的javascript function,此方法主要用于输出异常和上传成功后的图片地址
//如果成功返回的数据是需要返回两个字符串，我在这里使用了|分隔 例： 成功信息|/Test/hello.jpg
context.Response.Redirect("uplodereturn.html?type=" + fileName + "&id=" + id, false);
return;
}
else
{
//上传失败
context.Response.Redirect("uplodereturn.html?r=a&id=" + id, false);
return;
}
}
catch (Exception ex)
{
//上传失败
context.Response.Redirect("uplodereturn.html?r=a&id=" + id, false);
return;
}
//context.Response.Write("hello word")
}
public bool IsReusable
{
get
{
return false;
}
}
#region Private Methods
/// <summary>
/// 检查是否为合法的上传图片
/// </summary>
/// <param name="_fileExt"></param>
/// <returns></returns>
private bool CheckImageExt(string _ImageExt)
{
string[] allowExt = new string[] { ".jpg", ".png", ".bmp", ".gif", ".pdf", ".jpeg", };
for (int i = 0; i < allowExt.Length; i++)
{
if (allowExt[i] == _ImageExt) { return true; }
}
return false;
}
private string GetImageName()
{
Random rd = new Random();
StringBuilder serial = new StringBuilder();
serial.Append(DateTime.Now.ToString("yyyyMMddHHmmssff"));
serial.Append(rd.Next(0, 999999).ToString());
return serial.ToString();
}
#endregion
}
}
剩下的我们就要新建一个用来调用ifarme父级uploadSuccess方法的页面uplodereturn.html
这个页面要和上面的一般处理程序在一个文件夹内
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
var url = window.location.search;
if (url.indexOf("?") != -1) {
var strurl = url.substr(1)
strs = strurl.split("&");
var returntype = ‘‘;
if ([strs[0].split("=")[0]] == ‘type‘) {
returntype = "上传成功|" + unescape(strs[0].split("=")[1]);
//window.parent.uploadSuccess("上传成功|" + unescape(strs[0].split("=")[1]));
}
else if ([strs[0].split("=")[0]] == ‘error‘) {
returntype = (unescape(strs[0].split("=")[1]) == "fileerror" ? "文件格式错误" : "上传文件过大，请重新上传！") + "|";
//window.parent.uploadSuccess(unescape(strs[0].split("=")[1]));
}
if (strs[1].split("=")[0] == ‘id‘) {
returntype += "|" + unescape(strs[1].split("=")[1]);
}
window.parent.uploadSuccess(returntype);
}
</script>
</head>
<body>
</body>
</html>
然后大功告成，我们添加的时候需要添加上最上面的html代码中的form部分就可以了
这里的原理是用from 的target 来让这个from的刷新过程在iframe中进行，这样的话我们隐藏掉iframe的时候就看不出页面的刷新效果
同时我们又在这个新建的html中拼写好我们想要的参数调用父级写好的方法，然后达到更改页面的效果。
这里我的方法是修改了span部分的内容。
时间： 2024-07-28 20:35:20