GeusGod

• Progress bar 구현
• 이미지 썸네일 구현
• 삭제 기능(미지원)
• 보안을 위해서 업로드 경로 Hidden 처리. (파일링크 404에러 출력됨)

jQuery-File-Upload의 최소옵션 가이드

		$('#fileupload').fileupload({
			dataType: 'json',
			url: 'php/index.php',
			done: function (e, data) {
				$.each(data.result, function (index, file) {
					$('<p/>').text(file.name).appendTo(document.body);
				});
			}
		});
	

AJAX Options

The jQuery File Upload plugin makes use of jQuery.ajax() for the file upload requests.
jQuery File Upload plugin는 파일 업로드 요청에 대하여 jQuery.ajax()를 이용합니다.
This is true even for browsers without support for XHR, thanks to the Iframe Transport plugin.
이는 Iframe Transport plugin 때문에 XHR의 지원없는 브라우져도 마찬가지이다.

• url
  Example: '/path/to/upload/handler.json'
• type
  Example: 'PUT'
• dataType
  Example: 'json'

General Options

The jQuery File Upload plugin makes use of jQuery.ajax() for the file upload requests.
jQuery File Upload plugin는 파일 업로드 요청에 대하여 jQuery.ajax()를 이용합니다.
This is true even for browsers without support for XHR, thanks to the Iframe Transport plugin.
이는 Iframe Transport plugin 때문에 XHR의 지원없는 브라우져도 마찬가지이다.

• namespace
  Example: 'myfileupload'
• dropZone
  Default: $(document)
• fileInput
  Example: $('input:file')
• replaceFileInput
  Default: true
• paramName
  Example: 'attachments[]'
• singleFileUploads
  Default: true
• limitMultiFileUploads
  Example: 3
• sequentialUploads
  Default: false
• limitConcurrentUploads
  Example: 3
• forceIframeTransport
  Default: false
• multipart
  Default: true
• maxChunkSize
  Example: 10000000
• uploadedBytes
  Example: 10000000
• recalculateProgress
  Default: true
• formData

  				function (form) {
  					return form.serializeArray();
  				}
  				[
  					{
  						name: 'a',
  						value: 1
  					},
  					{
  						name: 'b',
  						value: 2
  					}
  				]
  			

Callback Options

All callbacks are of type function and can also be bound as event listeners, using the callback name plus "fileupload" as prefix:
모든 콜백은 type function과 event listeners로 묶을수 있으며, 콜백이름은 "fileupload"의 접두사로 추가되어 사용합니다.

		$('#fileupload')
			.bind('fileuploadadd', function (e, data) {/* ... */})
			.bind('fileuploadsubmit', function (e, data) {/* ... */})
			.bind('fileuploadsend', function (e, data) {/* ... */})
			.bind('fileuploaddone', function (e, data) {/* ... */})
			.bind('fileuploadfail', function (e, data) {/* ... */})
			.bind('fileuploadalways', function (e, data) {/* ... */})
			.bind('fileuploadprogress', function (e, data) {/* ... */})
			.bind('fileuploadprogressall', function (e, data) {/* ... */})
			.bind('fileuploadstart', function (e) {/* ... */})
			.bind('fileuploadstop', function (e) {/* ... */})
			.bind('fileuploadchange', function (e, data) {/* ... */})
			.bind('fileuploadpaste', function (e, data) {/* ... */})
			.bind('fileuploaddrop', function (e, data) {/* ... */})
			.bind('fileuploaddragover', function (e) {/* ... */});
	

