MVC File Upload 04-use the client jQuery-File-Upload plug-in and the server-side Backload component to Implement Asynchronous Multifile Upload

This article uses the client jQuery-File-Upload plug-in and the server-side Badkload component to Implement Asynchronous Multifile Upload. Example of MVC file upload:

 

MVC File Upload 01-asynchronous upload using jquery and client verification type and size
MVC File Upload 02-use HttpPostedFileBase to upload multiple files
MVC File Upload 03-use Request. Files to upload multiple Files

 

The server component used to process file uploads. Backload is used with the client File Upload plug-in (such as jQuery-File-Upload) to initially form a solution for asynchronous File Upload.

● Zero Configuration: Backload provides the default BackloadDemoController to process File Upload requests. If other controllers want to have "super-powerful Backload capabilities for processing uploaded files", they only need to inherit BackloadDemoController.
● Explicit configuration in web. config
● Multiple storage locations are supported: folders, databases (using Entity Framework), and cloud storage (available in the future)
● Save the uploaded file to different locations based on different request contexts
● Save files to different locations based on different types of uploaded files
● Cropping images is supported, and parameters can be configured in web. confgig.
● Supports processing multiple images
● Supports conversion of image types
● Support generating thumbnails
● A unique file name (GUIDs) can be created on the server)
● You can also create a ing between the original file and the modified file and return a friendly name to the client.
● Good scalability: implements the Badkload interface and uses the ExportAttribute feature.
● Security: Add authentication and authorization to the Controller.
● Debuggable: It facilitates breakpoint debugging to discover errors.
...

 

● Install server Backload:

PM> Install-Package Backload

● If the client chooses to use the jQuery-File-Upload plug-in, install the File Upload plug-in on the client as follows:

PM> Install-Package JQuery_File_Upload_Plugin

 

PM> Install-Package JQueryFileUpload_Demo_with_Backload

 

PM> Install-Package JQueryFileUpload_Demo_with_Backload

 

Close VS and restart it.

 

Failed to Load file or assembly "WebGrease, Version = 1.5.1.25624, Culture = neutral, PublicKeyToken = 31bf3856ad364e35" or one of its dependencies. The Assembly list definition found does not match the Assembly reference. (Exception from HRESULT: 0x80131040)

 

Run "uninstall-package-f WebGrease" to uninstall the package, and then download the latest version through "install-package WebGrease". The problem is solved.

 

 

● The Client File Upload plug-in jQuery-File-Upload and Backload are only installed through PM> Install-Package JQueryFileUpload_Demo_with_Backload, without any configuration, you can upload multiple files.
● Files are uploaded to the Files folder under the root directory by default. You need the "write" permission for this folder.

 

   1:  using System.Web.Mvc;

   2:   

   3:  namespace MvcApplication6.Controllers

   4:  {

   5:      public class BackloadDemoController : Controller

   6:      {

   7:          //

   8:          // GET: /BackupDemo/

   9:          public ActionResult Index()

  10:          {

  11:              return View();

  12:          }

  13:      }

  14:  }

 

Expand;} <! DOCTYPE html>  

● <Form id = "fileupload" action = "/Backload/UploadHandler" method = "POST" enctype = "multipart/form-data"> place add, cancel, upload, and other buttons
● <Script id = "template-upload" type = "text/x-tmpl"> upload a file list
● Download the file list

 

● @ Styles. Render ("~ /Content/themes/base/css ")
● @ Styles. Render ("~ /Content/css ")
● @ Styles. Render ("~ /Bundles/fileupload/bootstrap/BasicPlusUI/css ") use the bundeling function of Backloads to register the css required for jQuery File Upload.

 

● @ Scripts. Render ("~ /Bundles/jquery ")
● @ Scripts. Render ("~ /Bundles/jqueryui ")
● @ Scripts. Render ("~ /Bundles/fileupload/bootstrap/BasicPlusUI/js ") use the bundeling function of Backloads to register the js required for jQuery File Upload.
● Script src = "~ /Scripts/FileUpload/backload. demo. js "> </script> initialize jQuery File Upload

※Http://backload.org/Backload Official Website
※Examples of https://github.com/blackcity/Backload#examples Backload
※Backload on http://nuget.org/packages/Backload/ nuget

※Http://blueimp.github.io/jQuery-File-Upload/ jQuery File Upload Official Website
※Jquery File Upload introduction on github of https://github.com/blueimp/jQuery-File-Upload/wiki
※Jquery File Upload source code on github of https://github.com/blueimp/jQuery-File-Upload

※Mvc case of jQuery File Upload combined with Backload downloaded by https://www.nuget.org/packages/JQueryFileUpload_Demo_with_Backload/