Backload jquery file upload

  处理文件上传的服务端组件Backload

用于处理文件上传的服务端组件。Backload与客户端文件上传插件(比如jQuery-File-Upload)配合使用，初步形成一个处理文件异步上传的解决方案。

□ Badkload的一些功能和特点

● 零配置：Backload提供默认BackloadDemoController用来处理上传文件请求。如果其它控制器也想拥有"Backload处理上传文件的超强能力"，只需要继承BackloadDemoController就可以。
● 在web.config中显式配置
● 支持多种存储位置：文件夹、数据库(通过Entity Framework)、云存储(将来支持)
● 根据不同的请求上下文把上传文件保存到不同的位置
● 根据上传文件的不同类型保存到不同的位置
● 支持对图片的裁剪，而参数可以在web.confgig中配置
● 支持对多个图片的处理
● 支持图片类型转换
● 支持生成缩略图
● 支持在服务端创建唯一的文件名(GUIDs)
● 还可以在原始文件和修改文件之间建立映射，并返回给客户端一个友好的名称。
● 良好的可扩展性：通过实现Badkload的接口和使用ExportAttribute特性。
● 安全性：为控制器加上验证和授权
● 可调试：方便断点调试发现错误
...

 

□ 安装客户端jQuery-File-Upload插件和服务端Badkload组件，有2种方式：

1、分别安装客户端和服务端所需的插件和组件

● 安装服务端的Backload:

PM> Install-Package Backload

● 如果客户端选择使用jQuery-File-Upload插件，通过如下来安装这个客户端文件上传插件:

PM> Install-Package JQuery_File_Upload_Plugin

 

2、安装Query-File-Upload结合Backload实现文件上传的Demo,一次性安装客户端和服务端所需的插件和组件：

PM> Install-Package JQueryFileUpload_Demo_with_Backload

 

  例子：零配置实现多文件上传

□ 新建一个MVC4项目，工具--库程序包管理器--程序包管理器控制台，输入：

PM> Install-Package JQueryFileUpload_Demo_with_Backload

 

引用文件夹多了如下文件：

 

App_Start文件夹里多了如下BackloadConfig.cs文件，里面有jQuery File Upload插件所有需要的js和css文件：

 

Content文件夹多了如下文件：

 

Controller文件夹多了一个控制器：

 

Scripts文件夹多了如下文件：

 

Views文件夹多了如下文件夹和文件：

 

□ 运行http://localhost:1631/BackloadDemo/Index，发现如下问题：

1、工具--库程序包管理器--程序包管理器控制台，被禁用

关闭VS，重新打开就恢复。

 

2、报错

未能加载文件或程序集“WebGrease, Version=1.5.1.25624, Culture=neutral, PublicKeyToken=31bf3856ad364e35”或它的某一个依赖项。找到的程序集清单定义与程序集引用不匹配。 (异常来自 HRESULT:0x80131040)

 

通过"uninstall-package -f WebGrease"先卸载，然后通过"install-package WebGrease"再下载最新版本，问题解决。

 

□ 再次运行http://localhost:1631/BackloadDemo/Index

以上，html部分：
● <form id="fileupload" action="/Backload/UploadHandler" method="POST" enctype="multipart/form-data">放置添加、取消、上传等按钮
● <script id="template-upload" type="text/x-tmpl">上传文件列表
● 下载文件列表

 

css部分：
● @Styles.Render("~/Content/themes/base/css")
● @Styles.Render("~/Content/css")
● @Styles.Render("~/bundles/fileupload/bootstrap/BasicPlusUI/css") 使用Backloads的bundeling功能注册jQuery File Upload所需的css

 

js部分：
● @Scripts.Render("~/bundles/jquery")
● @Scripts.Render("~/bundles/jqueryui")
● @Scripts.Render("~/bundles/fileupload/bootstrap/BasicPlusUI/js") 使用Backloads的bundeling功能注册jQuery File Upload所需的js
● script src="~/Scripts/FileUpload/backload.demo.js"></script> 初始化jQuery File Upload

参考资料：
※ http://backload.org/ Backload官网
※ https://github.com/blackcity/Backload#examples Backload例子
※ http://nuget.org/packages/Backload/ nuget上的Backload

