KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #codex #typescript #ai-agents #ai-agent #cli #claude-code #open-source #deepseek-harness #dsh-plugin #python #mcp

jQuery-File-Upload

★ 30,723 Open GitHub ↗

jQuery를 위한 다중 파일 선택, 드래그앤드롭 지원, 진행 바, 유효성 검사, 이미지·오디오·비디오 미리보기 기능을 갖춘 파일 업로드 위젯입니다. 크로스도메인, 청크 단위 및 이어 올리기(resumable) 파일 업로드를 지원합니다. 표준 HTML 폼 파일 업로드를 지원하는 모든 서버 측 플랫폼(Google App Engine, PHP, Python, Ruby on Rails, Java 등)과 함께 동작합니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# jQuery File Upload

## 목차

- [설명](#description)
- [데모](#demo)
- [기능](#features)
- [보안](#security)
- [설정](#setup)
- [요구 사항](#requirements)
  - [필수 요구 사항](#mandatory-requirements)
  - [선택 요구 사항](#optional-requirements)
  - [크로스 도메인 요구 사항](#cross-domain-requirements)
- [브라우저](#browsers)
  - [데스크톱 브라우저](#desktop-browsers)
  - [모바일 브라우저](#mobile-browsers)
  - [확장 브라우저 지원 정보](#extended-browser-support-information)
- [테스트](#testing)
- [지원](#support)
- [라이선스](#license)

## 설명

> jQuery를 위한 다중 파일 선택, 드래그 앤 드롭 지원, 진행률 표시줄, 유효성 검사, 이미지·오디오·비디오 미리보기 기능을 제공하는 파일 업로드 위젯입니다.  
> 크로스 도메인, 청크 기반 및 이어올리기(resumable) 파일 업로드, 클라이언트 측 이미지 크기 조정을 지원합니다.  
> 표준 HTML 폼 파일 업로드를 지원하는 모든 서버 측 플랫폼(PHP, Python, Ruby on Rails, Java, Node.js, Go 등)과 함께 동작합니다.

## 데모

[데모 파일 업로드](https://blueimp.github.io/jQuery-File-Upload/)

## 기능

- **다중 파일 업로드:**  
  한 번에 여러 파일을 선택하고 동시에 업로드할 수 있습니다.
- **드래그 앤 드롭 지원:**  
  데스크톱이나 파일 관리자에서 파일을 드래그하여 브라우저 창에 드롭하는 방식으로 업로드할 수 있습니다.
- **업로드 진행률 표시줄:**  
  개별 파일 및 전체 업로드의 진행 상태를 나타내는 진행률 표시줄을 보여줍니다.
- **업로드 취소:**  
  개별 파일 업로드를 취소하여 업로드 진행을 중단할 수 있습니다.
- **이어올리기 지원:**  
  Blob API를 지원하는 브라우저에서는 중단된 업로드를 이어갈 수 있습니다.
- **청크 기반 업로드:**  
  Blob API를 지원하는 브라우저에서는 대용량 파일을 더 작은 청크로 나누어 업로드할 수 있습니다.
- **클라이언트 측 이미지 크기 조정:**  
  필요한 JS API를 지원하는 브라우저에서 클라이언트 측 이미지를 자동으로 리사이징할 수 있습니다.
- **이미지, 오디오, 비디오 미리보기:**  
  필요한 API를 지원하는 브라우저에서 업로드 전에 이미지, 오디오, 비디오 파일의 미리보기를 표시할 수 있습니다.
- **브라우저 플러그인(예: Adobe Flash) 불필요:**  
  HTML5 및 JavaScript 같은 개방형 표준을 기반으로 구현되어 추가적인 브라우저 플러그인이 필요하지 않습니다.
- **구형 브라우저를 위한 원활한 대체(Fallback):**  
  지원되는 경우 XMLHttpRequest를 통해 파일을 업로드하고, 구형 브라우저에서는 iframe을 대체 수단으로 사용합니다.
- **HTML 파일 업로드 폼 대체:**  
  표준 HTML 파일 업로드 폼을 위젯 요소로 사용하여 점진적 향상(progressive enhancement)을 적용할 수 있습니다.
- **크로스 사이트 파일 업로드:**  
  크로스 사이트 XMLHttpRequest 또는 iframe 리다이렉트를 사용하여 다른 도메인으로 파일을 업로드할 수 있습니다.
- **다중 플러그인 인스턴스:**  
  동일한 웹페이지에서 여러 플러그인 인스턴스를 사용할 수 있습니다.
- **사용자 정의 및 확장 가능:**  
  개별 옵션을 설정하고 다양한 업로드 이벤트에 대한 콜백 메서드를 정의할 수 있는 API를 제공합니다.
- **멀티파트 및 파일 콘텐츠 스트림 업로드:**  
  파일을 표준 "multipart/form-data" 또는 파일 콘텐츠 스트림(HTTP PUT 파일 업로드)으로 업로드할 수 있습니다.
- **모든 서버 측 애플리케이션 플랫폼과 호환:**  
  표준 HTML 폼 파일 업로드를 지원하는 모든 서버 측 플랫폼(PHP, Python, Ruby on Rails, Java, Node.js, Go 등)에서 작동합니다.

## 보안

⚠️ 수정된 취약점 목록을 보려면 [VULNERABILITIES](VULNERABILITIES.md) 문서를 읽어주세요.

파일 업로드를 위해 웹 서버를 안전하게 설정하는 방법에 대한 지침은 [SECURITY](SECURITY.md) 문서도 함께 읽어주세요.

## 설정

jQuery File Upload는 [NPM](https://www.npmjs.com/)을 통해 설치할 수 있습니다:

```sh
npm install blueimp-file-upload
```

이를 통해 `node_modules`를 통해 [jquery.fileupload.js](js/jquery.fileupload.js) 및 그 확장 기능들을 포함할 수 있습니다. 예시:

```html
<script src="node_modules/blueimp-file-upload/js/jquery.fileupload.js"></script>
```

그런 다음 다음과 같이 파일 업로드 폼에서 위젯을 초기화할 수 있습니다:

```js
$('#fileupload').fileupload();
```

자세한 내용은 다음 가이드를 참조하세요:

- [메인 문서 페이지](https://github.com/blueimp/jQuery-File-Upload/wiki)
- [사용 가능한 모든 옵션 목록](https://github.com/blueimp/jQuery-File-Upload/wiki/Options)
- [플러그인 API](https://github.com/blueimp/jQuery-File-Upload/wiki/API)
- [웹사이트에 플러그인 설정하는 방법](https://github.com/blueimp/jQuery-File-Upload/wiki/Setup)
- [기본 플러그인만 사용하는 방법](https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin)

## 요구 사항

### 필수 요구 사항

- [jQuery](https://jquery.com/) v1.7+
- [jQuery UI widget factory](https://api.jqueryui.com/jQuery.widget/) v1.9+
  (포함됨): 기본 파일 업로드 플러그인에 필요하지만, jQuery UI 제품군의 다른 의존성 없이 매우 가볍습니다.
- [jQuery Iframe Transport plugin](https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.iframe-transport.js)
  (포함됨): [XHR 파일 업로드를 지원하지 않는 브라우저](https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support)에 필요합니다.

### 선택 요구 사항

- [JavaScript Templates engine](https://github.com/blueimp/JavaScript-Templates)
  v3+: 선택 및 업로드된 파일을 렌더링하는 데 사용됩니다.
- [JavaScript Load Image library](https://github.com/blueimp/JavaScript-Load-Image)
  v2+: 이미지 미리보기 및 크기 조정 기능에 필요합니다.
- [JavaScript Canvas to Blob polyfill](https://github.com/blueimp/JavaScript-Canvas-to-Blob)
  v3+: 크기 조정 기능에 필요합니다.
- [blueimp Gallery](https://github.com/blueimp/Gallery) v2+: 업로드된 이미지를 라이트박스로 표시하는 데 사용됩니다.
- [Bootstrap](https://getbootstrap.com/) v3+: 데모 디자인에 사용됩니다.
- [Glyphicons](https://glyphicons.com/) Bootstrap에서 사용하는 아이콘 세트입니다.

### 크로스 도메인 요구 사항

[Iframe Transport plugin](https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.iframe-transport.js)을 사용하는 [크로스 도메인 파일 업로드](https://github.com/blueimp/jQuery-File-Upload/wiki/Cross-domain-uploads)는 업로드 결과를 검색하기 위해 원본 서버로 리다이렉트해야 합니다.
[예제 구현체](https://github.com/blueimp/jQuery-File-Upload/blob/master/js/main.js)는 원본 서버를 위한 정적 리다이렉트 페이지로 [result.html](https://github.com/blueimp/jQuery-File-Upload/blob/master/cors/result.html)을 사용합니다.

이 저장소에는 Microsoft Internet Explorer 8 및 9에서 제한된 크로스 도메인 AJAX 요청을 가능하게 하는 [jQuery XDomainRequest Transport plugin](https://github.com/blueimp/jQuery-File-Upload/blob/master/js/cors/jquery.xdr-transport.js)도 포함되어 있습니다(IE 10은 크로스 도메인 XHR 요청을 지원합니다).  
XDomainRequest 객체는 GET 및 POST 요청만 허용하며 파일 업로드는 지원하지 않습니다. 이 기능은 크로스 도메인 데모 파일 업로드 서비스에서 업로드된 파일을 삭제하기 위해 [데모](https://blueimp.github.io/jQuery-File-Upload/)에서 사용됩니다.

## 브라우저

### 데스크톱 브라우저

파일 업로드 플러그인은 최신 브라우저 버전으로 정기적으로 테스트되며 다음 최소 버전을 지원합니다:

- Google Chrome
- Apple Safari 4.0+
- Mozilla Firefox 3.0+
- Opera 11.0+
- Microsoft Internet Explorer 6.0+

### 모바일 브라우저

파일 업로드 플러그인은 다음 모바일 브라우저에서 테스트되었으며 지원합니다:

- iOS 6.0+의 Apple Safari
- iOS 6.0+의 Google Chrome
- Android 4.0+의 Google Chrome
- Android 2.3+의 기본 브라우저
- Opera Mobile 12.0+

### 확장 브라우저 지원 정보

각 브라우저 버전에서 지원하는 기능과 알려진 운영체제/브라우저 버전에 대한 자세한 개요는 [확장 브라우저 지원 정보](https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support)를 참고하세요.

## 테스트

이 프로젝트에는 세 가지 테스트 세트가 포함되어 있습니다:

1. [ESLint](https://eslint.org/)를 사용한 코드 린팅.
2. [Mocha](https://mochajs.org/)를 사용한 단위 테스트.
3. [blueimp/wdio](https://github.com/blueimp/wdio)를 사용한 엔드투엔드(E2E) 테스트.

테스트를 실행하려면 다음 단계를 따르세요:

1. [Docker](https://docs.docker.com/)를 시작합니다.
2. 개발 의존성을 설치합니다:
   ```sh
   npm install
   ```
3. 테스트를 실행합니다:
   ```sh
   npm test
   ```

## 지원

이 프로젝트는 활발히 유지보수되고 있지만, 공식 지원 채널은 없습니다.  
다른 개발자의 도움을 받을 수 있는 질문이 있는 경우 [Stack Overflow](https://stackoverflow.com/questions/tagged/blueimp+jquery+file-upload)에 질문을 게시하고 `blueimp jquery file upload` 태그를 달아주세요.

## 라이선스

[MIT license](https://opensource.org/licenses/MIT)에 따라 배포됩니다.

jQuery-File-Upload

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README