参考学习：

第一篇：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插件。注意先后顺序，这个不用说了，所有的插件都是这样。

我的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代码如下：

js代码第1种

$("#Image").live("ajaxFileUpload", function () { //

ajaxFileUpload();

$("#Image").replaceWith($("#Image").clone(true));

//$("#PhotoNumber").replaceWith('');

});

function ajaxFileUpload() { //ajaxFileUpload上传用户头像(我的简历中的基本信息模块), 成功

$.ajaxFileUpload

(

{

url: '/Employee/EditPhoto', //用于文件上传的服务器端请求地址

type:'post',

secureuri: false, //一般设置为false

fileElementId: 'Image', //文件上传控间的id属性

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属性

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中的图片显示不出来(就是view的的src获取不到)，待解决求指点

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第四弹)

第四弹的诞生完全不在自己最初的计划之中,是有个网友看了先前关于的文章后提出的问题,由于自己一直是用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插件使用时可让页面先加载,而图片后加载的方式,解决了平时使用时要在图片显示出 ...

随机推荐

AngularJS_01之基础概述、设计原则及MVC设计模式

1.AngularJS: 开源的JS框架,用来开发单一页面应用,以及数据操作频繁的场景:2.设计原则: ①YAGNI原则:You Aren't Gonna Need It! 不要写不需要的代码! ②K ...

如何做好一个Sprint Demo

我列出了一些关于如何做好一个Demo(演示)的建议.我想通过以下四个步骤可以做出一个较好的Demo. 第一步:准备Demo故事 以真实用户使用软件的方式进行Demo.关键点不在于演示软件如何工作,而是 ...

Oracle 10g 和11g r2 下载地址(使用迅雷)

http://www.blogjava.net/wangdetian168/archive/2011/03/01/345428.html  10g http://www.blogjava.net/wa ...

hdu 3853LOOPS (概率DP)

LOOPS Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 125536/65536 K (Java/Others) Total Su ...

ASP.NET MVC 表单的几种提交方式

下面是总结一下在ASP.NET MVC中表单的几种提交方式. 1.Ajax提交表单 需要引用

转自:http://www.cnblogs.com/syxchina/archive/2012/10/11/2720257.html 1 原因 Ios默认使用utf-8格式编码,所以中文在IOS中默认 ...

Python基础(八) yaml在python中的使用

yaml 通常用来存储数据,类似于json YAML 简介 YAML(Yet Another Markup Language),一种直观的能够被电脑识别的数据序列化格式,是一个可读性高并且容易被人类阅 ...

Linux服务器配置---ftp配置

FTP其他配置 在配置文件中,还有一些关于vsftpd的其他设置,这里列出来 # Example config file /etc/vsftpd/vsftpd.conf # Allow anonymo ...

Redis实现分布式存储Session

前言: 在单个项目时,一般都是用HttpSession接口存储当前登录用户的信息.但是在分布式项目的情况下,session是不会共享的,那怎么实现session共享呢?往下看.... 一.准备工作(基 ...

在dbgrid中如何多行选中记录(ctl与shift均可用)

在dbgrid中如何多行选中记录(ctl与shift均可用),设置dbgrid的dgmultiselect为true,只有ctl好用而shift不好用,如何使shift也好用 Dbgrid源代码:pr ...