javascript 파일 작업

파일 작업 지원

• FF >= 3.6
• Safari >= 6.0
• Chrome >= 7.0
• IE : 지원안함
• Opera >= 11.1

if( window.File && window.FileReader && window.FileList ){
	// API 지원
	/* ... */
}

파일 정보 얻기

파일시스템을 자바스크립트로 노훌하는 기능

파일 입력

<input type="file" multiple>

드래그 앤 드롭

드래그 앤 드롭 규격 명세

• FF >= 3.5
• Safari >= 3.2
• Chrome >= 7.0
• IE >= 6.0
• Opera : 지원안함

드래그

<div id="dragme" draggable="true">Drag me</div>

var element = $('#dragme');
element.bind("dragstart", function(event){
	// jQuery 추상화를 사용하지 않는다.
	event = event.originalEvent;

	event.dataTransfer.effectAllowed = "move";
	event.dataTransfer.setData("text/plain", $(this).text() );
	event.dataTransfer.setData("text/hmlt", $(this).html() );
	event.dataTransfer.setDragImage('/images/drag.png", -10, -10 );
});

• 텍스트를 드래그 시에는 만약의 경우를 대비해 기본적으로 드래그하는 데이터에 text/plain 형식을 사용해야 엘리멘트를 드롭한 대상에서 어떤 형식도 지원하지 못하는 사태를 막을 수 있다.
• 링크는 text/plain 과 text/uri-list 두가지 형식을 가져야 한다.

  event.dataTransfer.setData("text/uri-list", "http://bluebreeze.co.kr" );
  event.dataTransfer.setData("text/plain", "http://bluebreeze.co.kr" );
  // 여러 링크는 새로운 행으로 분리한다.
  event.dataTransfer.setData("text/uri-list", "http://bluebreeze.co.kr\nhttp://myreply.kr");
  event.dataTransfer.setDAta("text/text", "http://bluebreeze.co.kr\nhttp://myreply.kr" );

• 선택사항 setDragImage() 함수로 드로그 동작 시 커서에 무엇을 표시할지 설정 가능
  setDragImag()를 사용하지 않으면 드래그 하는 엘리먼트의 장성을 사용한다.
• downloadURL 형실을 설정하면 사용자가 브라우저 밖으로 파일을 드래그 할 수 있도록 허용한다.
  

  //문서화 되지 않은 기능, Chrome만 지원
  $('#preview").bind("dragstart", function(e){
  	e.originalEvent.dataTransfer.setData("DownloadURL", [
  		"application/octet-stream",          // MIME 형식
  		"File.exe",                                         // 파일명
  		"http://example.com/file.png"    // 파일 위치
  	].join(":") );
  });

드롭

드롭이벤트는 드래그/드롭 API가 왜 엉망인지 보여준다.
기본 이벤트 dragover 와 dragenter 이벤트를 모두 취소해야 drop 이벤트가 발생한다.

var element = $('#dropzone");
element.bind("dragenter, function(e){
	// 이벤트 취소
	e.stopPropagation();
	e.preventDefault();
});
element.bind("dragover", function(e){
    // 커서 설정
    e.originalEvent.dataTransfer.dropEffect = "copy";
    // 이벤트 취소
    e.stopPropagation();
    e.preventDefult();
});
element.bind("drop", function(e){
	// 재 전송 취소
 	e.stopPropagation();
	e.preventDefault();

	e = e.originalEvent;
	// 파일 접근
	var files = e.dataTransfer.files;
	for( var i=0; i < files.length; i++)
		alert( "Droppped " + files[i].name );
});

기본 드래그/드롭 취소

파일을 웹페이지로 드래그 하면 브라우저는 그 파일을 탐색한다.
body의 dragover 이벤트를 취소하면 기본 동작 제거로 페이지를 벗어나는 것을 방지할 수 있다.

$("body").bind("dragover", function(e){
	e.stopPropagation();
 	e.preventDefault();
  	return false;
});

복사/붙여넣기

• Safari >= 6.0
• Chrome : 오직 붙여넣기만 지원
• FF : 지원 안함
• IE >= 5.0 (  다른 API )

복사

• FF는 copy 이벤트가 발생하지만 clipboardData 오브젝트에 접근 불가
• Chrome은 clipboardData 접근 할 수 있지만 clipboardData로 전송한 데이터를 모두 무시한다.

붙여넣기

표준없음. xml5 명세 없음.
브라우즈별 복사/붙여넣기를 모두 참고할 것

$("textarea").bind("paste", function(e){
	e.stopPropagation();
	e.preventDefault();
	e = e.originalEvent;

	var cd = e.clipboardData;
	// IE
	if( ! cd ) cd = window.clipboardDAta;
	// FF
	if( ! cd ) return;
	$("#result").text( cd.getData( "text/plain" ) );
	// 사파리는 파일 붙여넣기 지원
	var files = cd.files;
});