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 ==0)
            {
                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:[email protected]

如需转载,请注明出处

原文地址:https://www.cnblogs.com/achigwwblog/p/8955208.html

时间: 2024-10-11 05:16:19

c# asp.net mvc4 使用uploadify插件实现上传功能的相关文章

在MVC中利用uploadify插件实现上传文件的功能

趁着近段的空闲时间,开发任务不是很重,就一直想把以前在仓促时间里所写的多文件上传功能改一下,在网上找了很多例子,觉得uploadify还可以,就想用它来试试.实现自己想要的功能.根据官网的开发文档,同时借鉴别人的经验,经过断断续续的修改(中间一直被安排其它事),把uploadify默认的样式改,同时把共性都封装了一下,最终完工了. 1.在_Layout.cshtml 页面中引入js文件和CSS文件: 1 @*-------上传文件--------*@ 2 <link href="@Url.

ASP.NET 使用ajaxupload.js插件出现上传较大文件失败的解决方法

在网上下载了一个ajaxupload.js插件,用于无刷新上传图片使的,然后就按照demo的例子去运行了一下,上传啊什么的都OK,但是正好上传的示例图片有一个比较大的,4M,5M的样子,然后上传就会报上面的错误. 单纯看我的描述,明显发现就是图片较大的原因,可能很快就会想到web.config的配置问题上,但是当我是当局者的时候,就没有那么灵光了,因为有提示错误,就有去百度一下,结果查到是什么“跨域调函数”的问题,至此,这个问题我探究的方向已经走偏. 虽然问题提示当中没有明显的说出是跟上传图片的

ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法(ajaxfileupload.js第一弹)

在写这篇的时候本来想把标题直接写成报错的提示,如下: “SecurityError:Blocked a frame with origin "http://localhost:55080" from accessing a cross-origin frame.” 但是有点长,会显示不全,就想还是换一下吧,想了一下 “ASP.NET 上传过大图片或文件报错解决办法”, 然后当我写完这个题目之后,我觉得这篇文章好像根本没有写的必要,估计看完题目就会想到关于web.config配置的方面了

UEditor在asp.netMVC4中的使用,包括上传功能

网页编程中在线编辑器的使用还是很重要的,最近研究了一下百度出的UEditor编辑器,把它结合到刚学的asp.netMVC+EF中,同时实现上传资料(包括图片,视频等)功能,下面就以一个最简单的新闻管理为例介绍一下UEditor在MVC4中的使用. 一.下载最新的UEditor版本,下载地址:http://ueditor.baidu.com/website/download.html,如图 二.创建数据库,我使用sqlserver2012,数据库:TestDemo,表:News如下: USE [T

在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片

在"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"一文中,使用JSAjaxFileUploader这款插件实现了单文件上传,在chrome, firefox下运行良好,但在某些版本的IE浏览器(比如IE8,IE9)下却无法正常运行,这可能是因为JSAjaxFileUploader插件在编写时没有考虑到某些低版本IE浏览器导致的.本篇,就在ASP.NET MVC4下实现单个图片上传,具体功能包括: 1.在客户端选择图片,并限

uploadify多文件上传插件

这个插件是兼容IE8及以上版本的,实现了基本功能,底部有下载连接 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>uploadify多文件上传插件使用</title> <meta http-equ

jquery uploadify 多文件上传插件 使用经验

Uploadify 官网:http://www.uploadify.com/ 一.如何使用呢? 官网原文:http://www.uploadify.com/documentation/uploadify/implementing-uploadify/在我理解的基础上,做了一些翻译吧,建议直接看官网原文,因为截止到发布这篇博客为止,官方的版本是v3.2.1使用之前我们来看下使用的最低要求. 要求 jQuery 1.4.x 或更新的版本Flash Player 9.0.24 或更新的版本服务器端实现

不使用ASP.NET中的服务器控件将如何上传文件?

遇到文件的上传时,可能会有大部分的开发者喜欢使用服务器控件,虽然很方便,但是却不能很好的控制,不具灵活性. 现给出例子,使用html标签语言灵活的控制文件的上传. 1.html部分 <input type="file" id="uploadFile" name="uploadFile" style="display: none;"/> <a href="#" id="upload

jquery uploadify在IE上传报406HttpError

前端使用uploadify的flash上传控件,后端使用spring MVC,使用IE上传时报406,用Chrome没有问题. 检查发现IE上传时的请求头中,Accept: text/* 而Chrome的请求头中,Accept: */* 后端返回@ResponseBody MyClass,使用JacksonHttpMessageConverter转换成JSON返回给客户端.最早是使用@ResponseBody String的方式直接给客户返回一个JSON字符串,当时没有出现这个问题. 检查了一下