• add
  The add callback can be understood as the callback for the file upload request queue.
  add 콜백은 파일업로드 요청 큐에 대한 콜백으로 이해 될 수 있다.
  It is invoked as soon as files are added to the fileupload widget - via file input selection, drag & drop or add API call.
  파일을 파일업로드 위젯에 추가하자 마자(파일을 input에서 선택하자 마자) 호출되며, 드래그&드롭과 API호출에 추가됩니다.
  The data parameter allows to override plugin options as well as define ajax settings.
  데이터 파라미터 뿐만 아니라 ajax 세팅을 정의하는 플러그인 옵션을 재정의할 수 있습니다.
  data.files holds a list of files for the upload request:
  data.files 파일 업로드 요청에 대한 목록을 가지고 있습니다.
  If the singleFileUploads option is enabled (which is the default), the add callback will be called once for each file in the selection for XHR file uploads, with a data.files array length of one, as each file is uploaded individually.
  SingleFileUploads 옵션을(이 기본값을) 사용하는 경우 add 콜백이 호출 되고, 각 파일을 개별적으로 업로드 하는대로 data.files 배열 길이가 한 번에 하나씩 XHR 파일 업로드에 대한 선택 영역에 각 파일을 호출합니다.
  Else the add callback will be called once for each file selection.
  다른 add 콜백은 각 파일의 선택에 대하여 한번씩 호출됩니다.
  The upload starts when the submit method is invoked on the data parameter.
  이 업로드는 submit 방법으로 data parameter가 호출될때 시작합니다.
  data.submit() returns a Promise object and allows to attach additional handlers using jQuery's Deferred callbacks.
  data.submit() Promise object를 반환 합니다 그리고 jQuery's 지연 콜백을 사용하여 additional handlers를 첨부할 수 있습니다.
  기본값)

  				function (e, data) {
  					data.submit();
  				}
  			

  예제)

  				function (e, data) {
  					$.each(data.files, function (index, file) {
  						alert('Added file: ' + file.name);
  					});
  					data.url = '/path/to/upload/handler.json';
  					var jqXHR = data.submit()
  						.success(function (result, textStatus, jqXHR) {/* ... */})
  						.error(function (jqXHR, textStatus, errorThrown) {/* ... */})
  						.complete(function (result, textStatus, jqXHR) {/* ... */});
  				}
  			

• submit
  Callback for the submit event of each file upload.
  각 파일 업로드의 submit 이벤트에 대한 콜백입니다.
  If this callback returns false, the file upload request is not started.
  만약 이 콜백이 실패하면, 파일 업로드 요청이 시작하지 않았다.
  예제)

  				function (e, data) {
  					var input = $('#input');
  					data.formData = {example: input.val()};
  					if (!data.formData.example) {
  					  input.focus();
  					  return false;
  					}
  				}
  			

• send
  Callback for the start of each file upload request.
  If this callback returns false, the file upload request is aborted.
  예제)

  				function (e, data) {
  					if (data.files.length > 10) {
  						return false;
  					}
  				}
  			

• done
  Callback for successful upload requests.
  done는 성공적인 업로드 요청에 대한 콜백입니다.
  This callback is the equivalent to the success callback provided by jQuery ajax() and will also be called if the server returns a JSON response with an error property.
  이 콜백(즉, done은) jQuery ajax()에서 제공하는 성공 콜백과 동등하며, 또한 서버에서 error 속성과 함께 JSON이 응답하여 호출될때와 동등합니다.
  예제)

  				function (e, data) {
  					// data.result
  					// data.textStatus;
  					// data.jqXHR;
  				}
  			

• fail
  Callback for failed (abort or error) upload requests.
  This callback is the equivalent to the error callback provided by jQuery ajax() and will not be called if the server returns a JSON response with an error property, as this counts as successful request due to the successful HTTP response.
  예제)

  				function (e, data) {
  					// data.errorThrown
  					// data.textStatus;
  					// data.jqXHR;
  				}
  			

• always
  Callback for completed (success, abort or error) upload requests.
  This callback is the equivalent to the complete callback provided by jQuery ajax().
  예제)

  				function (e, data) {
  					// data.errorThrown
  					// data.textStatus;
  					// data.jqXHR;
  				}
  			

• progress
  Callback for upload progress events.
  예제)

  				function (e, data) {
  					var progress = parseInt(data.loaded / data.total * 100, 10);
  				}
  			

• progressall
  Callback for global upload progress events.
  예제)

  				function (e, data) {
  					var progress = parseInt(data.loaded / data.total * 100, 10);
  				}
  			

• start
• stop
• change
• paste
• drop
• dragover