Bootstrap Fileinput uploading files

Recently used the file upload function,

To tell the truth: previously encountered once, copy the other people's Code

End!

This time again use, but see others very cool file upload function, heart itch!

All right. A simple way to find controls:

Bootstrap Fileinput

That's nice:

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

Bootstrap-fileinput Online Api:http://plugins.krajee.com/file-input

Bootstrap-fileinput Demo Show: Http://plugins.krajee.com/file-basic-usage-demo

But is it good? I don't know. Use it!

-----------------------------------------------

Misery has begun!

Because it has not been used, so also directly copy other code: (http://blog.csdn.net/doc_wei/article/details/53783790)

Although the writing is very detailed, but still do not understand!

Always prompt:

405 Method Not allowed!

The prompt uses a POST request. Found a solution of n ...

Omit n million word here ...

Finally found that I used the wrong:

function (Ctrlname, uploadurl) {                var control = $ (' # ' + ctrlname);             // Initialize the style of the upload control                 control.fileinput ({                // Set Language                // uploaded address
}

I've always thought of this uploadurl as a file-upload-saved folder.

Because it is a folder, do not accept any post,get

Even if I gave all the predicates to allow

And in fact: This uploadurl is the background processing of the upload file page or the general processing program

For example: A.aspx or Filehandler.ashx

I'm using a. ashx

usingSystem;usingsystem.web;usingSystem.Text; Public classHandlerfile:ihttphandler { Public voidProcessRequest (HttpContext context) {context. Response.ContentType="Application/json"; Httppostedfile UploadFile= Context. request.files[0]; stringFileName =Uploadfile.filename; intFileSize =uploadfile.contentlength; stringFileext =System.IO.Path.GetExtension (fileName).        ToLower (); stringDirectoryPath ="~/upload/"; Uploadfile.saveas (System.Web.HttpContext.Current.Server.MapPath (directorypath)+fileName); Context. Response.Write ("{\ "filename\":"+"\""+filename+"\"}"); }      Public BOOLisreusable {Get {            return false; }    }}

So it's saved!

JS section:

menu={
FileInput:function ()    {        varOfile =NewObject (); //Initialize the Fileinput control (first time initialization)Ofile.init =function(Ctrlname, uploadurl) {varControl = $ (' # ' +ctrlname); //Initialize the style of the upload controlControl.fileinput ({language:' En ',//Set LanguageUploadurl:uploadurl,//Address to uploadShowupload:true,//whether to display the upload buttonShowcaption:true,//whether to show titleBrowseclass: "Btn btn-primary",//button Style' Theme ': ' Explorer ', Maxfilecount:10,//indicates the maximum number of files allowed to upload simultaneouslyEnctype: ' Multipart/form-data ', Validateinitialcount:true, Previewfileicon:"<i class= ' Glyphicon glyphicon-king ' ></i>", Msgfilestoomany:"The number of files selected for upload ({n}) exceeds the maximum allowable value {m}! "            }); //events after the import file upload is complete$ ("#uploadfile"). On ("fileuploaded",function(event, data, Previewid, index) {console.dir (data); Alert (data.files[0].name); //$ ("#div_startimport"). Show ();            }); }        returnofile; }
}

Foreground HTML:

<Bodystyle= "PADDING:16PX;">    <Divclass= "Panel Panel-default">        <Divclass= "Panel-heading">This is a test</Div>        <Divclass= "Panel-body">            <formenctype= "Multipart/form-data"Action=".. /handlerfile.ashx ">                <!--<input id= "kv-explorer" type= "file" multiple> -                <inputtype= "File"name= "UploadFile"ID= "UploadFile"Multiple Class= "File-loading" />                <BR>                <Buttontype= "Submit"class= "Btn btn-primary">Submit</Button>                <Buttontype= "Reset"class= "Btn Btn-default">Reset</Button>            </form>        </Div>    </Div></Body><Scripttype= "Text/javascript">$ (document). Ready (function () {        varOfileinput= NewMenu.fileinput (); Ofileinput.init ("UploadFile", ".. /handlerfile.ashx"); });</Script>

Bootstrap Fileinput uploading files