Ajax 파일 비동기 업로드 실현

17101 단어 nodeajax
극객 대학 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">
                           
                           "file" id="myfile" />
                       div>
                        <div>
                            "button" class="btn btn-primary" onclick="upload()" value="    " />
                            id="uptxt" style="display: none;">    ...
                            id="upprogress">
                            
                        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});
    });

    좋은 웹페이지 즐겨찾기