잠시만 기다려 주세요

HOME   |  여기는?   |  바다물때표   |  여러가지 팁 (887)  |  추천 및 재미 (152)  |  자료실 (20)  |  끄적거림 (517)  |  시나리오 (760)  |  드라마 대본 (248)  |  

2020년 09월 19일
질투는 사람을 어리석게 만든다. - 바다아이
 

 

    javascript/jquery

javascript/jquery - File Upload Progress, 파일 업로드 프로그레스바.... 업로드 진행바 구현.
이 름 : 바다아이   |   조회수 : 2517         짧은 주소 : https://www.bada-ie.com/su/?421591913622
d.zip - 97 KB   다운수 : 2 회

다운로드는 브라우저에서 지원하니까 별 의미는 없고 업로드만 입니다.

js 파일 두개는 첨부해 놓습니다.
아니면 아래처럼 사용.<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
주의할 점은 url 이 같아야 합니다. 아래 예제 파일과 받는 서버 주소가 같은 곳에서 있어야 실행됩니다.
보안상 그렇게 되어 있네요... 반드시 서버에다 만들어서 테스트 하세요...
로컬에서 파일로 저장해서 사용하면 반응하지 않습니다. 또한 두 파일의 url 이 다르면 반응하지 않습니다.
로컬에서 테스트 하시려면 가상서버 구성해서 올려서 테스트 하세요...

그리고 또하나.... 100% 되면 form 전송이 안된 것처럼 멈춰있는데 그게 멈춘게 아니에요..
받는 서버주소에서 페이지 이동시키면 바로 이동합니다. 
완전히 업로드되면 ajax 가 해당 서버주소 페이지에 반응합니다.
참고로 업로드 처리되는 서버에서 메타태그 페이지 이동 안 먹습니다. 반드시 location.href 로 이동하세요...

그리고 ckeditor 쓰시는 분들. ajax 통신 할때 문제가 생겨요...
아래하고 같이 쓰면 ckeditor 본문이 빈값으로 들어갑니다.
이 때는 빈값체크하는 부분이든 어디든 수동으로 값을 넣은 후 그 다음... ajax 통신을 해야 합니다.
editor1 은 자신이 생성했던 이름을 써야 겠죠...

<script>
    폼textarea필드 = CKEDITOR.instances.editor1.getData();

    // Your code to save "data", usually through Ajax.
</script>



<!doctype html>
<head>
<title>File Upload Progress Demo #2</title>
<style>
body { padding: 30px }
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }

.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
    <h1>File Upload Progress Demo #2</h1>
	<code>&lt;input type="file" name="myfile[]" multiple></code>
    <form action="서버주소" method="post" enctype="multipart/form-data">
        <input type="file" name="myfile[]" multiple><br>
        <input type="submit" value="Upload File to Server">
    </form>
    
    <div class="progress">
        <div class="bar"></div >
        <div class="percent">0%</div >
    </div>
    
    <div id="status"></div>
    
<script src="./jquery-1.12.4.js"></script> 
<script src="./jquery.form.js"></script> 
<script>
(function() {
    
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
   
$('form').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
		//console.log(percentVal, position, total);
    },
    success: function() {
        var percentVal = '100%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
	complete: function(xhr) {
		status.html(xhr.responseText);
	}
}); 

})();       
</script>
</body>
</html>


출처 : http://malsup.com/jquery/form/progress2.html
| |


      1 page / 3 page
