Worth Learning bootstrap fileinput File Upload Tool _javascript Tips

This is the second plugin that I uploaded, first 1th is because this good-looking, conforms to the Bootstrap interface style, the second is can drag (although I do not use this function but this interface looks plump a lot) finally had to vomit trough this postback incident I Baidu for a long time to find, Csdn above also asked, do not know is the way of their own Baidu is not correct or other reasons. All right

Address

Http://plugins.krajee.com/file-input

Https://github.com/kartik-v/bootstrap-fileinput

Effect chart

Here's a new product for my project, for example, based on the MVC framework, isn't it nice?

Before uploading

The effect of selecting a picture

After the upload is complete

How to use

Introducing Files

CSS Fileinput.cs

JS Fileinput.js, Fileinput_locale_zh.js (Chinese package)

Code

Html:

Accept for file formats that need to be controlled

<input id= "imgupload" type= "file" class= "file-loading" accept= "image/*" >

Js:

Language: ' En ' completes the Chinese default for English, autoreplace allow replacement maxfilecount:1 here is a description of what I do is upload a single if you need to bulk upload can modify these two parameters allowedfileextensions: [" JPG "," png "," GIF "] is to verify the format of your uploaded files here is the picture file Previewfileicon is the Set button style bootstrap offers several button colors as well as a large number of icon

. On ("fileuploaded", function (E, data) {...}}) This is the place where I've been stuck for a long time. First, I don't know what to do with the fileuploaded and then the JSON in controller. I don't know where to take this is the JSON you return in Data.response

$ ("#imgUpload")
 . Fileinput ({
 language: ' en ',
 uploadurl: "/product/imgdeal",
 autoreplace:true,
 maxfilecount:1,
 allowedfileextensions: ["JPG", "png", "GIF"],
 browseclass: "Btn btn-primary",//button style 
 Previewfileicon: "<i class= ' Glyphicon glyphicon-king ' ></i>"
 })
 . On ("fileuploaded", function (E, data) {
 var res = data.response;
 if (Res.state > 0) {
  alert (' upload succeeded ');
  alert (Res.path);
 }
 else {
  alert (' Upload failed '
 }}
 )

Controller:

There is nothing to say here, and the writing is clear.

[HttpPost]
 Public ActionResult imgdeal ()
 {
  uploadimages img = new UploadImages ();
  var image = Request.Files;
  if (image!= null && image. Count > 0)
  {
  string savepath = ' ... /uploads/";
  var _image = image[0];
  String _imageext = System.IO.Path.GetExtension (_image. FileName). ToLower ();
  String _imagename = DateTime.Now.ToString ("YYYYMMDDHHMMSS") + _imageext;
  Save
  _image. SaveAs (Server.MapPath (Savepath + _imagename));

  Img.state = 1;
  Img.name = _imagename;
  Img.path = Savepath + _imagename;
  }
  else
  {
  img.state = 0;
  }

  Return Json (IMG);
 }

That's OK.

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.