ASP.NET MVC下使用文件上传

这里我通过使用uploadify组件来实现异步无刷新多文件上传功能。

1、首先下载组件包uploadify,我这里使用的版本是3.1

2、下载后解压,将组件包拷贝到MVC项目中

 技术分享

3、  根目录下添加新文件夹Uploads,然后新建控制器UploadifyController.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Shop.Controllers
{
    public class UploadifyController : Controller
    {
        //
        // GET: /Uploadify/

        public ActionResult Index()
        {
            return View();
        }

        [AcceptVerbs(HttpVerbs.Post)]
        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; // 保存文件名称

                    fileData.SaveAs(filePath + saveName);

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

4、  添加Index视图

@{
    ViewBag.Title = "Index";
    Layout = null;
}
<link href="~/Content/uploadify/uploadify.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Content/uploadify/jquery.uploadify-3.1.min.js"></script>
<script type="text/javascript">
        $(function () {
            $("#file_upload").uploadify({
                //指定swf文件
                swf: @Url.Content("~/Content/uploadify/uploadify.swf"),
                //后台处理的页面
                uploader: /Uploadify/Upload,
                //按钮显示的文字
                buttonText: 上传图片,
                //显示的高度和宽度,默认 height 30;width 120
                //‘height‘: 15,
                //‘width‘: 80,
                //上传文件的类型  默认为所有文件    ‘All Files‘  ;  ‘*.*‘
                //在浏览窗口底部的文件类型下拉菜单中显示的文本
                fileTypeDesc: Image Files,
                //允许上传的文件后缀
                fileTypeExts: *.gif; *.jpg; *.png,
                //发送给后台的其他参数通过formData指定
                //‘formData‘: { ‘someKey‘: ‘someValue‘, ‘someOtherKey‘: 1 },
                //上传文件页面中,你想要用来作为文件队列的元素的id, 默认为false  自动生成,  不带#
                //‘queueID‘: ‘fileQueue‘,
                //选择文件后自动上传
                auto: false,
                //设置为true将允许多文件上传
                multi: true
            });
        });  
    </script>
  <div>
       @*用来作为文件队列区域*@
        <div id="fileQueue">
        </div>
         <input type="file" id="file_upload" name="file_upload" />
        <p>
            <a href="javascript:$(‘#file_upload‘).uploadify(‘upload‘)">上传</a>| 
            <a href="javascript:$(‘#file_upload‘).uploadify(‘cancel‘)">取消上传</a>
        </p>
    </div>

5、  启动程序查看效果

 技术分享

Uploadify常用属性设置

auto:是否选择文件后自动上传,默认为true。

buttonText:设置上传按钮显示文字。

buttonImage:设置上传按钮背景图片。

multi:是否允许一次选择多个文件一起上传,默认为true。

fileTypeDesc:设置允许上传图片格式描述;

fileTypeExts:设置允许上传图片格式。

removeCompleted:设置已完成上传的文件是否从队列中移除,默认为true。

queueSizeLimit:设置上传队列中同时允许的上传文件数量,默认为999。

uploadLimit:设置允许上传的文件数量,默认为999。

Uploadify常用事件设置

onUploadComplete:单个文件上传完成时触发事件。

$(function() {
    $("#file_upload").uploadify({
         ‘swf‘: ‘@Url.Content("~/Content/uploadify/uploadify.swf")‘, //指定swf文件
         ‘uploader‘: ‘/Uploadify/Upload‘,//后台处理的页面
‘onUploadComplete‘ : function(file) { alert(‘The file ‘ + file.name + ‘ finished processing.‘); } }); });

onQueueComplete:队列中全部文件上传完成时触发事件。

$(function() {
    $("#file_upload").uploadify({
        ‘swf‘      : ‘@Url.Content("~/Content/uploadify/uploadify.swf")‘,
        ‘uploader‘ : ‘uploader‘: ‘/Uploadify/Upload‘,
        ‘onQueueComplete‘ : function(queueData) {
            alert(queueData.uploadsSuccessful + ‘ files were successfully uploaded.‘);
        }
    });
}); 

onUploadSuccess:单个文件上传成功后触发事件。

$(function () {
        $(‘#file_upload‘).uploadify({
            ‘buttonImage‘: ‘@Url.Content("~/Content/uploadify/browse-btn.png")‘,
            ‘swf‘: ‘@Url.Content("~/Content/uploadify/uploadify.swf")‘, //指定swf文件
            ‘uploader‘: ‘/Uploadify/Upload‘,//后台处理的页面
            ‘onUploadSuccess‘: function (file, data, response) {
                eval("data=" + data);
                alert(‘文件 ‘ + file.name + ‘ 已经上传成功,并返回 ‘ + response + ‘ 保存文件名称为 ‘ + data.SaveName);
            }
        });
});

设置上传图片大小

 ASP.NET MVC默认情况下,允许上传的文件大小最大为4MB。因此在默认情况下,Uploadify也只能最大上传4MB大小的文件,超过范围则会IO报错提示无法上传。

修改Web.config设置允许上传的最大文件大小:

<system.web>
  <!--设置最大允许上传文件大小1G-->
  <httpRuntime maxRequestLength= "102400" executionTimeout= "60" />
</system.web>

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。