http://www.uploadify.com/download/ 에서 jquery.uploadify-v2.1.0.zip 다운
파일 업로드 기능을 구현하는 예제입니다.
| Uplodify.htm |
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>파일업로드: jQuery + Uploadify + ASP.NET</title> <linkhref="uploadify.css"rel="stylesheet"type="text/css"/> <scriptsrc="../../jQuery/jquery-1.3.2-vsdoc2.js"type="text/javascript"></script> <scriptsrc="jquery.uploadify.v2.1.0.js"type="text/javascript"></script> <scriptsrc="swfobject.js"type="text/javascript"></script> <scripttype="text/javascript"> $(document).ready(function() { //Uploadify파일 업로드 컨트롤 : Flash가 설치가 되어있어야함 $('#fileInput').uploadify({ 'uploader':'uploadify.swf', //Uploadify컨트롤 지정 'script':'Uploadify.ashx', //서버측 스크립트, ASP.NET, PHP, JSP // 'cancelImg':'cancel.png', //취소 이미지 'auto':false, //true면 파일선택시 바로 자동으로 업로드됨 'folder': '/Uploads', //업로드할 폴더 : 가상디렉터리 + 업로드폴더 // //업로드 완료시 처리 : // 주요 속성은http://www.uploadify.com/documentation/ 참고 'onComplete':function(event, queueID, fileObj, response,data) { $('#lblFile').append( '<ahref="/WebJquery' + fileObj.filePath + '">'+ fileObj.name + '</a><br>'); } }); //버튼 클릭시 업로드 $('#btn').click(function() { $('#fileInput').uploadifyUpload();}); }); </script> </head> <body> <inputid="fileInput"name="fileInput"type="file"/> <inputtype="button"id="btn"value="업로드" /> <divid="lblFile"></div> </body> </html> |
| Uploadify.ashx |
|
<%@ WebHandler
Language="C#"
Class="Uploadify"
%> using System; using System.Web; public class Uploadify : IHttpHandler {
public void
ProcessRequest(HttpContext context)
{
//Filedata로 넘겨온 파일 값 받기
HttpPostedFile file =
context.Request.Files["Filedata"];
//저장할 폴더
string targetDirectory = System.IO.Path.Combine(
context.Request.PhysicalApplicationPath, context.Request["folder"].Replace("/", ""));
//저장할 폴더 + 파일명
string targetFilePath = System.IO.Path.Combine(
targetDirectory,
file.FileName);
//파일 저장(업로드)
file.SaveAs(targetFilePath);
context.Response.Write("Godffs");
}
public bool
IsReusable {
get { return
false;
}
} } |
| 결과화면 |
[그림88-1] 업로드 구현을 위해 Uploads폴더를 추가 하고 해당 폴더에 대해 공유 폴더에서 모든 권한줌 (쓰기권한)
업로드를 하고 난 다음 세이브를 하기 위해 Upload.ashx파일을 생성(제네릭) = 파일 업로드 경로 지정하기 위함 |
Uploadify.ashx
Uplodify.htm'jQuery | javascript | CSS' 카테고리의 다른 글
| 버튼 클릭시 해당 페이지에서 페이지 뒤로 이동하기 (0) | 2011.07.07 |
|---|---|
| 자바스크립트 팝업창 두개 이상 열기 막기 (0) | 2011.07.05 |
| 87.jQuery - AutoComplete : 텍스트 자동완성 (14.Module ) (0) | 2009.11.19 |
| 86.jQuery - Rotator (14.Module ) (0) | 2009.11.19 |
| 85.jQuery - Carousel (14.Module ) (0) | 2009.11.19 |
Comments