jquery图片上传
总结两个图片上传的方法:
一:使用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图片上传的更多相关文章
- jquery 图片上传本地预览V1.2
基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 代码进行小小的压缩 如果看源码 自己解压就行了 版本已升级 修复jquery版本问题 支持任意jqu ...
- Jquery图片上传组件,支持多文件上传
Jquery图片上传组件,支持多文件上传http://www.jq22.com/jquery-info230jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传.取消. ...
- Jquery图片上传预览效果
uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...
- jQuery图片上传前先在本地预览(不经过后端处理)
前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得 ...
- jQuery图片上传前先在本地预览
js代码: /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持saf ...
- jQuery 图片上传
1. 概述 1.1 说明 在一些前后端不分离的项目中,经常有一些需要把文件或者图片上传的功能,故记录此代码以便后期使用. 1.2 要求 1.上传,10M以内,限bmp,jpg,png,jpeg等图片格 ...
- 【转】HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...
- HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...
- jquery图片上传前预览剪裁
http://www.webmotionuk.co.uk/jquery/image_upload_crop.php http://keleyi.com/a/bjad/liuvpkke.htm 不错的d ...
随机推荐
- 使用Vagrant machine
使用Vagrant 查看Vagrant状态 vagrant status SSH vagrant ssh 共享文件 在vagrantfile中添加共享文件配置 Vagrant.configure(2) ...
- 你应该知道的8个Java牛人
简单介绍一下8个Java牛人,他们为Java社区,创建了框架(framework),产品或者是写书,影响甚至改变了Java开发的方法 8.Tomcat创始人 James Duncan Davidson ...
- SCOI2013 多项式的运算
---恢复内容开始--- 又是一道裸数据结构题. 之前受序列操作的蛋疼写法影响,只用一个tag,不知道怎么记,之后看了下别人的,终于领悟要用两个tag,一个add,一个mul,维护相当简单,想清楚就行 ...
- 全文检索luncence
检索技术基本原理: 最主要的两点是 1.如何创建索引 2.如何查询. 分析需求: 好几篇文档,从这些文档找关键词,一种方式是顺序一个个遍历,加入这些文档量很多,就花费太长时间了,第二种是建立索引, ...
- MVC 无法将类型“System.Collections.Generic.List<AnonymousType#1>”隐式转换为“System.Collections.Generic.IList<Mvc3Modeltest.Models.Movie>”。存在一个显式转换(是否缺少强制转换?))
1.问题: 2.解决方案:强制指定类型. 解决之.
- Linux基本配置和管理 2 ---- Linux多命令协作----管道及重定向
1 管道和重定向 1 在Linux中大多数命令都很简单,很少出现复杂的命令,每个命令只是实现一个简单的功能,我们可以通过组合不同的命令来实现复杂的功能 2 在Linux中几乎所有的命令返回的数据都是纯 ...
- mysql在高内存、IO利用率上的几个优化点 (sync+fsync) 猎豹移动技术博客
http://dev.cmcm.com/archives/107 Posted on 2014年10月16日 by liuding | 7条评论 以下优化都是基于CentOS系统下的一些优化整理,有不 ...
- Android 跨应用调用Activity及Service
如何调用另外一个app应用的activity或者service,本文提供一个验证可行的方法. 调用方法: Intent intent=new Intent("youActionName&qu ...
- Java 类的热替换---转载
构建基于 Java 的在线升级系统 Java ClassLoader 技术剖析 在本文中,我们将不对 Java ClassLoader 的细节进行过于详细的讲解,而是关注于和构建在线升级系统相关的基础 ...
- 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 ...