最近要做微信的图文上传,因为一个图文了表中可以有多个图文,所有按钮需要随时添加,所以做了一种无刷新上传的方法。

首先我们要在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 > ( * ))
{
//这里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[].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 = ; 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(, ).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部分的内容。

ajax 无刷新上传的更多相关文章

  1. 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

    现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...

  2. ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传

    先上几张图更直观展示一下要实现的功能.本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...

  3. ajax无刷新上传和下载

    关于ajax无刷新上传和下载 这是一个没什么含量但是又用的比较多又不得不说的问题,其实真的不想说,因为没什么好说的. 关于上传 1.使用Flash,ActiveX 上传 ,略... 2.自己写XMLH ...

  4. Ajax 无刷新上传文件插件 uploadify 的使用

    在表单中无法直接使用 Ajax 上传文件,解决的思路可以是使用插件无刷新地上传文件,返回文件上传后的地址,然后把该地址作为 Ajax 的参数传递给服务器端进行数据库处理.可以使用 uploadify ...

  5. ajax无刷新上传

    我们在使用上传控件的时候,会遇到刷新的问题,最近使用ajax做的上传,觉得效果还是很不错. 首先,我们需要在页面上放上上传控件:需要注意的是,我们必须放在form里面,实现表单上传.  <for ...

  6. ajax无刷新上传文件

    网页上传文件最简单的方式就是通过表单上传了,但是在提交表单的时候会导致网页刷新,但有的时候我们不想网页刷新,有什么办法呢,我们可以使用ajax上传文件来做到这一点.只有ajax还不行,还需要JavaS ...

  7. jquery 的ajax无刷新上传文件之后,页面还是会莫名的刷新-----解决办法

    文件上传用到全局数组: $_FILES 只需要把下面的 <button onclick="post()">提交</button> 改为 <input ...

  8. jQuery.form Ajax无刷新上传错误 (jQuery.handleError is not a function) 解决方案

    今天,随着ajaxfileupload时间firebug财报显示,"jQuery.handleError is not a function"错误.因为一旦使用jQuery.for ...

  9. jquery ajax 无刷新上传

    var form = new FormData(); form.append('file', $("#submitmaterials").find("input" ...

随机推荐

  1. 定时器中实现数据库表数据移动的功能,Exception in thread "Timer-0" isExist java.lang.NullPointerException定时器中线程报错。

    package com.shawnway.trade.marketdata.constants; import java.sql.SQLException; import java.util.Cale ...

  2. 组件封装:es6转es5

    1.先全局安装babel-cli,输入命令 npm install babel-cli -g 2.输入 cd d:\es6 ; ---进入文件夹路径 3.输入 npm init: 一路回车键 ---( ...

  3. chrome调试 JavaScript 脚本

    随着 JavaScript 应用的复杂性逐渐提高,开发者需要有力的调试工具来帮助他们快速发现问题的原因,并且能高效地修复它.Chrome DevTools 提供了一系列实用的工具使得调试 JavaSc ...

  4. LL基本姿势

    在说怎么练习之前,先说说LL这个游戏里面的一些基本概念: 谱面元素(element) 谱面由一个个的音符组成,在LL中,音符(Note)分以下三类: 单点(下简称S,Single),同一时刻只有一个圆 ...

  5. Windows Phone 十九、罗盘

    磁力计概述 拥有磁力计硬件支持的设备可以根据磁力计来确定相对于北极的角度 磁力计的访问 API 定义在 Compass 类中 调用方式和加速计类似 <Grid Background=" ...

  6. Python GIL 多线程机制 (C source code)

    最近阅读<Python源码剖析>对进程线程的封装解释: GIL,Global Interpreter Lock,对于python的多线程机制非常重要,其如何实现的?代码中实现如下: 指向一 ...

  7. 通什翡翠商城大站协议邮件群发系统日发20-30万封不打码不换ip不需发件箱100%进收件箱

    用一种新的技术思维去群发邮件一种不用换IP,不需要任何发件箱的邮件群发方式一种不需要验证码,不需要**代码变量的邮件群发方式即使需要验证码也能全自动识别验证码的超级智能软件教你最核心的邮件群发思维和软 ...

  8. iOS常用设计模式笔记

    一.原则 1.单一职责原则 (Single Responsiblity Principle SRP) 2.开闭原则(Open Closed Principle,OCP) 3.里氏替换原则(Liskov ...

  9. phonegap android 输入法弹出会遮盖表单框的解决办法

    phonegap android 当页面内容比较多,表单超出屏幕范围时,点击输入,输入法会遮盖住表单框,而且无法向上滑动. 经过测试发现,是由于config.xml中设置了 FullScreen 的全 ...

  10. asp .Net TreeView实现数据绑定和事件响应

    最近做了一个图书馆管理系统,其中要实现中图法分类号查询,因为初学asp ,感觉还有点难度, 第一步:数据库文件 第二步 向界面中拖进TreeView控件 第三步添加事件 下面是cs文件代码 //Tre ...