Implementation of MVC file upload support batch upload drag and preview file content Check function code example

upload in the site believe that everyone is not unfamiliar, but also a small technical difficulties, especially in the ASP, upload some size restrictions and upload the progress of the control, and user experience, and so on, today to share a file in the ASP. NET MVC mode upload, The same applies to other Web type Bootstrap-fileinput.

It comes from an open source project github.com/kartik-v/bootstrap-fileinput/

Document Address: Plugins.krajee.com/file-input

I read the document one time in an afternoon, and made a small demo based on the instructions of the document, which is surprisingly good, as follows:

File preview can be filtered, from the client to filter some of the inappropriate files, and the interface effect is particularly beautiful

The following is how to use: or directly refer to the code to write

How to use:

1.nuget:install-package Bootstrap-fileinput

2. Language localization {Download fileinput_locale_zh.js} or modify the localized vocabulary in Fileinput

Download address: Github.com/kartik-v/bootstrap-fileinput/tree/master/js/locales "Chinese is zh.js"

Document structure:

3. File size limit: Modify the 3195-line maxfilepreviewsize configuration node in Fileinput.js

maxfilepreviewsize:25600,//MB default is 25M, manually adjust as needed

Example: The foreground-the comments in the code are sufficient to explain the role of each configuration item, and do not repeat it.

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

Using system;using system.collections.generic;using system.linq;using system.web;using System.Web.Mvc;using System.io;using system.xml;using system.xml.schema;namespace uploadtest.controllers{public class HomeController:    Controller {///GET:/home/public actionresult Index () {return View ();      } public Jsonresult UploadFile () {uploadresult result = new Uploadresult ();      var ofile = request.files["Txt_file"];      Result.filename = Ofile.filename;      Stream sm = Ofile.inputstream; Byte[] bt= new BYTE[SM.      Length]; Sm. Read (BT, 0, (int) Sm.      Length);      FileStream fs = new FileStream (appdomain.currentdomain.basedirectory+ofile.filename,filemode.create); Fs. Write (BT, 0, Bt.      Length); Fs.      Close (); Fs.      Dispose (); Sm.      Close (); Sm.      Dispose ();    return Json (result, jsonrequestbehavior.allowget);      public class Uploadresult {public string FileName {get; set;}    public string Error {get; set;} }  }}
 In order to correctly display the error message of the file in the foreground, you need to return a JSON with the error field to the foreground, where the error field is required, otherwise you cannot display the background writeback errors message "This must be stated explicitly in the official documentation"