Jquery.form Uploading Files

This year most of them are in the perfect product, these days encountered a problem, the original Flash components do not support the Apple browser, need to change. Search on the Internet, see a Jquery.form plugin can upload files, and compatibility is very good, most of the main browsers are compatible, plug-in official website: http://malsup.com/jquery/form/. There is also the need for jquery class library.

Result Picture:

Front-End Code:

<! DOCTYPE html>　　　　<!--note here: The file tag must have the Name property, and because the name attribute is not added, the files are not uploaded to the service to the <input type= "file" id= "filename" name= "filename" /> </div> <ul id= "Filelsit" > </ul> <!--Introducing jquery class Library--<script type= "Text/javas Cript "src=" Jquery/jquery.min.js "></script> <!--Introducing Jquery.form plugins--<script type=" Text/javascript             "Src=" Jquery-form/jquery.form.js "></script> <script type=" Text/javascript "> JQuery (function () { var option = {type: ' Post ', DataType: ' json ',//Data format JSO n Resetform:true, beforesubmit:showrequest,//pre-commit event Uploadprogr ess:uploadprogress,//is committing the time success:showresponse//upload completed event} jQuery (' #fileN Ame '). Wrap (' <form method= "post" action= "/uploads/upload.ashx?option=upload" id= "MyForm2" enctype= "mult Ipart/form-data "></fOrm> ');            JQuery (' #fileName '). Change (function () {$ (' #myForm2 '). Ajaxsubmit (option);        });        }); Delete file var deletefile = function (path, GUID) {Jquery.getjson ('/uploads/upload.ashx?option=delete ', {p Ath:path}, Function (Reslut) {if (reslut[0].success) {///delete successful jQuery (' # ' + GUID). Remov                E ();                } else {//delete failed alert (reslut[0].info);        }            }); }//upload var uploadprogress = function (event, position, total, PercentComplete) {jQuery ('. BTN s        Pan '). Text (' upload ... ');            }//Start submitting function Showrequest (FormData, Jqform, Options) {JQuery ('. btn span '). Text (' Start uploading: ');        var queryString = $.param (FormData); }//upload complete var showresponse = function (ResponseText, statustext, XHR, $form) {if (responsetext[0] . Success) {
After the successful return file address, file name and other information splicing into the HTML. var str = ' <li id= ' ' + responsetext[0].guid + ' "><a href=" ' + Responsetext[0].path + ' "> ' + responsetext[0].fi Lename + ' </a><span onclick= ' DeleteFile (\ ' + Responsetext[0].path + ' \ ', \ ' + responsetext[0].guid + ') ' >                Delete </span></li> ';            JQuery (' #fileLsit '). Append (str);            } jQuery ('. btn span '). Text (' upload complete ');        JQuery ('. btn span '). Text (' Add attachment '); } </script></body>
Background code: Relatively simple, not to do strict processing
1 usingSystem;2 usingSystem.Collections.Generic;3 usingSystem.IO;4 usingSystem.Linq;5 usingsystem.web;6 7 namespacedemo.uploads8 {9     /// <summary>Ten     ///Summary description of upload One     /// </summary> A      Public classUpload:ihttphandler -     { -In particular: In the return of their own stitching JSON format data, must be strict, out of bool, numeric type can be unquoted, the other must be quoted. Otherwise in the higher version of the Jquery.js class library is not going to go success event. the          Public voidProcessRequest (HttpContext context) -         { -Context. Response.ContentType ="Text/plain"; -  +             //type of flag action file -             stringOption = Context. request["option"]; +             Switch(option) A             {  at                  Case "Upload": - UploadFile (context); -                      Break; -                  Case "Delete": - DeleteFile (context); -                      Break; in             } -  to  +  -         } the         /// <summary> *         ///ways to delete files $         /// </summary>Panax Notoginseng         /// <param name= "context" ></param> -         Private voidDeleteFile (HttpContext context) the         { +             stringPath = context. request["Path"]; A             Try the             { + File.delete (context. Server.MapPath (path)); -Context. Response.Write ("[{\ "success\": true}]"); $  $             } -             Catch(Exception e) -             { theContext. Response.Write ("[{\ "success\": False},\ "info\": \ ""+ e.tostring () +"\"]"); - Wuyi             } the             finally  -             { Wu context. Response.End (); -             } About         } $         /// <summary> -         ///Upload File Method -         /// </summary> -         /// <param name= "context" ></param> A         Private voidUploadFile (HttpContext context) +         { the             Try -             { $Httppostedfile file = context. request.files[0]; the                 stringFileName =file. FileName; the                 stringPath ="/fileuploads/"+FileName; the file. SaveAs (context. Server.MapPath (path)); the                 //here, when returning information, give a GUID, because it is convenient to delete.  -                 stringstr ="[{\ "success\": True,\ "filename\": \ ""+ FileName +"\ ", \" path\ ": \""+ Path +"\ ", \" guid\ ": \""+ Guid.NewGuid (). ToString () +"\"}]"; in context. Response.Write (str); the context. Response.End (); the  About             } the             Catch(HttpException e) the             { theContext. Response.Write ("[{\ "success\": False,\ "info\": \ ""+ e.tostring () +"\"}]"); + context. Response.End (); -             } the         }Bayi          Public BOOLisreusable the         { the             Get -             { -                 return false; the             } the         } the     } the}
Jquery.form Uploading Files