미리보기 업로드 된 이미지 파일 node.js를 사용하여

Question

express.js 응용 프로그램에서 일부 필드가있는 양식이 있고 그 위에 업로드 이미지 필드가 있습니다.

사용자가 이미지 파일을 탐색하여 하나를 선택하면이 파일을 양식 제출 전에 "미리보기 블록"에 표시하고 싶습니다.

나는 이러한 작업에 생각 : 찾아보기 버튼

에

1. 클릭
2. 파일이 선택되어있는 파일을 선택 =>, 이름을 변경, 업로드, 크기를 조정 작물을하고 저장 /tmp 디렉토리에
3. 미리보기 블록에 새 파일을 표시
4. 폼 검증 => 해당 응용 프로그램 디렉토리의 이름을 바꿀 파일을 이동

이 프로세스를 수행하는 가장 좋은 방법을 찾고 있습니다.

Answer 1

이 문제를 해결하기위한 단계입니다.

1. 를 사용하여 입력 유형 HTML 파일에 파일.

   <input id="upload_images" type="file" multiple="multiple"> 
   

2. 입력 유형 파일의 변경 이벤트에 이벤트 수신기를 추가하십시오. 파일이 사용자에 의해 선택

   if(document.addEventListener) { 
       document.getElementById("upload_images").addEventListener("change", function(e){ 
        uploadImages(e); 
       }); 
   } 
   else { 
       document.getElementById("upload_images").attachEvent("onchange", function(e){ 
        uploadImages(e); 
       }); 
   } 
   

3. 폼 데이터를 작성하여 서버 (Mutipart 데이터)로 보내 AJAX 사용.

   서버에서

   function uploadImages(e) { 
       var uploadedFiles = e.target.files; 
       var xhrObj = new XMLHttpRequest(); 
       xhrObj.open('POST', "<<your node>>/<<request URI>>", true); 
       xhrObj.onreadystatechange = function() { 
        if(this.readyState == this.DONE) { 
         if(this.status != 200) { 
          // Show Error 
         } 
         else { 
          var returnedResponse = xhrObj.responseText; 
          if(returnedResponse == 'success') { // check your returned data like I was returning "success" 
           // Success - Do the tasks 
          } 
         } 
        } 
       }; 
       var requestFormData = new FormData(); 
       for(var i=0; i<uploadedFiles.length; i++) { 
        requestFormData.append('data', uploadedFiles[i]); 
       } 
       xhrObj.send(requestFormData); 
   } 
   

4. (nodejs)가 파일/파일 업로드받을 강력한을 사용하고 원하는 위치에 저장합니다.

   서버에서

   // require formidable 
   // require imagemagick 
   function processUploadImages(req, res) { 
       var form = new formidable.IncomingForm(); 
       form.uploadDir = __dirname+'/uploaded_images/; 
       form.maxFieldsSize = 20 * 1024 * 1024; 
       form.keepExtensions = true; 
       form.onPart = function(part) { 
        form.handlePart(part); 
       } 
       form.on('file', function(name, file) { 
        // Handle file data like: 
        // file.path 
        // file.name 
       }); 
       form.on('end', function() { 
        //show complete 
       }); 
       form.parse(req, function(error, fields, files) { 
        // create thumbnail images 
        // return response 
       });  
   } 
   

5. (nodejs는) ImageMagick과을 사용하여 썸네일 이미지를 만들 어디서나 위치 할 수있는 폴더에 저장합니다.

6. 저장된 이미지와 미리보기 이미지를 다시 보내주십시오.

7. 이미지 태그를 만들고 src 태그에이 링크를 사용하십시오.