ajax无刷新上传图片
页面：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(function() {
$('#fileUp').change(function() {
$('#uploadLog').html('开始上传中....');
$('#formFile').submit();
});
})
function uploadSuccess(msg) {
if (msg.split('|').length > 1) {
$('#imgShow').attr('src', msg.split('|')[1]);
$('#uploadLog').html(msg.split('|')[0]);
} else {
$('#uploadLog').html(msg);
}
}
</script> </head>
<body>
<!--
大家注意到这个form的target的了么？这个target属性的值frameFile,是form之后的iframe的name值,
这样的写法是让当前的form表单在提交表单内容的时候转交给iframe中进行页面中表单处理，
并且不会产生当前页面跳转!
-->
<form id='formFile' name='formFile' method="post" action="IbeaconHandler.ashx" target='frameFile'
enctype="multipart/form-data">
<input type='file' id='fileUp' name='fileUp' />
<div id='uploadLog'>
</div>
<br />
<img width='200' src='' height='200' id='imgShow' alt='缩略图' />
</form>
<!--
这个iframe拿到post过来的表单数据后会开始在自身内部访问post过来的页面地址,在内部中它会刷新页面，
但是这已不重要了，因为当前的iframe已经被我display:none隐藏了！所以这样给用户看起来像是无刷新的
页面文件上传，其实只是做一个一个小小的技巧！
-->
<iframe id='frameFile' name='frameFile' style='display: none;'></iframe>
</body>
</html>
一般处理程序：
<%@ WebHandler Language="C#" Class="IbeaconHandler" %> using System;
using System.Web;
using System.IO; public class IbeaconHandler : 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'})";
try {
//获取当前Post过来的file集合对象,在这里我只获取了<input type='file' name='fileUp'/>的文件控件
HttpPostedFile file = context.Request.Files["fileUp"];
if (file != null)
{
//当前文件上传的目录
string path = context.Server.MapPath("~/images/");
//当前待上传的服务端路径
string imageUrl = path +Path.GetFileName(file.FileName);
//当前文件后缀名
string ext = Path.GetExtension(file.FileName).ToLower();
//验证文件类型是否正确
if (!ext.Equals(".gif") && !ext.Equals(".jpg") && !ext.Equals(".png") && !ext.Equals(".bmp"))
{
//这里window.parent.uploadSuccess()是我在前端页面中写好的javascript function,此方法主要用于输出异常和上传成功后的图片地址
context.Response.Write("<script>window.parent.uploadSuccess('你上传的文件格式不正确！上传格式有(.gif、.jpg、.png、.bmp)');</script>");
context.Response.End();
}
//验证文件的大小
if (file.ContentLength > 1048576)
{
//这里window.parent.uploadSuccess()是我在前端页面中写好的javascript function,此方法主要用于输出异常和上传成功后的图片地址
context.Response.Write("<script>window.parent.uploadSuccess('你上传的文件不能大于1048576KB!请重新上传！');</script>");
context.Response.End();
}
//开始上传
file.SaveAs(imageUrl);
//这里window.parent.uploadSuccess()是我在前端页面中写好的javascript function,此方法主要用于输出异常和上传成功后的图片地址
//如果成功返回的数据是需要返回两个字符串，我在这里使用了|分隔 例： 成功信息|/Test/hello.jpg
context.Response.Write("<script>window.parent.uploadSuccess('Upload Success!|/Test/" + file.FileName + "');</script>");
context.Response.End();
}
else
{
//上传失败
context.Response.Write("upload lose!");
context.Response.End();
}
}
catch
{
//上传失败
context.Response.Write("upload lose!");
context.Response.End();
}
//context.Response.Write("hello word");
} public bool IsReusable {
get {
return false;
}
} }
ajax无刷新上传图片的更多相关文章
- TP3.2：实现Ajax无刷新上传图片
1.基于TP3.2+ajaxfileupload进行无刷新上传图片,本次只上传一张,多张以后搞出来再发 2.效果: 3.html代码: <html> <head> < ...
- Thinkphp框架 -- ajax无刷新上传图片
用Thinkphp框架做无刷新上传图片 视图层 View <!doctype html> <html lang="en"> <head> < ...
- 无刷新上传图片，ajax 和 iframe
iframe 上传 upload.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...
- nodejs利用ajax实现网页无刷新上传图片
nodejs利用ajax实现网页无刷新上传图片 标签(空格分隔): nodejs 通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormDat ...
- 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...
- ajaxFileUpload.js 无刷新上传图片，支持多个参数同时上传，支持 ie6-ie10
/* 131108-xxj-ajaxFileUpload.js 无刷新上传图片 jquery 插件,支持 ie6-ie10 依赖:jquery-1.6.1.min.js 主方法:ajaxFileUpl ...
- php无刷新上传图片和文件
核心思想:通过Html的iframe标签属性操作顶级窗口,再用php动态无刷新上传图片文件. 示例如下: demo |------uploads #存放上传的文件 |------index.php | ...
- Ajax.BeginForm()实现ajax无刷新提交
1. 同时安装 Microsoft jQuery Unobtrusive ajax 和 jQuery Unobtrusive Ajax,如下图 安装完成之后多了如下的js库 2. 引用该js库 lay ...
- 使用SWFUpload无刷新上传图片
使用SWFUpload组件无刷新上传图片 在做项目时,需要用到一个图片的无刷新上传,之前听说过SWFUpload,于是想要通过SWFUpload来进行图片的无刷新上传,由于我的项目属于是ASP.NET ...
随机推荐
- 如何在IIS 7.5中部署Asp.Net MVC 5的网站
0 Sign in to vote 系统是 windwos 2008 已经安装.Net 4.0 和 .Net 4.5 已经安装MVC4 的需要文件,MVC5 找不见下载地方,求各位大哥告知一下在哪里可 ...
- spring mvc 4数据校验 validator
注解式控制器的数据验证.类型转换及格式化——跟着开涛学SpringMVC http://jinnianshilongnian.iteye.com/blog/1733708Spring4新特性——集成B ...
- bootstrap初接触
Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架.(主要是结合HTML5 CSS3的样式, 基于jquery+Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以 ...
- iPhone SlideShow
If you found any question when you use the Slideshow, don't hesitate to leave a message please.
- [zz] demand ，require ，request用法辨析
http://zhidao.baidu.com/link?url=9Q50HiOF1fWav1nSnREbc_H1jTuAHxAjeVLbZoB5bGO3ZehPxLhQdob4oGO3slMRl0W ...
- mac idea 设置
鼠标悬停显示文档注释:preferences->Editor->General:勾选 show quick documentation on mouse move 智能提示模糊搜索:pre ...
- 报错：Unable to load configuration. - action - file:/E:/apache-tomcat-8.0.37/webapps/20161102-struts2-3/WEB-INF/classes/struts.xml:11:73
第一种报错: 严重: Exception starting filter struts2Unable to load configuration. - action - file:/E:/apache ...
- [工具开发] keepalived使用nagios监控脚本
最近在做开发和办公环境的高可用,采用的是keepalived:keepalived基于Linux内核支持的LVS,既能实现高可用,又能实现负载均衡,非常实用. keepalived监控服务状态时可以用 ...
- Navicat链接Oracle提示ORA-12737
ORA-12737: Instant Client Light: unsupported server character set string Cause: The character set sp ...
- java变量命名规则
1. 变量必须以字母,下划线”_”或”$”符号开 2. 变量可以包括数字,但不能以数字开 3. 除了下划线”_”和”$”符号以外,变量名不能包含任何特殊字符 4. ...