jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)
参考学习:
第一篇:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html
第二篇:http://www.jb51.net/article/50518.htm
第三篇:http://zhangzhaoaaa.iteye.com/blog/2200065
第四篇:http://blog.sina.com.cn/s/blog_6d3f840a0102vkpq.html (jQuery的ajaxFileUpload上传文件插件刷新一次才能再次调用触发change)
使用方法:
第一步:先引入jQuery与ajaxFileUpload插件。注意先后顺序,这个不用说了,所有的插件都是这样。
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script src="ajaxfileupload.js" type="text/javascript"></script>
我的control代码如下:
[HttpPost]
[ValidateInput(false)]
public ActionResult EditPhoto(EmployeeModelUser u)//上传用户头像照片
{
string realpath = "";
string returnpath = "";
string ID = "";
string path = "";
if (Session["ID"] != null)
{ ID = this.HttpContext.Session["ID"].ToString();
}
u.ID = Convert.ToInt32(ID); if (u.Image != null && u.Image.ContentLength > )
{
string ext = u.Image.FileName;
u.PHOTONUMBER = ext;
path = "~/style/UserImages/User/" + ext;
realpath = Server.MapPath(path);//完整路径 u.Image.SaveAs(realpath);
returnpath = "/style/UserImages/User/" + ext;//返回view中img显示图片的路径
}
User user = new User();
user.ID = u.ID;
user.PHOTONUMBER = u.PHOTONUMBER;
employeemanage.SaveImage(user);
//return Json(new { err = "", msg = ext },"text/x-json");
return Content(returnpath);//文件存储路径
}
view代码如下:
<div class="new_portrait" id="Photo">
<div class="portrait_upload" id="portraitNo">
<span>上传自己的头像</span>
</div>
<div class="portraitShow dn" id="portraitShow">
<img width="120" height="120" id="PhotoNumber" src="">
<span>更换头像</span>
</div> <input type="file" value="" title="支持jpg、jpeg、gif、png格式,文件小于5M" name="Image" accept="image/gif,image/jpeg,image/jpg,image/png" onchange="ajaxFileUpload()" id="Image" class="myfiles">
<!-- <input type="hidden" id="headPicHidden" /> --> <span style="display: none;" id="headPic_error" class="error"></span>
</div>
<!--end .new_portrait-->
js代码第1种
$("#Image").live("ajaxFileUpload", function () { //<input type="file" id="Image" name="Image" onchange="ajaxFileUpload()" />
ajaxFileUpload();
$("#Image").replaceWith($("#Image").clone(true));
//$("#PhotoNumber").replaceWith('<img width="120" height="120" id="PhotoNumber" src="">');
}); function ajaxFileUpload() { //ajaxFileUpload上传用户头像(我的简历中的基本信息模块), <input type="file" id="Image" name="Image" onchange="ajaxFileUpload()" />成功
$.ajaxFileUpload
(
{
url: '/Employee/EditPhoto', //用于文件上传的服务器端请求地址
type:'post',
secureuri: false, //一般设置为false
fileElementId: 'Image', //文件上传控间的id属性 <input type="file" id="Image" name="Image" />
dataType: 'JSON', //返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
{
//alert(data);//成功 $("#PhotoNumber").attr("src",data);
//$("#PhotoNumber").attr(src,data);
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert('上传图片失败');
}
}
) }
js代码第2种
function uploadImageFunc() { $("#Photo").change(
function(){
// 获取文件路径
var filePath = $("input[name='Image']").val();
// 获取“.”位置
var extStart = filePath.lastIndexOf(".");
// 获取文件格式后缀,并全部大写
var ext = filePath.substring(extStart, filePath.length).toUpperCase(); // 判断文件格式
if (ext != ".BMP" && ext != ".PNG" && ext != ".JPG" && ext != ".JPEG") {
alert("图片仅限于.gif .png .jpg .jpeg文件。");
return false;
}
else {
// 使用ajaxfileupload上传文件
$.ajaxFileUpload
(
{
url: '/Employee/EditPhoto', //用于文件上传的服务器端请求地址
type:'post',
secureuri: false, //一般设置为false
fileElementId: 'Image', //文件上传控间的id属性 <input type="file" id="Image" name="Image" />
dataType: 'JSON', //返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
{
alert(data);//成功 $("#PhotoNumber").attr("src",data);
//$("#PhotoNumber").attr(src,data);
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert('上传图片失败');
}
}
)
}
});
}
实现效果:
不足:第二遍ajaxFileUpload开始,能够上传(更新)图片,不过view中的<img/>图片显示不出来(就是view的<img>的src获取不到),待解决求指点
jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)的更多相关文章
- ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法(ajaxfileupload.js第一弹)
在写这篇的时候本来想把标题直接写成报错的提示,如下: “SecurityError:Blocked a frame with origin "http://localhost:55080&q ...
- [Swift通天遁地]四、网络和线程-(9)上传图片并实时显示上传进度
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- 使用jquery插件报错:TypeError:$.browser is undefined的解决方法
关于$.browser browser就是用来获取浏览器基本信息的. jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.sup ...
- jQuery 关于IE9上传文件无法进入后台问题的原因及解决办法(ajaxfileupload.js第四弹)
第四弹的诞生完全不在自己最初的计划之中,是有个网友看了先前关于<ajaxfileupload.js系列>的文章后提出的问题,由于自己一直是用chrome浏览器去测试demo,完全忽略IE浏 ...
- 40 个让你的网站更加友好的 jQuery 插件
一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个jQuery插件是一个基本的可以扩充jQuery 原型对 ...
- 40个让你的网站屌到爆的jQuery插件
一 个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个 jQuery插件是一个基本的可以扩充jQuery 原 ...
- 在Web工程中引入Jquery插件报错解决方案
在学习Jquery插件的时候,遇到一个问题就是新建web工程后在WebRoot下引入Jquery插件的时候报错,不知道为什么好纠结,但是项目能正常运行,后来找到解决方案,在这里给大家分享一下. 解决方 ...
- 15款帮助你实现响应式导航的 jQuery 插件
对于我们大多数人来说,建立一个负责任的布局中最困难的方面是规划和导航的实现.由于没有真正经得起考验的通用解决方案,您可以使用的菜单设计风格将取决于正在建设的网站类型. 无论你正在建设什么类型的网站,在 ...
- 图片延迟加载jquery插件imgLazyLoad(三)
此Jquery插件是在图片加载前显示一个加载图片,当图片下载完毕后显示图片出来,可对图片进行是否自动缩放功能,此Jquery插件使用时可让页面先加载,而图片后加载的方式,解决了平时使用时要在图片显示出 ...
随机推荐
- Charles的HTTPS抓包方法及原理分析
原文地址:http://www.jianshu.com/p/870451cb4eb0 背景 作为移动平台的RD,项目开发过程中一项比较重要的甩锅技能——抓包应该大家都比较熟悉了,毕竟有些bug可能是由 ...
- Virtual Table
C++对象模型——吴泰 C/C++杂记 C++中的虚函数(表)实现机制以及用C语言对其进行的模拟实现 C++ 多继承和虚继承的内存布局 [已翻译100%] (虚继承参考,推荐) 图说C++对象模型:对 ...
- 【刷题】洛谷 P1115 最大子段和
题目描述 给出一段序列,选出其中连续且非空的一段使得这段和最大. 输入输出格式 输入格式: 输入文件maxsum1.in的第一行是一个正整数N,表示了序列的长度. 第2行包含N个绝对值不大于10000 ...
- 51nod 1483 化学变换 | 二进制 暴力
51nod 1483 化学变换 题面 给出n个整数(n <= 1e5,每个数 <= 1e5),对每个数都可以进行多次操作,操作有两种:乘二/整除以二. 问最少经过多少次操作能使所有数相等. ...
- 【BZOJ4059】Non-boring sequences
Solution 记序列为\(a\),计算出与\(a_i\)相等的前一个元素的位置\(pre_i\),以及后一个元素的位置\(nex_i\),显然,对于那些左端点处于\((pre_i,i]\)以及右端 ...
- Miller-Robin与二次探测
素数在数论中经常被用到.也是数论的基础之一. 人们一直在讨论的问题是,怎样快速找到素数?或者判断一个数是素数? 1.根号n枚举 原始暴力方法. 2.埃氏筛 每个合数会被筛质因子次数次.复杂度O(Nlo ...
- 【树上莫队】【SP10707】 COT2 - Count on a tree II
Description 给定一棵 \(n\) 个点的树,每个节点有一个权值,\(m\) 次询问,每次查询两点间路径上有多少不同的权值 Input 第一行是 \(n\) 和 \(m\) 第二行是 \(n ...
- NATS_10:NATS服务配置文件详解
尽管NATS可以无配置的运行,但也可以使用配置文件配置NATS服务的启动,在实际应用当中,一般都是通过使用配置文件来启动服务的. 1. 配置项包括 客户端监听器端口 Client listening ...
- day2 程序流程控制
流程控制:1.调用方法.调用方法将导致控制流程离开当前方法,转移到被调用的方法 2.选择.java中有两种做出选择的机制:if/else语句和switch语句.三目运算符可以看作是if/else的一个 ...
- UIScrollView原理
我是Mike Ash的Let’s Build…系列文章的忠实粉丝,在这一系列文章中他从头设计Cocoa的控件来解释他们的工作原理.在这里我要做一点类似的事情,用几行代码来实现我自己的滚动试图.不过首先 ...