Skip to content

Fileupload(swfupload, html5, jquery-fileupload)

2013/03/29

IE 10과 win8 이 나오면서 flash player 로 된 swfupload 나

activeX upload 에 대한 대안으로 html5 fileupload 방법을 찾게되었고

추가적으로 jQuery-File-Upload 를 찾게 되었다.

HTML5 를 이용한 파일 업로드의 경우 아래 블로그에 아주 자세히 나와있다.

html5-file-upload-with-progress

위 블로그에서 설명한 기능은

html5 progress event 를 이용한 % 숫자로 진행상태 보여주기

XMLHttpRequest 를 이용한 업로드

FormData 를 이용한 fileSize, fileType 출력 이다.

영어로 되어 있지만 소스 코드만 붙여넣기 하더라도 동작할 정도의 소스기 때문에 이해하는데는 어렵지 않다.

fileUpload 받는 서버의 경우는 기존 포스트에 node-fileupload 소스를 간단히 수정해서 쓸수도 있고

xamp 설치후 php로 간단히 파일을 받는 서버를 구현할수도 있다. (file-upload.post-method)

추가적으로 이 포스트에서는 다음과 같은 기능을 구현 및 변경했다.

1. 파일 선택 버튼은 이미지로 변경

2. 파일 선택시 목록에 들어가고 submit 버튼을 이용해 파일리스트를 전송

3. 총 파일 크기 제한

위 기능은 swfupload에서 기본?으로 제공하는 기능으로

</pre>
$(document).ready(function() {

var swfu = new SWFUpload({
'flash_url' : '/resource/swf/swfupload.swf'
, 'file_post_name' : 'uploadedFile'
//, 'post_params' : {'name': 't.png'}
, 'upload_url' : '/upload/exec'
, 'file_types' : '*.*'
, 'file_types_description' : 'allFile'
, 'file_size_limit' : maxFileSize
, 'file_queue_error_handler' : uploadHandleErrors
, 'upload_error_handler' : uploadHandleErrors
, 'file_queued_handler' : uploadQueued
, 'upload_success_handler' : uploadComplete
, 'button_placeholder_id' : 'fileToUpload'
, 'button_image_url' : '/resource/img/browse_bg.gif'
, 'button_text' : '<a href="#" onclick="return false;">' + '파일찾기' + '</a>'
, 'button_text_style' : ' a { fontFamily:gulim,arial; } '
, 'button_text_left_padding' : 6
, 'button_text_top_padding' : 2
, 'button_width' : 66
, 'button_height' : 22
, 'button_action' : SWFUpload.BUTTON_ACTION.SELECT_FILE
, 'button_disable' : false
});

&nbsp;

$('#btnSubmit').click(function() {
 swfu.startUpload();
 });

 function uploadQueued( fileObj ) {
 $('#uploadFileName').append('<li>' + fileObj.name + '</li>');
 }

function uploadHandleErrors( fileObj , error_code , message ) {
 switch( error_code )
 {
 default: return;
 case SWFUpload.ERROR_CODE_QUEUE_LIMIT_EXCEEDED: alert( message ); break;
 case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE: alert( 'FILE_INCORRECT' ); break;
 case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT: alert('FILE_SIZE_TOO_BIG'); break;
 case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE: alert('NOT_CSV_FILE'); break;
 case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED: alert( message ); break;
 case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED: alert( message ); break;
 }
 }

 function uploadComplete( fileObj , data ) {
 var result = $.parseJSON(data);
 if( result.msg == '[SUCCESS]' ) {
 $( '#uploadFileName' ).html('');
 alert('registComplete');
 //swfu = null;
 return;
 }
 else {
 //swfu = null;
 alert('registFail');
 }
 }
<pre>});

대충 저런식으로 처리를 해주면 된다.

HTML5 를 이용하는 방법은…

