c# asp.net mvc4 使用uploadify插件实现上传功能
【1】首先去官网下载插件:http://www.uploadify.com/download/ 。ww我使用的是免费的,基于flash的版本。因为基于H5的版本需付费使用,然后使用该插件也就是做做毕设网站,所以就不讲究了。
【2】接下来在view中引用uploadify的js与css文件,再配置uploadify。注意,这里的路径随着你程序中uploadify文件的位置改变而改变。我是放在与bin文件夹同级的位置
<link rel="stylesheet" href="~/uploadify/uploadify.css" />
<script src="~/uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript">
picpath="";
$(function () {
$( "#uploadify").uploadify({
'swf': '/uploadify/uploadify.swf' , //uploadify.swf文件的相对路径
'cancelImg': '/uploadify/uploadify-cancel.png' , //取消图片的位置
'uploader':'/Account/Upload',//后台处理的相对路径
'buttonText': '上传' ,//按钮显示文字
'height': 15,//显示高度,默认30
'width': 80,//显示宽度,默认120
'fileTypeDesc': 'Image Files',
'fileTypeExts': '*.gif; *.jpg; *.png',//允许上传的文件后缀
'formData': {},//发送给后台的参数
'queueID': 'fileQueue' ,//显示文件队列元素的id,默认false
'auto': false ,//设置选择文件后是否自动上传
'multi': true ,//设置允许多文件上传
'queueSizeLimit':999, //当允许多文件上传时,设置选择文件的个数,默认999
//'onSelect': function (event, queueID, fileObj) { //文件选择完毕后执行
// alert( "haha");
//},
//'onUploadStart': function (file) { //上传开始前的动作
// alert( "你好");
//},
'onUploadSuccess': function (file, data, response) {//上传保存后,处理返回值
var rr = null
rr = eval("(" + data + ")");
//alert(rr.path);
picpath=rr.path;
$("#dishesPic").attr("src",picpath);
}
});
});
</script>
【3】同一view中,添加插件的容器,注意容器的name和id,都要是uploadify。插件会寻找name=“uploadify”的标签
<div>
<input type="file" name="uploadify" id="uploadify" style="width:120px;height:40px; "/>
<p>
<a onclick="$('#uploadify').uploadify('upload')"> 上传</a>
<a onclick="$('#uploadify').uploadify('cancel')"> 取消上传</a>
</p>
<div id="fileQueue">
</div>
</div>
【4】后台Controller中处理代码,ww本人是用该插件上传图片,并返回含有图片另存路径的数据,格式为json
//上传
public JsonResult Upload(HttpPostedFileBase fileData)
{
if (fileData == null || string.IsNullOrEmpty(fileData.FileName) || fileData.ContentLength ==)
{
return Json(new { flag = false, message = "没有需要上传的文件" });
}
string file = Path.GetFileName(fileData.FileName);//获得文件名
string extension = Path.GetExtension(fileData.FileName);//获得文件扩展名
string uploadDate = DateTime.Now.ToString("yyyyMMddHHmmss");
string savedbname="pic\\"+ Path.GetFileNameWithoutExtension(fileData.FileName) + uploadDate + extension; //保存到数据库的文件名
string fullsaveName = System.Web.HttpContext.Current.Request.MapPath("~\\") + savedbname;//完整路径
fileData.SaveAs(fullsaveName);
return Json(new { flag = true, path = savedbname });
}
好了,按照以上四步,就能基本使用uploadify这个插件上传了。
如果,上传文件时,你需要额外传递一些参数,那么你就是可以使用formData这个参数,格式为‘formData’:{“name”:value}。然后在后台Crontroller中,使用Request["name"]来接收。
本人qq:1206645561@qq.com
如需转载,请注明出处
c# asp.net mvc4 使用uploadify插件实现上传功能的更多相关文章
- 在MVC中利用uploadify插件实现上传文件的功能
趁着近段的空闲时间,开发任务不是很重,就一直想把以前在仓促时间里所写的多文件上传功能改一下,在网上找了很多例子,觉得uploadify还可以,就想用它来试试.实现自己想要的功能.根据官网的开发文档,同 ...
- ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法(ajaxfileupload.js第一弹)
在写这篇的时候本来想把标题直接写成报错的提示,如下: “SecurityError:Blocked a frame with origin "http://localhost:55080&q ...
- ASP.NET 使用ajaxupload.js插件出现上传较大文件失败的解决方法
在网上下载了一个ajaxupload.js插件,用于无刷新上传图片使的,然后就按照demo的例子去运行了一下,上传啊什么的都OK,但是正好上传的示例图片有一个比较大的,4M,5M的样子,然后上传就会报 ...
- UEditor在asp.netMVC4中的使用,包括上传功能,粘贴表格不显示边框问题
网页编程中在线编辑器的使用还是很重要的,最近研究了一下百度出的UEditor编辑器,把它结合到刚学的asp.netMVC+EF中,同时实现上传资料(包括图片,视频等)功能,下面就以一个最简单的新闻管理 ...
- asp.net 如何实现大文件断点上传功能?
之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...
- 使用ThinkPHP+Uploadify实现图片上传功能
首先,将下载的Uploadify压缩包解压放到公共文件夹内.实现代码如下: 前台html部分: <script src="/uploadify/jquery.min.js" ...
- Asp.NET MVC4 + Ajax 实现多文件上传
本文转自http://www.cnblogs.com/freeliver54/archive/2013/05/15/3079700.html JS部分测试可以,jQuery部分没有测试先留着 HTML ...
- 在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片
在"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"一文中,使用JSAjaxFileUploader这款插件实现了单文 ...
- ASP.NET MVC4实现TinyMCE 4.0.20自定义上传功能
tinymce 插件不提供免费的本地图片上传功能,所以自己将uploadify这个上传插件整合到tinymce,实现本地上传,还用到了jquery.ui插件,先展示全部的代码 @model TinyM ...
随机推荐
- P5283 [十二省联考2019]异或粽子
考场上想到了没打完,细节思路还是不是很优,我原先的想法是每一次找完后标记那个点,下次再继续找(并不是这个意思,说不清楚)但实际上和平衡树一样加个大小就很好写了 #include<bits/std ...
- ICMP shell
场景 反向shell的场景下使用 原理 ICMP作为获取反向shell的通道 实践 运行 run.sh报错,可能是因为用的Parrot.改一下就可以了 ifconfig | grep 'inet '| ...
- 使用Mermaid画图
流程图的示例 时序图的示例 甘特图的示例 FAQ 很多时候,你想解释自己的想法/代码,但是用语言来表达会很啰嗦,并且读者也不易理解.一般这种情况下,我们都会想使用图解来解释.但是,我们也不会想下载那些 ...
- LNMP安装目录及配置文件位置
LNMP相关软件安装目录 Nginx 目录: /usr/local/nginx/ MySQL 目录 : /usr/local/mysql/MySQL数据库所在目录:/usr/local/mysql/v ...
- HTTP协议详解(四)
接着第三篇继续学习.... 9 Cookie和Session的比较 Cookie和Session都为了用来保存状态信息,都是保存客户端状态的机制,它们都是为了解决HTTP无状态的问题而所做的努力. S ...
- tensorflow--交叉熵
学而不思则罔,思而不学则怠. 最近在看<TensorFlow 实战Google深度学习框架第二版>这本书.从头开始学习深度学习,对于细节方面进行探究.相当于重新拾起来这门”手艺“. 这篇随 ...
- Oracle中的substr()函数 详解及应用
注:本文来源于<Oracle中的substr()函数 详解及应用> 1)substr函数格式 (俗称:字符截取函数) 格式1: substr(string string, int a, ...
- P1250 种树
P1250 种树 题目描述 一条街的一边有几座房子.因为环保原因居民想要在路边种些树.路边的地区被分割成块,并被编号成1..N.每个部分为一个单位尺寸大小并最多可种一棵树.每个居民想在门前种些树并指定 ...
- Django之Orm的各种操作
1.一般操作 ***必知必会13条*** <1> all(): 查询所有结果 <2> filter(**kwargs): 它包含了与所给筛选条件相匹配的对象 models.Cu ...
- 【JavaScript】$.extend使用心得及源码研究
最近写多了js的面向对象编程,用$.extend写继承写得很顺手.但是在使用过程中发现有几个问题. 1.深拷贝 $.extend默认是浅拷贝,这意味着在继承复杂对象时,对象中内嵌的对象无法被拷贝到. ...