Bootstrap fileinput File Upload Tool

This is the second plugin I uploaded. The first 1th is because of this good-looking bootstrap interface style second is can be dragged (although I do not use this feature but this interface seems to plump a lot) finally had to spit groove This postback event I Baidu a long time to find csdn above also asked I do not know the way Baidu is not correct or any other reason. Okay, I'm stupid.

Address

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

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

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

Before uploading

The effect of the selected picture

After the upload is complete

How to use

Introducing Files

CSS Fileinput.cs

js fileinput.js, Fileinput_locale_zh.js (Chinese packaging)

Code

Html:

Accept for file formats that need to be controlled

1 <  ID= "Imgupload"  type= "File"  class= "File-loading" Accept = "image/*" >

Js:

Language: ' zh ' completed the Chinese default is English, autoreplace allow replacement maxfilecount:1 here to explain what I do is to 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 upload file here is the picture file Previewfileicon is the Set button style bootstrap provides several button colors as well as a large number of icon

. On ("fileuploaded", function (E, data) {...}}) This is where I've been for a long time. First I don't know through fileuploaded receive and then the controller JSON do not know where to take here is the JSON that 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 StylePreviewfileicon: "<i class= ' Glyphicon glyphicon-king ' ></i>"}). On ("Fileuploaded",function(E, data) {varres =Data.response; if(Res.state > 0) {alert (' Upload success ');        alert (Res.path); }        Else{alert (' Upload failed ')        }    })

View Code

Controller:

There's nothing to say here, it's all clear.

[HttpPost] PublicActionResult imgdeal () {uploadimages img=NewUploadImages (); varImage =Request.Files; if(Image! =NULL&& image. Count >0)            {                stringSavepath =".. /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; }            returnJson (IMG); }

View Code

That's OK.

Reprint Please specify address: http://www.cnblogs.com/CoffeeEddy/p/5167666.html

Bootstrap fileinput File Upload Tool