Bootstrap Fileinput uploading files

Source: Internet
Author: User
Tags httpcontext

Recently used the file upload function,

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


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://

Bootstrap-fileinput Online Api:

Bootstrap-fileinput Demo Show: Http://

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: (

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:

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.