'PP/Upload'에 해당되는 글 2건

  1. 2012.01.06 uploadify
  2. 2012.01.04 실시간 파일 업로드 - uploadify
posted by 방랑군 2012. 1. 6. 23:36
1. Uploadify.htm
<head>
    <title>파일업로드 : jQuery + Uploadify + ASP.NET</title>
    <link href="uploadify.css" rel="stylesheet" type="text/css" />
    
    <script type="text/ecmascript" src="jquery-1.4.2.min.js"></script>
    <script src="jquery.uploadify.v2.1.4.js" type="text/javascript"></script>
    <script src="swfobject.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Uploadify 파일 업로드 컨트롤 : Flash가 설치가 되어있어야 함
            $('#fileInput').uploadify({
                'uploader': 'uploadify.swf', // Uploadify 컨트롤 지정
                'script': 'Uploadify.ashx', // 서버측 스크립트, ASP.NET, ASP, PHP, JSP
                'cancelImg': 'cancel.png', // 취소 이미지
                'auto': false, // true면 파일선택시 바로 자동으로 업로드됨
                'folder': '/Uploads', // 업로드할 폴더 : 가상디렉터리 + 업로드폴더
                // 업로드 완료시 처리 :
                //      주요 속성은 http://www.uploadify.com/documentation/ 참고
                'onComplete': function (event, queueID, fileObj, response, data) {
                    $('#lblFile').append('<a href=/WebJQuery' + fileObj.filePath + '>'
                    + fileObj.name + '</a><br>');
                }
            });
            // 버튼 클릭시 업로드
            $('#btn').click(function () { $('#fileInput').uploadifyUpload(); });
        });
    </script>
</head>
<body>
    <input id="fileInput" name="fileInput" type="file" />
    <input type="button" id="btn" value="업로드" />
    <div id="lblFile"></div>
</body>
</html>

2. 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("RedPlus");
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
 

'PP > Upload' 카테고리의 다른 글

실시간 파일 업로드 - uploadify  (0) 2012.01.04
posted by 방랑군 2012. 1. 4. 02:57
출처 :  http://blog.naver.com/websiteman?Redirect=Log&logNo=40132506449

문제점 :

페이스북처럼 ajax를 이용한 실시간 파일 업로드를 구현하고 싶다.

jQuery Plugin을 이용해서 파일업로드 및 멀티 파일 업로드를 구현해 보자.

 

 

해결방법 :

1. 첨부파일을 다운받아 설치한다.

  - demo2.php (기본데모)

  - demo.php (기본데모 + 멀티파일 업로드)

 

2. 설치하고 접속해 보자.

<demo2.php>

 

<demo.php>

 

3. 파일 업로드를 하게 되면 파일은 uploads 디렉토리에 쌓이는데 설정에 의해 위치를 바꿀 수 있다.

 

4. 소스는 아주 간단하다. 나머지는 Plugin에서 처리한다.

  - 옵션을 추가하거나 변경하여 필요한데로 custmizing해서 사용하면 되겠다.

<script type="text/javascript">
$(document).ready(function() {
  $('#file_upload').uploadify({
    'uploader'  : 'uploadify.swf',
    'script'    : 'uploadify.php',
    'cancelImg' : 'cancel.png',
    'folder'    : 'uploads',
    'auto'      : true
  });
});
</script>

 

논의 :

1. Uploadify라는 Plugin을 활용한다.

  - 홈페이지 : http://www.uploadify.com/

  - jQuery, php, 플래시(swf)를 이용하여 멀티파일 선택 기능 등을 제공하고 있다.

2. 추가적인 설정 사항에 관해서는 documentation 페이지를 참조하자.

  - http://www.uploadify.com/documentation/

  - Options, Methods, Events 등 다양한 설정을 통해 원하는 데로 파일 업로드를 만들수 있다.

 

'PP > Upload' 카테고리의 다른 글

uploadify  (0) 2012.01.06