总结两个图片上传的方法:

一:使用jquery.form中的ajaxSubmit来实现上传。

<script src="~/JavaScript/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/JavaScript/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//异步上传图片
$("#btnUpload").click(function () {
if ($.trim($("#fileUp").val()) == "") {
alert("请选择一个图片文件,再点击上传。");
return;
}
if (!isImageFileName($.trim($("#fileUp").val()))) {
alert("请选择一个图片文件,文件类型错误。");
return;
}
$('#formFile').ajaxSubmit({
success: function (msg) {
if (msg.indexOf("UserFolder") != -1) {
var start = msg.indexOf(">");
if (start != -1) {
var end = msg.indexOf("<", start + 1);
if (end != -1) {
msg = msg.substring(start + 1, end);
}
}
$("#upLoadImageShow").attr('src', msg);//这里是重新设置图片的地址
}
else {
alert(msg);
}
}
});
});
}); function isImageFileName(str) {
var reg = /([0-9]{1,}.jpg)|([0-9]{1,}.gif)|([0-9]{1,}.png)|([0-9]{1,}.bmp)/;
if (reg.test(str)) {
return true;
}
return false;
}
</script>
<div>
<form id='formFile' name='formFile' method="post" action="/Home/UpLoadDemo2" target='frameFile' enctype="multipart/form-data">
<div>
<img alt="" src="~/Image/0.jpg" id="upLoadImageShow" width="130" height="130" />
<input type='file' id='fileUp' name='fileUp' title="选择照片" />
<input id="btnUpload" type="button" name="" value="上传" />
</div>
</form>
</div>
[HttpPost]
public JsonResult UpLoadDemo2()
{
//定义错误消息
string msg = "";
//接受上传文件
HttpPostedFileBase hp = Request.Files["fileUp"];
if (hp == null)
{
msg = "请选择文件.";
}
//获取上传目录 转换为物理路径
string uploadPath = Server.MapPath("~/UserFolder/");
//获取文件名
string fileName = DateTime.Now.Ticks.ToString() + System.IO.Path.GetExtension(hp.FileName);
//获取文件大小
long contentLength = hp.ContentLength;
//文件不能大于1M
if (contentLength > * )
{
msg = "文件大小超过限制要求.";
}
//保存文件的物理路径
string saveFile = uploadPath + fileName;
try
{
//保存文件
hp.SaveAs(saveFile);
msg = "/UserFolder/" + fileName;
}
catch
{
msg = "上传失败.";
} JsonResult rs = Json(msg);
rs.ContentType = "text/html";
return rs;
}

二:使用jquery.uploadify实现上传。

<script src="~/JavaScript/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Content/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
<link href="~/Content/uploadify/uploadify.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$('#uploadify').uploadify({
uploader: '/Home/upload', // 服务器端处理地址
swf: '/Content/uploadify/uploadify.swf', // 上传使用的 Flash width: 60, // 按钮的宽度
height: 23, // 按钮的高度
buttonText: "上传", // 按钮上的文字
buttonCursor: 'hand', // 按钮的鼠标图标 fileObjName: 'Filedata', // 上传参数名称 // 两个配套使用
fileTypeExts: "*.jpg;*.png", // 扩展名
fileTypeDesc: "请选择 jpg png 文件", // 文件说明 auto: true, // 选择之后,自动开始上传
multi: true, // 是否支持同时上传多个文件
queueSizeLimit: 5, // 允许多文件上传的时候,同时上传文件的个数
onUploadSuccess: function (file, data, response) { //成功返回内容(data)
$("#upImg").attr("src", "../UserFolder/" + data);
$("#upImg").css("display", "block");
}
});
});
</script> <div>
<h1>uploadify 3.2 文件上传的基本实现</h1>
<p>
使用了 12 个参数
<ul>
<li>uploader: 服务器端接收上传文件的地址</li>
<li>swf:用来实现客户端支持的 Flash</li> <li>width:按钮的宽度</li>
<li>height:按钮的高度</li>
<li>buttonText: 上传按钮的文字</li>
<li>buttonCursor:按钮的鼠标图标</li> <li>fileObjName:上传文件的请求参数名称</li> <li>fileTypeExts:上传文件过滤使用的扩展名</li>
<li>fileTypeDesc:上传文件的类型描述</li> <li>auto:选择之后,是否自动开始上传</li>
<li>multi:是否允许上传多个文件</li>
<li>queueSizeLimit:同时选择多个文件的限额</li>
</ul>
</p>
<span id="uploadify"></span>
<img id="upImg" src="" alt="" />
</div>
public ActionResult Upload(HttpPostedFileBase Filedata)
{
// 如果没有上传文件
if (Filedata == null || string.IsNullOrEmpty(Filedata.FileName) || Filedata.ContentLength == )
{
return this.HttpNotFound();
} // 保存到 ~/UserFolder 文件夹中
string filename = DateTime.Now.Ticks.ToString() + System.IO.Path.GetExtension(Filedata.FileName);
string virtualPath = string.Format("~/UserFolder/{0}", filename);
// 文件系统不能使用虚拟路径
string path = Server.MapPath(virtualPath);
Filedata.SaveAs(path); return Content(filename);
}

