Ajax 파일 비동기 업로드 실현

극객 대학 ajax 파일 업로드 주소 정리
1. 비동기 업로드 의 개념
비동기 업로드 란 전통 적 인 폼 제출 을 비교 하여 페이지 부분 새로 고침 기능 을 실현 하 는 것 이다.전통 적 인 폼 제출 은 보통 제출 단 추 를 누 르 고 실제 페이지 는 잠 겨 있 는 상태 입 니 다. 업로드 가 완료 되면 페이지 는 새로운 페이지 로 이동 합 니 다.한편, 한 편의 업 로드 는 전체 업로드 과정 에서 페이지 가 막 히 지 않 았 기 때문에 사용 자 는 다른 상호작용 을 동시에 할 수 있다. 업로드 가 완 료 된 후에 국부 페이지 에서 알림 정 보 를 제공 하고 전체 페이지 를 새로 고치 지 않 는 다.
2. 비동기 업로드 의 실현 방식
1. iframe 위조 비동기 업로드 실현
키 조작:

폼 을 제출 할 때 target 속성 을 정의 하고 숨겨 진 iframe

을 가리 킵 니 다.

파일 업로드 가 완료 되면 iframe 은 현재 홈 페이지 에 정 보 를 되 돌려 주 고 파일 에 대한 후속 작업 을 할 수 있 도록 합 니 다

<iframe name="ifm" style="display: none;">iframe>