※ http://blueimp.github.io/jQuery-File-Upload/ jQuery File Upload官网
※ https://github.com/blueimp/jQuery-File-Upload/wiki  github上的jQuery File Upload介绍
※ https://github.com/blueimp/jQuery-File-Upload  github上的jQuery File Upload源码

※ https://www.nuget.org/packages/JQueryFileUpload_Demo_with_Backload/  下载jQuery File Upload结合Backload的MVC案例

□ 自定义BaseController继承BackloadController

   1:  using System.Web.Mvc;

   2:   

   3:  namespace MvcApplication7.Controllers

   4:  {

   5:      public class BaseController : BackloadController

   6:      {

   7:          //public ActionResult Index()

   8:          //{

   9:          //    return View();

  10:          //}

  11:   

  12:          public async Task<ActionResult> FileHandler()

  13:          {

  14:              ActionResult result = await base.HandleRequestAsync();

  15:              return result;

  16:          }

  17:      }

  18:  }

 

□ 自定义HomeController继承BaseController

   1:  using System.Web.Mvc;

   2:  namespace MvcApplication7.Controllers

   3:  {

   4:      public class HomeController : BaseController

   5:      {

   6:          public ActionResult Index()

   7:          {

   8:              return View();

   9:          }

  10:      }

  11:  }

 

□ 自定义用于初始化jQuery File Upload的js文件main.js

其中，还限制了上传文件的格式。

   1:  $(function () {

   2:      'use strict';

   3:   

   4:      var url = '/Base/FileHandler';

   5:      // Initialize the jQuery File Upload widget:

   6:      $('#fileupload').fileupload({

   7:          // Uncomment the following to send cross-domain cookies:

   8:          //xhrFields: {withCredentials: true},

   9:          url: url,

  10:          acceptFileTypes: /(jpg)|(jpeg)|(png)|(gif)$/i // Allowed file types

  11:      });

  12:   

  13:      // Enable iframe cross-domain access via redirect option:

  14:      $('#fileupload').fileupload(

  15:          'option',

  16:          'redirect',

  17:          window.location.href.replace(

  18:              /\/[^\/]*$/,

  19:              '/cors/result.html?%s'

  20:          )

  21:      );

  22:   

  23:      // Load existing files by an initial ajax request to the server after page loads up

  24:      // This is done by a simple jQuery ajax call, not by the FIle Upload plugin.,

  25:      // but the results are passed to the plugin with the help of the context parameter: 

  26:      // context: $('#fileupload')[0] and the $(this)... call in the done handler. 

  27:      // With ajax.context you can pass a JQuery object to the event handler and use "this".

  28:      $('#fileupload').addClass('fileupload-processing');

  29:      $.ajax({

  30:          // Uncomment the following to send cross-domain cookies:

  31:          //xhrFields: {withCredentials: true},

  32:          url: url,

  33:          dataType: 'json',

  34:          context: $('#fileupload')[0]

  35:      }).always(function () {

  36:          $(this).removeClass('fileupload-processing');

  37:      }).done(function (result) {

  38:          $(this).fileupload('option', 'done')

  39:              .call(this, null, { result: result });

  40:      });

  41:  });

  42:   

  43:  $("document").ready(function () {

  44:      $('#fileupload')

  45:          .bind('fileuploaddestroy', function (e, data) {

  46:              // Event handler example. Do something if you need after file has been deleted on the server. 

  47:              // (Refer to the client side documentatio).

  48:          });

  49:   

  50:  });

  51:   

 

□ _Layout.cshtml布局视图

   1:  <!DOCTYPE html>

   2:  <html>

   3:  <head>

   4:      <meta charset="utf-8" />

   5:      <meta name="viewport" content="width=device-width" />

   6:      <title>@ViewBag.Title</title>

   7:      @Styles.Render("~/Content/css")

   8:      @Styles.Render("~/Content/themes/base/css")

   9:      @Styles.Render("~/bundles/fileupload/bootstrap/BasicPlusUI/css")

  10:      @Scripts.Render("~/bundles/modernizr")

  11:  </head>

  12:  <body>

  13:      @RenderBody()

  14:   

  15:      @Scripts.Render("~/bundles/jquery")

  16:      @Scripts.Render("~/bundles/jqueryui")

  17:      @Scripts.Render("~/bundles/fileupload/bootstrap/BasicPlusUI/js")

  18:      @RenderSection("scripts", required: false)

  19:  </body>

  20:  </html>

  21: