upload progress bar / percent

IE11 환경에서 업로드 할 떄 하단에 진행바가 더이상 보이지 않아서 구글과 유투브를 뒤져서 찾아낸 코드

jqeury, jqueryform 연결해주고

<script src="https://code.jquery.com/jqeury-2.2.0.min.js"></script>

<script src="http://oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script>

보여주고 싶은 곳에다가 넣으면 되고

<div id="bar_area">

<div id="bar"></div>

</div>

<div id="percent"></div>

<div id="status"></div>

아래 스크립트에 작성해 주면 됩니다.

<script>

$(function(){

$(document).ready(function(){

var bar = $('#br');

var percent = $('#percent');

var status = $('#status');

$('form').ajaxForm({

begoreSend: function(){

status.empty();

var percentVal = '0%';

bar.width(percentVal);

percent.html(percentVal);

},

uploadProgress: function(event, position, total, percentComplete){

var percentVal = percentComplete+'%';

percent.html(percentVal);

bar.width(percentVal);

},

complete: function(xhr){

status.html(xhr.responseText);

}

});

});

});

    </script>

<form action="" method = "post">

업로드 쪽 form 을 보면 action이 가는 파일로 들어가서 아래 코드를 작성해줍니다.

if($_SERVER['REQUEST_METHOD'] == 'POST'){

$file = $_FILES['file']['tmp_name'];

$name = $_FILES['file']['name'];

$path = 'uploads/';

move_uploaded_file($file,$path,$name);

echo 'File Uploaded Successfully';

}

[참고] https://www.youtube.com/watch?v=YCdFZ9FybrA    [php ajax file upload with progress bar, upload file using ajax, file upload plugin