jquery图片上传的更多相关文章

  1. jquery 图片上传本地预览V1.2

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 代码进行小小的压缩 如果看源码 自己解压就行了 版本已升级  修复jquery版本问题  支持任意jqu ...

  2. Jquery图片上传组件,支持多文件上传

    Jquery图片上传组件,支持多文件上传http://www.jq22.com/jquery-info230jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传.取消. ...

  3. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  4. jQuery图片上传前先在本地预览(不经过后端处理)

    前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得 ...

  5. jQuery图片上传前先在本地预览

    js代码: /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持saf ...

  6. jQuery 图片上传

    1. 概述 1.1 说明 在一些前后端不分离的项目中,经常有一些需要把文件或者图片上传的功能,故记录此代码以便后期使用. 1.2 要求 1.上传,10M以内,限bmp,jpg,png,jpeg等图片格 ...

  7. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

  8. HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...

  9. jquery图片上传前预览剪裁

    http://www.webmotionuk.co.uk/jquery/image_upload_crop.php http://keleyi.com/a/bjad/liuvpkke.htm 不错的d ...

随机推荐

  1. 使用Vagrant machine

    使用Vagrant 查看Vagrant状态 vagrant status SSH vagrant ssh 共享文件 在vagrantfile中添加共享文件配置 Vagrant.configure(2) ...

  2. 你应该知道的8个Java牛人

    简单介绍一下8个Java牛人,他们为Java社区,创建了框架(framework),产品或者是写书,影响甚至改变了Java开发的方法 8.Tomcat创始人 James Duncan Davidson ...

  3. SCOI2013 多项式的运算

    ---恢复内容开始--- 又是一道裸数据结构题. 之前受序列操作的蛋疼写法影响,只用一个tag,不知道怎么记,之后看了下别人的,终于领悟要用两个tag,一个add,一个mul,维护相当简单,想清楚就行 ...

  4. 全文检索luncence

    检索技术基本原理: 最主要的两点是  1.如何创建索引 2.如何查询.  分析需求: 好几篇文档,从这些文档找关键词,一种方式是顺序一个个遍历,加入这些文档量很多,就花费太长时间了,第二种是建立索引, ...

  5. MVC 无法将类型“System.Collections.Generic.List<AnonymousType#1>”隐式转换为“System.Collections.Generic.IList<Mvc3Modeltest.Models.Movie>”。存在一个显式转换(是否缺少强制转换?))

    1.问题: 2.解决方案:强制指定类型. 解决之.

  6. Linux基本配置和管理 2 ---- Linux多命令协作----管道及重定向

    1 管道和重定向 1 在Linux中大多数命令都很简单,很少出现复杂的命令,每个命令只是实现一个简单的功能,我们可以通过组合不同的命令来实现复杂的功能 2 在Linux中几乎所有的命令返回的数据都是纯 ...

  7. mysql在高内存、IO利用率上的几个优化点 (sync+fsync) 猎豹移动技术博客

    http://dev.cmcm.com/archives/107 Posted on 2014年10月16日 by liuding | 7条评论 以下优化都是基于CentOS系统下的一些优化整理,有不 ...

  8. Android 跨应用调用Activity及Service

    如何调用另外一个app应用的activity或者service,本文提供一个验证可行的方法. 调用方法: Intent intent=new Intent("youActionName&qu ...

  9. Java 类的热替换---转载

    构建基于 Java 的在线升级系统 Java ClassLoader 技术剖析 在本文中,我们将不对 Java ClassLoader 的细节进行过于详细的讲解,而是关注于和构建在线升级系统相关的基础 ...

  10. Quartz contention when running in load balanced environment--reference

    1.8.3 appears to have addressed this issue with a single application server. However, we're seeing t ...