Jquery+ajaxfileupload Uploading Files

1. Description

Ajaxfileupload.js is a jquery plugin for uploading files via Ajax.

: Http://files.cnblogs.com/files/lengzhan/ajaxfileupload.zip

2. How to use

First Quote JS script

    <script src= "Scripts/jquery/jquery-1.9.1.js" type= "Text/javascript" ></script>    <script src= " Scripts/ajaxfileupload.js "type=" Text/javascript "></script>

 <script type= "Text/javascript" > $ (Function () {$ ("#btn        Upload "). On (' click ', Doupload);            }) function Doupload () {var image = $ ("#txtPath"). Val (); if ($.trim (image) = = "") {alert ("Please select File!                ");            Return                 } $.ajaxfileupload ({url: ' handler/fileuploadhandler.ashx?type=attachment ',                Secureuri:false, Fileelementid: $ ("#fleFile"). attr ("id"), DataType: ' JSON ',                        Success:function (data, status) {if (Data.url = = = "") { Alert ("Upload failed!                    "); } else {alert ("Upload succeeded!                    "); }}, Error:function (result) {alert ("Upload failed!                ");        }            }); } </script> 

Then the HTML code

    <div id= "Imagemaintain" >        <input type= "hidden" name= "Hidimgurl" id= "Hidimgurl" value= ""/>        < Div id= "Uploadarea" >            <input id= "Txtpath" type= "text" disabled= "disabled"/>            <input id= "Flefile" Type= "File" Name= "Flefile" onchange= "document.getElementById (' Txtpath '). Value = This.value;return false;"/>            <input id= "Btnselect" type= "button" value= "select" class= "button" style= "width:60px;"/>            <input id= " Btnupload "type=" button "value=" Upload "class=" button "style=" width:60px;/>        </div>    </div>

And finally the general handler.

<%@ WebHandler language= "C #" class= "Fileuploadhandler"%>using system;using system.web;using System.IO;public Class Fileuploadhandler:ihttphandler {public void ProcessRequest (HttpContext context) {context.        Response.ContentType = "Text/plain"; String strmessage = String.        Empty; String strURL = String.        Empty;        String strflodername = "Upload"; String Strnewfilepath = String.        Empty; String strFileName = Path.getfilename (context. Request.files[0].        FileName); String stroldfilename = Path.getfilename (context. Request.files[0].         FileName); int intfilesize = context. Request.files[0].        ContentLength;        String data = ""; if (context. Request.Files.Count > 0 && strFileName! = "") {string strext = path.getextension (context. Request.files[0].            FileName); Strext = Strext.trimstart ('. ').            ToLower ();    Strflodername = Strflodername + "/" + "file/" + DateTime.Now.ToString ("YyyyMMdd");        String path = HttpContext.Current.Server.MapPath ("..            /"+ strflodername); try {strFileName = Guid.NewGuid ().                ToString () + ("." + Strext); if (!                Directory.Exists (Path)) {directory.createdirectory (path);                } Strnewfilepath = Path.Combine (Path, strFileName); Context. Request.files[0].            SaveAs (Strnewfilepath);                } catch (Exception ex) {strmessage = "save Failed"; strURL = string.            Empty;        }} strmessage = "";        strURL = Strflodername + "/" + strFileName;        data = "{\" strurl\ ": \" "+ strURL +" \ ", \" strmessage\ ": \" "+ strmessage +" \ "}"; Context.        Response.Write (data); Context.    Response.End ();        } public bool IsReusable {get {return false; }    }}

3, image upload

This will upload the demo to the blog Park: Http://files.cnblogs.com/files/lengzhan/UploadAjaxFile.zip

Jquery+ajaxfileupload Uploading Files