번 호 카테고리 제 목 이름 조회수
74 javascript/jquery javascript 서버시간 가져오기, 서버날짜 가져오기... 바다아이 232
73 javascript/jquery 자바스크립트 쿠키 클래스, cookie class 바다아이 794
72 javascript/jquery select 박스 3단 카테고리 바다아이 1174
71 javascript/jquery 자바스크립트 해당 년월의 마지막 날짜 구하기, 이번달 마지막 일 구하기... 바다아이 1722
70 javascript/jquery 자바스크립트 타임존 변환, timezone, 날짜, 시간 관련 편하게 작업하기... moment.js 바다아이 1843
69 javascript/jquery textarea 의 특정 커서 cursor 위치에 문자 삽입하기. focus, 커서 cursor 위치 구하기... 바다아이 1787
68 javascript/jquery 마우스 블럭(block) 선택한 텍스트 가져오기, 마우스로 웹페이지 본문 선택한 문자만큼 가져오기... 바다아이 1724
67 javascript/jquery textarea 특정 위치에 커서 cursor 를 옮기기, 위치시키기, focus 바다아이 2320
66 javascript/jquery jquery ajax option 옵션 총 정리.... 바다아이 1937
65 javascript/jquery jquery open api 개발, ajax JSONP cross domain 문제, 서로 다른 도메인 문제 해결하기, error 0 문제... sop 문제 바다아이 1991
64 javascript/jquery javascript 자바스크립트 소수점, 자리수, 반올림, 올림, 내림(버림) 바다아이 2084
63 javascript/jquery javascript 현재시각 표시하는 디지털 시계 만들기 (date 객체) 바다아이 2179
62 javascript/jquery CSS3 회전 속성과 javascript를 활용한 아날로그 시계 바다아이 2353
61 javascript/jquery javascript 자바스크립트 쿠키, cookie, 만들기, 저장, 삭제, 가져오기, 얻기 바다아이 2250
60 javascript/jquery javascript 자바스크립트 날짜 계산하는 다양한 방법 바다아이 2570
59 javascript/jquery 자바스크립트 javascript 한/영타 변환기, 한영, 한글, 영어 바다아이 2787
58 javascript/jquery url 인코드, 디코드, encode, decode 예제... 바다아이 2068
57 javascript/jquery javascript 자바스크립트 프레임 페이지 이동... frame location.href 바다아이 2169
현재글 javascript/jquery File Upload Progress, 파일 업로드 프로그레스바.... 업로드 진행바 구현. 바다아이 2518
55 javascript/jquery 자바스크립트 javascript, json 데이터 이쁘게 출력하기, json Highlight 바다아이 2523
54 javascript/jquery 자바스크립트 javascript json 사용하기, 출력하기, JSON.stringify, JSON.parse, 변환 바다아이 2622
53 javascript/jquery 자바스크립트 javascript innerHTML, innerTEXT 사용 할 때 주의할 점... 바다아이 2351
52 javascript/jquery 자바스크립트 javascript 엔티티 entity 인코딩, 디코딩, encode, decode 바다아이 2662
51 javascript/jquery 자바스크립트 javascript post, get 값 파라미터 받기, 구하기 바다아이 3866
50 javascript/jquery 자바스크립트 text copy, 복사, How to copy a TEXT to Clipboard on a Button-Click 바다아이 2742
49 javascript/jquery jquery autocomplete 자동완성 한글 입력시 문자, 검색어, 창 사라지는 문제. 바다아이 2495
48 javascript/jquery 자바스크립트 javascript, jquery, 검색어 자동완성 기능, autocomplete 바다아이 2833
47 javascript/jquery 자바스크립트 substring, substr, indexOf, lastIndexOf (javascript 문자열 자르기, 뒤에서 자르기, 찾기) 바다아이 2595
46 javascript/jquery Javascript 자바스크립트 event.keyCode 키보드 코드값, 이벤트 키코드, ACSII 코드 바다아이 2237
45 javascript/jquery 자바스크립트 url encode decode 하기, 인코딩, 디코딩, javascript 한글 깨짐 바다아이 3431
1
2
3
| |








Copyright ⓒ 2001.12. bada-ie.com. All rights reserved.
이 사이트는 리눅스에서 firefox 기준으로 작성되었습니다. 기타 브라우저에서는 다르게 보일 수 있습니다.
[ FreeBSD + GoLang + PostgreSQL ]
서버위치 : 구글 클라우드 플랫폼  실행시간 : 0.25374 초
to webmaster... gogo sea. gogo sea.