Ajax+ashx Perfect implementation of input file upload files

1. input file style does not meet the requirements

<type= "file"  value= "Browse"/>

IE8: F Irefox: Chrome:   

2. Input File Upload button beautification

Css:

. File{position:relative;Background-color:#b32b1b;Border:1px solid #ddd;width:68px;Height:25px;Display:Inline-block;text-decoration:None;text-indent:0;Line-height:25px;font-size:14px;Color:#fff;margin:0 Auto;cursor:Pointer;text-align:Center;Border:None;Border-radius:3px; }. File Input{position:Absolute;Top:0; Left:-2px;Opacity:0;width:10px;}

Html:

<Div>    <span>Select File:</span><inputID= "Txt_filepath"type= "text"ReadOnly= "ReadOnly"/>    <aclass= "File"><inputID= "Btnfile"name= "Btnfile"type= "File"/>Browse</a>
</Div>

After the beautification:

3, ajax+ashx implement upload function

Introduction File: Jquery-1.11.3.js ajaxfileupload.js

Js:

$(function () {            //Select File$ (". File"). On ("Change", "input[type= ' file ']",function () {                varFilePath = $ ( This). Val (); //set upload file type                if(Filepath.indexof ("xls")! =-1 | | filepath.indexof ("xlsx")! =-1) {                    //Uploading Files$.ajaxfileupload ({URL:' Ashx/filehandler.ashx ', Secureuri:false, Fileelementid:' Btnfile ', DataType:' JSON ', Success:function(data, status) {//get the upload file path$ ("#txt_filePath"). Val (Data.filenewname); Alert ("File upload is successful!" "); }, Error:function(data, status, E) {alert (e);                }                    }); } Else{alert ("Please choose the correct file format!" "); //empty the upload path$ ("#txt_filePath"). Val (""); return false;        }            }); })

Filehandler.ashx

 Public classFilehandler:ihttphandler { Public voidProcessRequest (HttpContext context) {context. Response.ContentType="Text/plain"; stringmsg =string.        Empty; stringError =string.        Empty; stringresult =string.        Empty; stringFilePath =string.        Empty; stringFilenewname =string.        Empty; //This can only be done with <input type= "file"/>, because the server control is a httpinputfile typehttpfilecollection files =context.        Request.Files; if(Files. Count >0)        {            //Set file nameFilenewname = DateTime.Now.ToString ("YYYYMMDDHHMMSSFF") +"_"+ System.IO.Path.GetFileName (files[0].            FileName); //Save Filefiles[0]. SaveAs (context. Server.MapPath ("~/upload/"+filenewname)); Msg="File Upload Successful! "; Result="{msg: '"+ msg +"', Filenewname: '"+ Filenewname +"'}"; }        Else{Error="File upload failed! "; Result="{error: '"+ Error +"'}"; } context.        Response.Write (Result); Context.    Response.End (); }      Public BOOLisreusable {Get {            return false; }    }}

Implement a simple upload function

Ajax+ashx Perfect implementation of input file upload files