<form action="/upload" enctype="multipart/form-data" method="post" target="ifm" onsubmit="loading(true)">
<label for="myfile">  ：label>
<input type="file" name="myfile" id="myfile" />
<input type="submit" class="btn btn-primary" value="    " />
<span id="uptxt" style="display: none;">    。。。span>
form>
 <div id="flist" style="border:1px dotted darkgray;">div>
 

  <script>
        function uploadFinished(fileName) {
            addToList(fileName);
            loading(false);
        }
        function addToFlist(fname) {
            var temp = ["
",fname, ""];
            $("#flist").append(temp.join(""));
        }

        function loading(showloading) {
            if (showloading) {
                $("#uptxt").show();
            } else {
                $("#uptxt").hide();
            }
        }

    script>

폼 을 제출 할 때 정 보 는 target 이 가리 키 는 숨겨 진 iframe 페이지 에 제출 되 어 현재 홈 페이지 를 새로 고치 지 않 고 일반 파일 업로드 에서 target 은 현재 홈 페이지 이기 때문에 파일 업로드 에 성공 하면 돌아 오 는 정 보 는 현재 페이지 에 표시 되 어 페이지 를 새로 고 칩 니 다.폼 을 제출 하면 iframe 은 현재 페이지 에 정 보 를 피드백 하여 현재 업로드 진 도 를 알려 줍 니 다.
백 엔 드 코드 처리

var express = require('express');
var router = express.Router();

var multipart = require('connect-multiparty');    //     
var multipartMiddleWare = multipart();    //          
var fs = require('fs');

router.post('/upload',multipartMiddleWare,function(req,res) {
    //     ：      url，     ：     ，     ：          
    var fpath = req.files.myfile.path;
    var fileName = fpath.substr(fpath.lastIndexOf('\\') + 1);    //         ，       

    setTimeout(function() {
        var ret = [",<span class="hljs-string">"window.parent.uploadFinished('"</span> + fileName + <span class="hljs-string">"');"</span>,<span class="hljs-string">"];

        res.send(ret.join(""));
    },1000)
});

업로드 가 완료 되면 iframe 은 현재 제출 페이지 업로드 가 완료 되 었 음 을 알 리 고 업로드 한 파일 이름 을 전달 하여 현재 페이지 가 iframe 페이지 를 후속 적 으로 처리 할 때 스 크 립 트 를 직접 실행 하도록 해 야 합 니 다.홈 페이지 면 즉 window. parent 를 찾 아 이 페이지 가 정의 하 는 함 수 를 호출 합 니 다. 매개 변 수 는 현재 업로드 한 파일 이름 입 니 다.
2. xhr level 2 진정한 의미 의 비동기 업로드 실현
관건 적 인 작업: formData 대상 을 만 들 고 업로드 할 파일 을 formData 에 넣 어 xhr 대상 을 만 들 고 요청 을 보 냅 니 다. (formData 는 HTML 5 의 새로운 속성 입 니 다. 전통 적 인 폼 과 유사 합 니 다. formData 에 각 폼 항목 과 값 을 추가 할 수 있 습 니 다.)

<div class="container">
        <div class="roe">
            <div class="col-md-12">
                <div>
                   <div class="input-group">
                       for="myfile">  ：
                       "file" id="myfile" />
                   div>
                    <div>
                        "button" class="btn btn-primary" onclick="upload()" value="    " />
                        id="uptxt" style="display: none;">    ...
                        id="upprogress">
                        id="stop" class="btn btn-danger" style="display: none;">    
                    div>
                div>

                <div id="fileList" style="border: 1px dotted darkgray">div>
            div>
        div>
    div>

 <script>
   var formdata = new FormData();    //    formData  
   formdata.append('myfile',$('#myfile')[0].files[0]);
    //  xhr，       ，       
            var xhr = new XMLHttpRequest();
        function upload() {
            //  formData  ，              formData 
            var xhr = new XMLHttpRequest();

            //    ，    
            xhr.upload.onprogress = function(event) {      
                if(event.lengthComputable) {     
                    var percent = Math.round(event.loaded * 100 / event.total);  
                    console.log('%d%',percent);
                    $('#upprogress').text(percent);
                }
            };

            //      ， xhr     send  ，         
            xhr.onloadstart = function(event) {
                console.log('load start');
                $('#upprogress').text('    ');
                $('#stop').one('click',function() {      //  ‘    ’  
                    xhr.abort();       //    
                    $(this).hide();   //      
                });
                loading(true);
            };

            //      
            xhr.onload = function(event) {
                console.log('upload success');
                $('#upprogress').text('    ');
                console.log(xhr.responseText);
                var ret = JSON.parse(xhr.responseText);   //         json  
                addToList(ret.fname);   //           
            };

            //      
            xhr.onerror = function(event) {
                console.log('error');
                $('#upprogress').text('    ');
            };

            //     
            xhr.onabort = function(event) {
                $('#upprogress').text('    ');
            };

            xhr.onloadend = function(event) {
               console.log('load end');
                loading(false);
            };

            xhr.open('POST','/upload3',true);
            xhr.send(formdata);
        }

        function addToList(fname) {
            var temp = ["
",fname,""];
            $('#fileList').append(temp.join(""));
        }

        function loading(showloading) {
            if(showloading) {
                $('#uptxt').show();
                $('#stop').show();
            }else {
                $('#uptxt').hide();
                $('#stop').hide();
            }
        }
    script>

여기 서 form 폼 을 빌 리 지 않 고 formData 대상 을 직접 만 든 다음 에 데 이 터 를 추가 하 는 방법 을 사용 합 니 다.전통 적 인 페이지 에 파일 도 메 인 을 넣 고 파일 을 선택 한 후 파일 정 보 를 formData 대상 에 넣 습 니 다.

append 방법 을 통 해 폼 항목 을 formData 대상 에 불 러 옵 니 다.첫 번 째 매개 변 수 는 폼 항목 의 이름 으로 input 의 name 속성 에 해당 합 니 다.두 번 째 매개 변 수 는 들 어 올 내용 입 니 다.

onprogress 는 다운로드 이벤트 이 고, upload. onprogress 는 업로드 이벤트

event. lengthComputable: 파일 길이 가 계산 가능 하 다 면 (파일 이 너무 작 거나 전송 전에 파일 의 실제 길 이 를 포착 하지 못 했 을 때 이 값 은 false)

업로드 진 도 를 계산한다.이벤트. loaded 는 전송 이 완 료 된 크기 를 표시 합 니 다. 이벤트. totalk 은 현재 업로드 파일 의 크기 를 표시 합 니 다

백 엔 드 코드 처리

router.post('/upload3',multipartMiddleWare,function(req,res) {
    console.log(req.files);

    var fpath = req.files.myfile.path;
    var fname = fpath.substr(fpath.lastIndexOf('\\') + 1);
    res.json({fname: fname});
});