</pre>
<form id="form3" enctype="multipart/form-data" method="post" action="">
<div class="row">
 <input type="hidden" name="MAX_FILE_SIZE" value="3000000" />
 <label for="fileToUpload3">HTML5 Select a File to Upload</label><br />
 <img src="/resource/img/button.png" onclick="document.getElementById('fileToUpload3').click();" />
 <input type="file" size="30" name="uploadedFile" id="fileToUpload3" style="display:none;"/>
 <input type="text" name="userId" id="textTest3" value="111" />
</div>

<div><ul id='uploadFileName3'></ul></div>
<div id="fileSize3"></div>
<div id="fileType3"></div>
<div class="row">
 <input type="button" value="Upload" id="btnSubmit3"/>
</div>
<div id="progressNumber3"></div>
</form>

위와 같이 우선 버튼을 이미지로 바꾼 form 을 선언하고

</pre>
$(document).ready(function() {

var fd = new FormData();

$('form:#form3').change(function() {
fileSelected('fileToUpload3', fd);
 });

 $('#btnSubmit3').click(function() {
uploadFile(fd);
 });

&nbsp;

function fileSelected(sInputId, fd) {
 var file = document.getElementById(sInputId).files[0];
 if (file) {
 var fileSize = 0;
 if (!fd.curFileSize) {
 fd.curFileSize = 0;
 }
 fd.curFileSize += file.size;

 if (fd.curFileSize > maxFileSize) {
 alert('FILE_SIZE_TOO_BIG');
 return false;
 }

 if (file.size > 1024 * 1024) {
 fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
 } else {
 fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
 }

$('#uploadFileName3').append('<li>' + file.name + '</li>');
 $('#fileSize3').html('Size: ' + fileSize);
 $('#fileType3').html('Type: ' + file.type);

 fd.append('uploadedFile', file);
 }
 }
function uploadFile (fd) {
 var xhr = new XMLHttpRequest();

fd.append('userId', $('textTest3').val());

/* event listners */
 xhr.upload.addEventListener("progress", contMainPage.uploadProgress, false);
 xhr.addEventListener("load", contMainPage.uploadComplete, false);
 xhr.addEventListener("error", contMainPage.uploadFailed, false);
 xhr.addEventListener("abort", contMainPage.uploadCanceled, false);
 /* Be sure to change the url below to the url of your upload server side script */
 xhr.open("POST", "/main/exec");
 xhr.send(fd);
 }

});

위와 같이 파일을 선택할때마다 파일 사이즈의 합을 체크하고 formData에 append 시켜주면 된다.

 

jquery fileupload 의 경우 크로스 브라우징을 지원하기 때문에 아예 swfupload를 대체해서 사용할려고 했으나

결국 파일 사이즈 체크등에 대한 기능은 html5를 사용하는 등 제한이 있기때문에 테스트만 해보았으며

</pre>
$("#form2").fileupload({
 // dataType: 'text',
 url: '/main/exec',
 fileInput: $('#fileToUpload2'),
 // formAcceptCharset: 'utf-8',
 // singleFileUploads: true,
 // replaceFileInput: false,
 // forceIframeTransport: true,
 add: function (e, data) {
 if (!data.curFileSize) {
 data.curFileSize = 0;
 }
 data.curFileSize += data.files[0].size;
 if (data.curFileSize > maxFileSize) {
 alert('FILE_SIZE_TOO_BIG');
 return false;
 }
 $('#uploadFileName2').append('<li>' + data.files[0].name + '</li>');

 $('#btnSubmit2').click(function() {
 data.submit();
 });
 },
 done: function (e, data) {
 alert(data.result.msg);
 }
 ,failed: function (e, data) {
alert('registFail');
 }
 });
<pre>

위와 같이 선언해주면 된다.

One Comment leave one →
  1. 2013/04/01 9:47 오전

    덕분에 요즘 공부 잘하고 있습니다. 좋은정보 감사~^^

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: