Uploadify在MVC中使用方法案例(上传单张图片)

在View视图中:

<link href="/Scripts/uploadify-v3.2.1/uploadify.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/Scripts/uploadify-v3.2.1/jquery.uploadify.js" type="text/javascript"></script>
<script src="/Scripts/uploadify-v3.2.1/swfobject.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(‘#file_upload‘).uploadify({
            ‘buttonText‘: ‘选择上传文件‘,
            ‘queueID‘: ‘fileQueue‘,//指定上传进度条在哪里显示
            ‘swf‘: ‘@Url.Content("~/Scripts/uploadify-v3.2.1/uploadify.swf?ver=‘+Math.random()+‘")‘,
            ‘uploader‘: ‘/Home/Upload‘,
            ‘removeCompleted‘: true,
            ‘checkExisting‘: true,
            ‘fileTypeDesc‘: ‘上传的文件类型‘,
            ‘fileTypeExts‘: ‘*.jpg;*.png;*.gif‘,
            ‘fileSizeLimit‘: ‘1024kb‘,
            ‘auto‘: false,
            ‘multi‘: false,
            ‘queueSizeLimit‘: 1,                   //一个队列上传文件数限制
            ‘uploadLimit‘: 1,                     //允许上传的最多张数
            ‘height‘: 30,
            ‘width‘: 80,
            ‘onUploadSuccess‘: function (file, data, response) {
                var obj = jQuery.parseJSON(data); //把返回的Json序列转化为obj对象
                if (obj.Success) {
                    $(‘#input‘).val(obj.FilePath);
                    $(‘#upsucc‘).text(‘上传成功!‘);
                }
                else
                    alert(obj.Message);
            }
        });
    });

  

 <tr>
                <th>@Html.LabelFor(model=>model.Url)</th>
                <td>
                 <input type="file" class="file_upload" id="file_upload"/>
                 <div id="fileQueue"></div>
                 <a href="javascript:$(‘#file_upload‘).uploadify(‘upload‘);">上传</a><span id="upsucc" style="color:red"></span>
                  @Html.TextBoxFor(m => m.Url, new { id="input",@style="display:none"})
                </>
               </tr>

Controller中

 [HttpPost]
        public JsonResult Upload(HttpPostedFileBase fileData)
        {
            if (fileData != null)
            {
                try
                {
                    // 文件上传后的保存路径
                    string filePath = Server.MapPath("~/Uploads/");
                    if (!Directory.Exists(filePath))
                    {
                        Directory.CreateDirectory(filePath);
                    }
                    string fileName = Path.GetFileName(fileData.FileName);// 原始文件名称
                    string fileExtension = Path.GetExtension(fileName); // 文件扩展名
                    string saveName = Guid.NewGuid().ToString() + fileExtension; // 保存文件名称
                    int filesize = fileData.ContentLength / 1024;
                    if (filesize > 1024 || filesize <= 2 || (fileExtension != ".jpg" && fileExtension != ".png" && fileExtension != ".gif"))
                    {
                        return Json(new { Success = false, Message = "上传失败!\r请上传jpg/png格式图片,文件大小不要超过1MB" }, JsonRequestBehavior.AllowGet);

                    }
                    else
                    {
                        fileData.SaveAs(filePath + saveName);
                        return Json(new { Success = true, FilePath = "/Uploads/" + saveName });
                    }

                }
                catch (Exception ex)
                {
                    return Json(new { Success = false, Message = ex.Message }, JsonRequestBehavior.AllowGet);
                }
            }
            else
            {
                return Json(new { Success = false, Message = "请选择要上传的文件!" }, JsonRequestBehavior.AllowGet);
            }
        }

在后台应用中会遇到HTTP 302的错误  这是因为应用插件的过程中 没有了session  所以public JsonResult Upload(HttpPostedFileBase fileData) 最好放到一个没有访问权限的Controller中!

Uploadify在MVC中使用方法案例(上传单张图片)

时间: 2024-11-09 09:41:33

Uploadify在MVC中使用方法案例(上传单张图片)的相关文章

Uploadify在MVC中使用方法案例(一个视图多次上传单张图片)

Controller 中代码和 上一节文章(http://www.cnblogs.com/yechangzhong-826217795/p/3785842.html )一样 视图中代码如下: <script type="text/javascript"> $(function () { $(".uploadpic").each(function (i) { $('#uploadify' + i).uploadify({ 'buttonText': '上传

PHP 上传单张图片  纯 前端界面预览

上传单张图片 预览 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv=&qu

Alamofire +ObjectMapper模型: 上传单张图片,上传多张图片。

import Foundation import Alamofire //上传图片 ,multipartFormData 上传.key = attach extension HttpManager { /** 上传单张图片 - parameter image:   UIImage - parameter success: 成功回调图片 model - parameter failure: 失败 */ class func uploadSingleImage( _ image:UIImage, s

Spring MVC中 controller方法返回值

1.返回ModelAndView 定义ModelAndView对象并返回,对象中可添加model数据.指定view 2.返回String 1.表示返回逻辑视图名 model对象通过 model.addAttribute("xxx",model)进行设定 2.redirect重定向: redirect重定向特点:浏览器地址栏中的url会变化.修改提交的request数据无法传到重定向的地址.因为重定向后重新进行request(request无法共享) 3.forward页面转发: 通过f

mvc中file无刷新上传文件

前言 上传文件应该是很常见必不可少的一个操作,网上也有很多提供的上传控件.今天遇到一个问题:input控件file无法进行异步无刷新上传.真真的感到别扭.所以就尝试这去处理了一下. 上传封装类: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.IO; using System.Web; n

MVC 中使用kindEditor 图片上传在IE 上进行上传出现的问题

在IE 上使用KindEditor 进行单张图片上传的时候会出现一个下载安全警告,这样将会造成图片上传失败,出现的错误页面: 将会出现这样的一个警告信息. 解决方案,: 是将上传的UpdataloadDetailsImg 方法的返回值 修改为 void 错误代码: public ActionResult UpdateloadDetailsImg() { string imageRemotePath = this.UploadImg(); if (!string.IsNullOrWhiteSpac

.net MVC中Jquery实现AJAX详解

声明 这是我一边学,一边写的: 好处是:我从新手的角度出发,谈自己的理解,每一步的操作也都是按照新手入门来做,有截图. 坏处是:部分地方可能说的不到位或错误.不过作为新手,我觉得能先帮你理解着实现功能貌似更重要. 开始: 0 前言: Ajax本质是一个web数据请求的手段,既然是请求,也就是有请,有求.也就是客户端(html页面)向服务器发送请求获得数据的手段. 世间万物万变不离其宗,抓住事物本质就能让我们拨云见日: 一.在服务器端写好方法 二.在客户端写好请求 当然在这之前我们还需要有个web

绑定服务调用远程服务中的方法

在Andorid平台中,各个组件运行在自己的进程中,他们之间是不能相互访问的,但是在程序之间是不可避免的要传递一些对象,在进程之间相互通信.为了实现进程之间的相互通信,Andorid采用了一种轻量级的实现方式RPC(Remote Procedure Call 远程进程调用)来完成进程之间的通信,并且Android通过接口定义语言(Andorid Interface Definition Language ,AIDL)来生成两个进程之间相互访问的代码,例如,你在Activity里的代码需要访问Se

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

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