MVC file Upload-file uploads using Jquery.fileupload and backload components

This article uses the client Jquery-file-upload plug-in and the server-side Badkload component to implement multi-file asynchronous uploads. MVC file Upload related brother article:

Service-side component to process file uploads Backload

A service-side component for processing file uploads. Backload with the client file upload plug-in (such as Jquery-file-upload) in conjunction with the initial formation of a processing file asynchronous upload solution.

Some functions and features of-badkload

0 Configuration: Backload provides default backloaddemocontroller to handle uploading file requests. If the other controller also want to have "backload processing upload files of super power", only need to inherit Backloaddemocontroller can.
Explicitly configured in Web. config
Supports multiple storage locations: folders, databases (via entity Framework), cloud storage (future support)
Save the uploaded file to a different location depending on the request context
Save to a different location depending on the type of upload file
Supports clipping of images, and parameters can be configured in Web.confgig
Supports the processing of multiple images
Support for picture type conversions
Support for generating thumbnails
Support for creating unique file names on the server (GUIDs)
You can also establish a mapping between the original file and the modified file and return a friendly name to the client.
Good scalability: By implementing Badkload interfaces and using Exportattribute features.
Security: Add authentication and authorization to the controller
Debug: Easy breakpoint debugging to find errors
...

-Install client Jquery-file-upload plug-in and server-side badkload components in 2 ways:

1. Install the plug-ins and components required by the client and server respectively

Install the backload on the service side:

Pm> Install-package Backload

If the client chooses to use the Jquery-file-upload plugin, upload the plugin by installing this client file as follows:

Pm> Install-package Jquery_file_upload_plugin

2, install query-file-upload combined with backload to achieve file upload demo, one-time installation of the client and server required plug-ins and components:

Pm> Install-package Jqueryfileupload_demo_with_backload

Example: 0 configuration for multi-file uploads

-Create a new MVC4 project, tools-Library Package Manager-Package Manager console, enter:

Pm> Install-package Jqueryfileupload_demo_with_backload

The References folder has the following file:

App_start folder contains the following BackloadConfig.cs file, which has the jquery file upload plugin all the required JS and CSS files:

The content folder has the following files:

Controller folder has one more control:

The Scripts folder has the following files:

Views folder more folders and files as follows:

-Run Http://localhost:1631/BackloadDemo/Index and find the following issues:

1. Tools--Library Package Manager--Package Manager console, disabled

Turn off vs and reopen to restore.

2. Error

Failed to load file or assembly "Webgrease, version=1.5.1.25624, culture=neutral, publickeytoken=31bf3856ad364e35" or one of its dependencies. The found assembly manifest definition does not match the assembly reference. (Exception from hresult:0x80131040)

With "Uninstall-package-f webgrease" first uninstall, and then through the "Install-package webgrease" and then download the latest version, problem resolution.

-Run Http://localhost:1631/BackloadDemo/Index again

-Added 2 upload files with thumbnail image and List of uploaded files

-click the "Start" button, the "Start" button disappears when the upload is successful, and the "Delete" button appears.

-The Files folder is more in the root directory

The-file folder has not only uploaded images, but also a folder that holds thumbnails _thumbs:

-Tick the list of uploaded files and click "Delete":

The interface is missing one line of records:

The original picture is also deleted under the file folder:

Summarize

The client file upload plugin jquery-file-upload and the server file processing component Backload are installed only through the pm> install-package jqueryfileupload_demo_with_backload. Without any configuration, you can upload multiple files.
Files are uploaded by default to the Files folder under the root directory, which requires "write" permission for this folder.

-backloaddemocontroller is the default controller

   1:  using SYSTEM.WEB.MVC;

   2:  

   3:  namespace Mvcapplication6.controllers

   4:  {

   5:      class Backloaddemocontroller:controller

   6:      {

   7:          //

   8:          //GET:/backupdemo/

   9: Public          actionresult Index ()

  Ten:          {

  One:              return View ();

  :          }

  :      }

  :  }

-backloaddemocontroller is the default upload file view

@{Layout = null;} <! DOCTYPE html>

Above, HTML section:
<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 file List
Download file list

CSS section:
@Styles. Render ("~/content/themes/base/css")
@Styles. Render ("~/content/css")
@Styles. Render ("~/BUNDLES/FILEUPLOAD/BOOTSTRAP/BASICPLUSUI/CSS") register the jquery File with the bundeling function of Backloads CSS required for upload

JS section:
@Scripts. Render ("~/bundles/jquery")
@Scripts. Render ("~/bundles/jqueryui")
@Scripts. Render ("~/bundles/fileupload/bootstrap/basicplusui/js") register the jquery File with the bundeling function of Backloads JS required by the upload
Script src= "~/scripts/fileupload/backload.demo.js" ></script> initializing jquery File Upload

MVC file Upload-file uploads using Jquery.fileupload and backload components