MVC File Upload supports batch upload, drag and drop, and preview file content verification. mvc File Upload

MVC File Upload supports batch upload, drag and drop, and preview file content verification. mvc File Upload

Uploading on a website is a small technical difficulty, especially in asp.net, some upload size restrictions, upload progress control, and user experience, today, we will share a file upload in asp.net mvc mode, which is also applicable to bootstrap-fileinput of other web types.

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

Document address: http://plugins.krajee.com/file-input

I read the document once in the afternoon and made a small demo according to the instructions of the document. The effect is surprisingly good, as shown below:

You can preview and filter files, filter some unsuitable files from the client, and the interface effect is quite beautiful.

You can use the following method:

Usage:

1. nuget: Install-Package bootstrap-fileinput

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

: Https://github.com/kartik-v/bootstrap-fileinput/tree/master/js/locales [Chinese is zh. js]

Document structure:

3. File size limit: Modify the maxFilePreviewSize configuration node of row 3195 in fileinput. js.

MaxFilePreviewSize: 25600, // The default value of 25 MB is 25 MB, which can be adjusted manually as needed.

Example: The comments in the front-end code are enough to explain the functions of each configuration item.

@ {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 file error information on the front-end, you need to return a json file with the error field to the front-end, where the error field is required, otherwise, the error message for background write-back cannot be displayed. (required at this time, as specified in the official document]
The background provides more detailed control and supports multi-threaded upload.