专栏首页阿炬.NETASP.NET MVC 4 中Jquery上传插件Uploadify简单使用-版本:3.2.1

ASP.NET MVC 4 中Jquery上传插件Uploadify简单使用-版本:3.2.1

1.官网下载开发包:http://www.uploadify.com/download/,选择免费的Flash版本:

2.解压后,需要用到以下几个文件:

需要修改uploadify.css中取消上传按钮的背景图片路径:

.uploadify-queue-item .cancel a {
    background: url('../img/uploadify-cancel.png') 0 0 no-repeat;
    float: right;
    height:    16px;
    text-indent: -9999px;
    width: 16px;
}

3.页面添加样式表和脚本库的引用:

<link href="~/Content/uploadify/uploadify.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Content/uploadify/jquery.uploadify.min.js"></script> 

4.页面添加用于生成上传按钮的标签:

<span id="btn_upload"></span>

5.初始化,生成按钮:

 1 $(function () {
 2     $('#btn_upload').uploadify({
 3         uploader: '/article/upload',            // 服务器处理地址
 4         swf: '/Content/uploadify/uploadify.swf',
 5         buttonText: "选择文件",                  //按钮文字
 6         height: 34,                             //按钮高度
 7         width: 82,                              //按钮宽度
 8         fileTypeExts: "*.jpg;*.png;",           //允许的文件类型
 9         fileTypeDesc: "请选择图片文件",           //文件说明   
10         formData: { "imgType": "normal" }, //提交给服务器端的参数
11         onUploadSuccess: function (file, data, response) {   //一个文件上传成功后的响应事件处理
12             var data = $.parseJSON(data);
13             alert(data.imgpath);
14         }
15     });
16 });

6.后台代码:

 1 public ActionResult Upload(HttpPostedFileBase Filedata)
 2 {
 3     // 没有文件上传,直接返回
 4     if (Filedata == null || string.IsNullOrEmpty(Filedata.FileName) || Filedata.ContentLength == 0)
 5     {
 6         return HttpNotFound();
 7     }
 8 
 9     //获取文件完整文件名(包含绝对路径)
10     //文件存放路径格式:/files/upload/{日期}/{md5}.{后缀名}
11     //例如:/files/upload/20130913/43CA215D947F8C1F1DDFCED383C4D706.jpg
12     string fileMD5 = CommonFuncs.GetStreamMD5(Filedata.InputStream);
13     string FileEextension = Path.GetExtension(Filedata.FileName);
14     string uploadDate = DateTime.Now.ToString("yyyyMMdd");
15     
16     string imgType = Request["imgType"];
17     string virtualPath = "/";
18     if (imgType == "normal")
19     {
20         virtualPath = string.Format("~/files/upload/{0}/{1}{2}", uploadDate, fileMD5, FileEextension);
21     }
22     else
23     {
24         virtualPath = string.Format("~/files/upload2/{0}/{1}{2}", uploadDate, fileMD5, FileEextension);
25     }
26     string fullFileName = this.Server.MapPath(virtualPath);
27 
28     //创建文件夹,保存文件
29     string path = Path.GetDirectoryName(fullFileName);
30     Directory.CreateDirectory(path);
31     if (!System.IO.File.Exists(fullFileName))
32     {
33         Filedata.SaveAs(fullFileName);
34     }
35 
36     var data = new { imgtype = imgType, imgpath = virtualPath.Remove(0, 1) };
37     return Json(data, JsonRequestBehavior.AllowGet);
38     }
39 }

7.相关参数说明:

  • uploader: '/article/upload'  请求地址,对应于后台进行处理的Action;
  • formData:{ "imgType":"normal" }  参数可以动态设置,一般在onUploadStart事件中进行处理: 如果参数名与初始化的formData中一样,参数值将覆盖,否则添加。动态设置的方法在开始上传之前执行都是可以的,该试例在两个checkbox(通过bootstrap-switch美化)的状态切换时进行设置: $('#img_mode').on('switch-change', function (e, data) { $("#btn_upload").uploadify("settings", "formData", { "imgMode": (data.value ? "small" : "big") }); }); $('#img_type').on('switch-change', function (e, data) { $("#btn_upload").uploadify("settings", "formData", { "imgType": (data.value ? "normal" : "big") }); });
onUploadStart:function(file){
    $("#btn_upload").uploadify("settings", "formData", { "imgType": "other","imgMode":"big") });
}
  • onUploadSuccess事件处理函数的3个参数:file、data、response
    • file - 包含原始文件的信息;
    • response - 后台返回true或false;
    • data - 后台返回的数据,试例中为Json对象;
  • 其他详细参数,参考官方文档:http://www.uploadify.com/documentation/

8.效果演示:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【要什么自行车】ASP.NET MVC4笔记02:上传文件 uploadify 组件使用

    阿炬
  • FSLIB.NETWORK 简易使用指南

    阿炬
  • JQuery文件上传插件ajaxFileUpload在Asp.net MVC中的使用

    阿炬
  • 【要什么自行车】ASP.NET MVC4笔记02:上传文件 uploadify 组件使用

    阿炬
  • 给WordPress添加页面加载时间、查询查收、百度收录查询

    WordPress如果要在网站底部显示,将代码添加到主题目录下的footer.php

    AlexTao
  • [Leetcode][python]Substring with Concatenation of All Words/与所有单词相关联的字串

    现有一组长度相等的字符串words,要在原字符串中找出正好包含words中所有字符串的子字符串的起始位置。 例子: 输入: s = “barfoothe...

    后端技术漫谈
  • 小程序架构

    小程序上线以来,一向被称为“便携版”的APP,关于两者之间的区别,无外乎小程序相对轻便、开发成本低,下面让我们来看一下小程序的“庐山真面目”!

    只喝牛奶的杀手
  • 实验:Oracle数据泵导出导入之序列问题

    今天同事提出了一个问题: 使用数据泵expdp导出1个schema,有个表主键是触发器自增的id,导入测试库测试时,发现表里的数据比自增序列的值要大。导致插入...

    Alfred Zhao
  • 【OCP最新题库解析(052)--题30】 Where is an expdp operation tracked?

    题目中的tracked的意思是跟踪。在数据泵运行过程中,主表(Master Table简称MT)起到了关键性作用,在MT表中,保存了整个数据泵运行过程中的相关信...

    小麦苗DBA宝典
  • python字符串处理以及字符串格式化

    #判断是否可以转换为整型 a="1,2,3" print(a.isdecimal()) print(a.isdigit()) print("九".isnumer...

    py3study

扫码关注云+社区

领取腾讯云代金券