Uploadify in ASP

Like paging, file uploads are one of the skills standard for web development. The configuration and use of uploadify are described below.

First, the configuration

First download to the Uploadify website and add the appropriate references in your project. The front code is as follows:

1.jquery.js
2.uploadify/jquery.uploadify.js
3.uploadify/uploadify.css

JS Code:

<script type= "Text/javascript" >    $(function () {        $("#uploadify"). Uploadify ({height:30, Width:120, SwF:'/uploadify/uploadify.swf ', uploader:' Uploadhandler.ashx ',            //' folder ': ' UploadedFile ',//not working' Auto ':false,            ' ButtonText ': ' Browse ',            ' Multi ':false,            //' OnInit ': function () {Console.log ("1");},' OnSelect ':function(fileobj) {Console.info ("FileName:" + fileobj.name + "\ r \ n" + "File Size:" + fileobj.size + "\ r \ n" + "Creation Time:" + fileobj.creatio Ndate + "\ r \ n" + "Last modified:" + fileobj.modificationdate + "\ r \ n" + "file type:" +Fileobj.type); },            ' Onuploadcomplete ':function(file) {Console.log (' The file ' + File.name + ' was uploaded. '); },            ' Onuploadsuccess ':function(file, data, response) {//console.log (' The file ' + File.name + ' is successfully uploaded with a response of ' + response + ': ' + data ');                //file.name: file name. jpg                //response:true                //data: Returned by the serverConsole.log ("Return URL is:" +data); $("#imgPriview"). attr (' src ', data);    }        }); });</script>

HTML code:

<DivID=""><imgwidth= "100px;"Height= "100px;"ID= "Imgpriview"src= "Http://images4.c-ctrip.com/target/headphoto/portrait_180_180.jpg"alt="" /></Div><inputtype= "File"name= "Uploadify"ID= "Uploadify" /><P><ahref= "javascript:$" (' #uploadify '). Uploadify (' upload ', ' * '); ">Upload</a>|<ahref= "javascript:$" (' #uploadify '). Uploadify (' Cancel ') ">Cancel Upload</a></P>

After clicking Upload, the data will be submitted to the backstage, to uploadhandler.ashx processing.

Second, backstage

The general handler AHSX handles the data submitted by the foreground, saves the picture to disk, and then returns the URL of the picture to the client for a preview.

 Public voidProcessRequest (HttpContext context) {context. Response.ContentType="Text/plain"; Context. Response.Charset="Utf-8"; Httppostedfile file= Context. request.files["Filedata"]; stringUploadpath = context. Request.mappath ("/uploadedfiles/"); stringFileName =file.    FileName; stringImgurl ="/ http"+ context. Request.Url.Authority +"/uploadedfiles/"+FileName; if(File! =NULL)    {        if(!directory.exists (Uploadpath))        {directory.createdirectory (Uploadpath); } file. SaveAs (Uploadpath+fileName); Context.    Response.Write (Imgurl); }    Else{context. Response.Write ("0"); }}

A simple demo demonstrates how to configure and use uploadify, without regard to security.