Tag: com returns the TTY filename content type of the splay ddd file
Ajax combined with ashx handler for file upload
Ajaxfileupload is a jquery plugin that uploads files asynchronously.
Ajaxfileupload parameter Description: (copy someone else's parameter description)
1, URL upload handler address.
2,fileelementid the ID of the file domain that needs to be uploaded, which is the ID of <input type= "file" >.
3,secureuri whether secure commits are enabled, false by default.
4,datatype the data type returned by the server. Can be a xml,script,json,html. If you do not fill in, jquery will automatically determine.
5,success the processing function that is executed automatically after the commit succeeds, the parameter data is the server return.
6,error the processing function that failed to submit the automatic execution.
7,data custom parameters. This thing is more useful, when the data is related to the uploaded image, this thing will be used.
8, type when you want to submit a custom parameter, this parameter is set to post
HTML code:
1<! DOCTYPE html>2"http://www.w3.org/1999/xhtml">34<meta http-equiv="Content-type"Content="text/html; Charset=utf-8"/>5<title></title>6 7<!--referring to the relevant JS file, please refer to jquery--> first8<script src="Js/jquery-1.11.3.js"></script>9<script src="Js/ajaxfileupload.js"></script>Ten One<style> A . File { - position:relative; -background-color: #b32b1b; the border:1px solid #ddd; - width:68px; - height:25px; -display:inline-Block; +text-Decoration:none; -Text-indent:0; +line-height:25px; Afont-size:14px; at color: #fff; -Margin0Auto; - Cursor:pointer; -text-Align:center; - Border:none; -border-radius:3px; in } - to . File Input { + Position:absolute; -Top0; theLeft:-2px; *Opacity0; $ width:10px;Panax Notoginseng } -</style> the<script> + $ (function () { A //Select File the$(". 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 ({ theUrl:'filehandler.ashx',//Handler Path -Secureuri:false,WuyiFileelementid:'Btnfile', theDataType:'JSON', - success:function (data, status) { Wu //get the upload file path - //$ ("#txt_filePath"). Val (data.filenewname); AboutAlert"File Upload Successful! "); $ }, - error:function (data, status, E) { - //alert (e); -Alert" not"); A } + }); the - $ ////} else { the ////Alert ("Please select the correct file format!") "); the //////Empty upload path the ////$ ("#txt_filePath"). Val (""); the ////return false; - ////} in }); the }) the</script> About the<body style="font-size:25px;"> the the<!--Ajax with ASHX for file uploads-- + -<div> the<span> Select File: </span><input id="Txt_filepath"Type="text" ReadOnly="ReadOnly"/>Bayi<aclass="file"><input id="Btnfile"Name="Btnfile"Type="file"/> Browse </a> the</div> the</body> -ASHX Code:
1<%@ WebHandler language="C #"class="Filehandler"%>2 3 usingSystem;4 usingsystem.web;5 6 Public classFilehandler:ihttphandler {7 8 Public voidProcessRequest (HttpContext context) {9 //context. Response.ContentType = "Text/plain";Ten //context. Response.Write ("Hello World"); One A -Context. Response.ContentType ="Text/plain"; - stringmsg =string. Empty; the 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 type +httpfilecollection files =context. Request.Files; A if(Files. Count >0) at { - //Set file name -Filenewname = DateTime.Now.ToString ("YYYYMMDDHHMMSSFF") +"_"+ System.IO.Path.GetFileName (files[0]. FileName); - //Save File -files[0]. SaveAs (context. Server.MapPath ("~/upload/"+filenewname)); -msg ="File Upload Successful! "; inresult ="{msg: '"+ msg +"', Filenewname: '"+ Filenewname +"'}"; - } to Else + { -Error ="File upload failed! "; theresult ="{error: '"+ Error +"'}"; * } $ context. Response.Write (result);Panax Notoginseng context. Response.End (); - } the + Public BOOLisreusable { A Get { the return false; + } - } $ $}If you want to upload multiple images just add a multiple attribute to input
That
<input id="btnfile" name="btnfile " type= " File" multiple/>
You can upload multiple images
Ajaxfileupload Download:
Link: https://pan.baidu.com/s/1slkfpOp Password: 5s8r
HTML C # ajax combined with ashx handler for file upload
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
