. Net core file upload/support for batch upload drag and drop and Preview (bootstrap fileinput uploads files), bootstrapfileinput

. Net core file upload/support for batch upload drag and drop and Preview (bootstrap fileinput uploads files), bootstrapfileinput

The previous article introduced the MVC file upload support for batch upload, drag, and drop, and preview file content verification.

This article mainly solves the problem of file upload in. net core. Development Environment: ubuntu + vscode

1. Import the required package: nuget install bootstrap-fileinput

Note: The import package here needs to be imported on the terminal [you need to execute the nuget command in the wwwroot folder] As shown in

If the nuget command is not found, you need to install the nuge package management tool for the system through apt-get or yum. This nuget and vscode plug-ins are not the same thing.

2 front-end 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 extension
    showUpload: true, // Show bulk upload button
    showCaption: false, // whether to show the title
    browseClass: "btn btn-primary", // Button style
    dropZoneEnabled: true, // whether to show the drag zone
    // minImageWidth: 50, // The minimum width of the picture
    // minImageHeight: 50, // The minimum height of the picture
    // maxImageWidth: 1000, // The maximum width of the picture
    // maxImageHeight: 1000, // The maximum height of the picture
    // maxFileSize: 0, // The unit is kb, if it is 0, the file size is not limited
    // minFileCount: 0,
    maxFileCount: 100,
    enctype: 'multipart / form-data',
    validateInitialCount: true,
    previewFileIcon: "<i class = 'glyphicon glyphicon-king'> </ i>",
    msgFilesTooMany: "The number of files selected for upload ({n}) exceeds the maximum allowed value {m}!",
   });
   // Events after the import file is uploaded
   $ ("# txt_file"). on ("fileuploaded", function (event, data, previewId, index) {
   });
  });
 </ script>
</ table>
 <div>
  <form>
   <div>
    <div class = "modal-header">
     <h4 class = "modal-title" id = "myModalLabel"> Please select the xml file </ h4>
    </ div>
    <div class = "modal-body">
     <input type = "file" name = "txt_file" id = "txt_file" multiple class = "file-loading" />
    </ div>
   </ div>
  </ form>
 </ div>
Basically, there is no difference with asp.net mvc. There is only one place that needs special attention. The external script and css file reference files need to be placed in the wwwroot file, not the root directory of the project.

preview:

3. The main difference, the background

code show as below:

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, you can no longer use the Request.Files object to obtain the files passed from the foreground. Here you need to use Request.Form.Files to obtain the files submitted from the client. Next, you need an uploadResult structure to return the json object structure to the foreground The error field must be included to return error data to the front desk. For details, see the official document-official website address

Attach a final picture successfully uploaded to the local:

The above is the .net core version file upload introduced by Xiaobian to everyone / support batch upload drag and preview function (bootstrap fileinput upload file), I hope to help everyone, if you have any questions, please leave me a message, small The editor will reply everyone in time. Thank you very much for your support to the helper home website!