Bootstrap picture Upload Control fileinput

Front

1. JS to refer to

<link type="text/css" rel="stylesheet " href= " ~/hcontent/css/fileinput.css " />  //-----------style <script src="~/hcontent/js/fileinput.js" ></script>//Basic JS
<script src="~/hcontent/js/locales/zh.js"></script>//Chinese JS

2.html Code

<Divclass= "Col-sm-10">  <Divclass= "File-loading">     <inputID= "UploadFile"type= "File"Multiple Class= "File"data-overwrite-initial= "false"Data-min-file-count= "2">  </Div></Div>

3.js Code

$ (' #uploadFile '). Fileinput ({language:' En ', //Use Chinese theme:' FA ', Showupload:false, the //upload button does not display Uploadurl:' @Url. Action ("Imagerecive", "Beadhouse") ', //server URL call path allowedfileextensions: [' jpg ', ' png ', ' gif '], //allowed file formats overwriteinitial:false, MaxFileSize:1000, //file maximum size maxfilesnum:3, //maximum number of files slugcallback:function(filename) {returnFilename.replace (' (', ' _ '). Replace ('] ', ' _ '); },        });

Message response processing for JS

$ ("#uploadFile"). On ("fileuploaded",function(event, data, Previewid, index) {varD = data.response;//receive data returned in the background            if(D.code = = 1) {                varBtoobj =Json.parse (D.record); if(btoobj[0]! =NULL) {                    varTest = Window.location.origin +Window.location.pathname; varImgid = btoobj[0];                 }            }            Else{$.alert (d.message); }        });

4.c# Background processing

        
 　　　　 //Picture is saved after receiving
 PublicActionResult imagerecive () {string[] Extname = {". jpg",". gif",". JPEG",". PNG",". pdf" }; var_directory = HttpContext.Server.MapPath ("~/bhimage"); List<string> filenames =Newlist<string>(); Httpfilecollection Upload=System.Web.HttpContext.Current.Request.Files;  for(inti =0; I < upload. Count; i++)            {                if(Upload. Count >3)                {                    returnAjaxfail ("limit the number of uploaded files"); } httppostedfilebase File=Request.files[i]; stringext =path.getextension (file. FileName).                ToLower (); if(!extname.contains (EXT)) {                    returnAjaxfail ("please upload jpg, GIF, JPEG, PNG, PDF format Files");                }; if(file. Inputstream.length >1024000)                {                    returnAjaxfail ("no more than 1M of uploaded files"); }                varNamefix = System.Guid.NewGuid (). ToString () +"_"+ System.DateTime.Now.ToString ("HHMMSS") +path.getextension (file.                FileName); stringfile_name ="/"+Namefix; Filenames.                ADD (Namefix); File. SaveAs (_directory+file_name); }            returnajaxsuccess (filenames.        Count.tostring (), filenames); }

Bootstrap picture Upload Control fileinput