Example of. NET core upload file/bulk upload drag and preview function (bootstrap fileinput upload file)

This article mainly solves the problem of file upload in. NET Core development environment: Ubuntu+vscode. This article introduces you to the very detailed, interested friends to see together

The previous article introduced to you the MVC File upload support batch upload drag and preview file content check function

This article mainly solves the problem of file upload in. NET Core development environment: Ubuntu+vscode

1. Import the required packages: NuGet Install Bootstrap-fileinput

Note: The guide pack here needs to be imported in the terminal "need to execute NuGet commands under the Wwwroot folder" as

If you find that there is no nuget command, you need to install the Nuge Package management tool through Apt-get or Yum to the system, which is not the same thing in NuGet and Vscode.

2 Front Page writing:

Index.cshtml:

@{viewdata["Title"] = "Home page"; Layout = null;} <script src= "~/jquery.1.9.0/content/scripts/jquery-1.9.0.js" ></script><script src= "~/ Bootstrap.3.3.0/content/scripts/bootstrap.js "></script><link rel=" stylesheet "href=" ~/ Bootstrap.3.3.0/content/content/bootstrap.css "rel=" external nofollow "><script type=" Text/javascript "src=" ~ /bootstrap-fileinput.4.3.8/content/scripts/fileinput.js "></script><script type=" Text/javascript "src = "~/bootstrap-fileinput.4.3.8/content/scripts/locales/zh.js" ></script><link rel= "stylesheet" href= "~ /bootstrap-fileinput.4.3.8/content/content/bootstrap-fileinput/css/fileinput.css "rel=" External nofollow ">   <script type= "Text/javascript" > $ (function () {var control = $ ("#txt_file");   var Uploadrul = "/home/uploadfile";     Control.fileinput ({language: ' zh ',//Set Language Uploadurl:uploadrul,//upload address allowedfileextensions: [' PNG '],//received file suffix Showupload:true,//Show bulk upload button Showcaption:false,//whether to display title Browseclass: "Btn btn-primary",//button style dropzoneenabled:true,//whether to show drag area//minimagewidth:50,//Picture of the most Small width//minimageheight:50,//The minimum height of the picture//maximagewidth:1000,//the maximum width of the picture//maximageheight:1000,//the maximum height of the picture//maxfiles ize:0,//Unit is KB, if 0 means no Limit file size//minfilecount:0, maxfilecount:100, enctype: ' Multipart/form-data ', Validateini Tialcount:true, Previewfileicon: "<i class= ' Glyphicon glyphicon-king ' ></i>", Msgfilestoomany: "Select the number of files to upload Amount ({n}) exceeds the maximum allowable value {m}!   ",   });  The event $ ("#txt_file") after the import file upload is complete. On ("fileuploaded", function (event, data, Previewid, index) {}); }); </script></table> <p> <form> <p> <p class= "Modal-header" > 

Basically, there is no difference between ASP. NET MVC, there is only one place to pay special attention, the external script and CSS file reference files need to be placed in the Wwwroot file, not the project root directory.

Preview Map:


3. Main differences, backstage

The code is as follows:

public Jsonresult UploadFile () {uploadresult result = new Uploadresult ();    try {var ofile = request.form.files["Txt_file"];    Stream Sm=ofile.openreadstream ();    Result.filename = Ofile.filename; if (! Directory.Exists (appcontext.basedirectory+ "/image/")) {Directory.CreateDirectory (appcontext.basedirectory+ "/    image/"); } string filename=appcontext.basedirectory+ "/image/" + DateTime.Now.ToString ("Yyyymmddhhmmssss") +guid.newguid ().    ToString () + ". png";    FileStream fs=new FileStream (filename,filemode.create); byte[] Buffer =new byte[sm.    Length]; Sm. Read (Buffer,0,buffer.    Length); Fs. Write (Buffer,0,buffer.    Length); Fs.   Dispose (); } catch (Exception ex) {result.error = ex.   Message;  } return Json (result);   public class Uploadresult {public string FileName {get; set;}  public string Error {get; set;} }
In Netcore, it is no longer possible to get the files passed from the foreground through the Request.Files object, where Request.Form.Files is needed to get the files submitted from the client, and then a uploadresult struct is needed to return the JSON object to the foreground. The error field must be included in this structure to return the wrong data to the foreground, and see the official documentation for details-website address

Attach a final upload to your local image: