HTML C # ajax combined with ashx handler for file upload

Source: Internet
Author: User

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

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: info-contact@alibabacloud.com 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.