반응형
일하다 보니 프로그레스바가 간혹, 파일업로드 할때 적용할 필요성이 있습니다.
인터넷에 돌아다니는 오픈소스를 참고하였습니다
필요한 파일
upload_frame.php
<?php
$url = basename($_SERVER['SCRIPT_FILENAME']);
//Get file upload progress information.
if(isset($_GET['progress_key'])) {
$status = apc_fetch('upload_'.$_GET['progress_key']);
echo $status['current']/$status['total']*100;
die;
}
//
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script>
<link href="../../css.css" rel="stylesheet" type="text/css" />
<script>
$(document).ready(function() {
//
setInterval(function()
{
$.get("<?php echo $url; ?>?progress_key=<?php echo $_GET['up_id']; ?>&randval="+ Math.random(), {
//get request to the current URL (upload_frame.php) which calls the code at the top of the page. It checks the file's progress based on the file id "progress_key=" and returns the value with the function below:
},
function(data) //return information back from jQuery's get request
{
$('#progress_container').fadeIn(100); //fade in progress bar
$('#progress_bar').width(data +"%"); //set width of progress bar based on the $status value (set at the top of this page)
$('#progress_completed').html(parseInt(data) +"%"); //display the % completed within the progress bar
}
)},500); //Interval is set at 500 milliseconds (the progress bar will refresh every .5 seconds)
});
</script>
<body style="margin:0px">
<!--Progress bar divs-->
<div id="progress_container">
<div id="progress_bar">
<div id="progress_completed"></div>
</div>
</div>
<!---->
</body>
실제 적용할 페이지.php
- 자신의 페이지에 맞게 유동적으로 적용해주세요
<!--Get jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script> // jQuery 사용 선언
<?php
//get unique id
$up_id = uniqid();
?>
<!--display bar only if file is chosen-->
<script>
$(document).ready(function() {
//
//show the progress bar only if a file field was clicked
var show_bar = 0;
$('input[type="file"]').click(function(){
show_bar = 1;
});
//show iframe on form submit
$("#form1").submit(function(){
if (show_bar === 1) {
$('#upload_frame').show();
function set () {
$('#upload_frame').attr('src','upload_frame.php?up_id=<?php echo $up_id; ?>');
}
setTimeout(set);
}
});
//
});
</script>
</head>
<body>
첨부 파일
<!--APC hidden field-->
<input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="<?php echo $up_id; ?>"/>
<input type="file" name="DATA_FILE" id ="DATA_FILE" multiple accept="*" style="width:300px" onchange="PreviewImage(this);"/> <!-- file 입력 부분 앞에 꼭! APC UPLOAD PROGRESS를 넣어주세요~!-->
<!-- 프로그래스바 나오는 코드입니다-->
<!--APC hidden field-->
<input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="<?php echo $up_id; ?>"/>
<!---->
<!--Include the iframe-->
<br />
<iframe id="upload_frame" name="upload_frame" frameborder="0" border="0" src="" scrolling="no" scrollbar="no" > </iframe>
</body>
프로그레스바를 적용하면 다음과 같은 화면이 나옵니다 :D
반응형
'Dev' 카테고리의 다른 글
| Web언어에 대해 많은 정보가 담긴 사이트 (HTML, CSS, JAVASCRIPT, JQUERY, XML ... etc) (0) | 2013.01.03 |
|---|