단일 파일 업 로더를 멀티 파일 업 로더가되도록 수정하십시오.

Question

그래서 저는 하나의 파일에 대해 드래그 앤 드롭 파일 업로드 스크립트 작업을 진행하고 있습니다. 여러 파일을 허용 할 수있게 만들었으나 문제가 발생했습니다.

// Required for drag and drop file access 
jQuery.event.props.push('dataTransfer'); 

// Set the dropzone 
$("#dropzone-wrapper").on('drop', function(event) { 
// Do something with the file(s) 
var files = event.dataTransfer.files; 

if (files.type.match('image.*')) { 
    // If the file is an image, then run the processFileUpload function 
    processFileUpload(files); 
} else { 
    alert("Not an image!"); 
} 
}); 

// Process the file that was dropped 
function processFileUpload(droppedFile) { 

var uploadFormData = new FormData(); 
uploadFormData.append("image",droppedFile); 

var bar = $('.bar'); 
var percent = $('.percent'); 

$.ajax({ 
    url : "Uploader/upload.php", // use your target 
    type : "POST", 
    beforeSend: function() { 
     $('.progress').show(); 
     var percentVal = 0; 
     bar.width(percentVal) 
     percent.html(percentVal + '%'); 

     window.setInterval(function(){ 
      var x = (100/(droppedFile.size/100000)); 
      var x = Math.round(x); 

      if (x >= 90) { clearInterval(); } else { 
      percentVal = percentVal + x; 
      percent.html(percentVal + '%'); 
      bar.width(percentVal + '%'); } 
     }, 1000); 

    }, 
    complete: function() { 
     clearInterval(); 
     bar.width("100%"); 
     percent.html("100%"); 
    }, 
    data : uploadFormData, 
    chache : false, 
    contentType : false, 
    processData : false, 
    success : function(data) { 

     window.location = data; 

    } 
    }); 
} 

내가지고있어 오류가 * 이 정의되지 않은 방법 '일치'를 호출 할 수 없습니다 * 이제 내 생각이 내가 말한대로하기 때문에 여러 개의 파일을 확인하는 문제를 가지고있다 것을 9. 라인에 관한, 그 중 하나만 확인해도 좋습니다. 업로드되는 모든 파일이 이미지인지 확인하려면 어떻게해야합니까?

Answer 1

당신은 개별적으로 각 파일을 추가해야 files 파일의 목록입니다, 또한 당신은 전송 아니에요 ... 여러 파일

var filesToUpload = []; 
for (var i = 0; i < files.length; i++){ 
    if (files[i].type.match('image.*')) { 
     filesToUpload.push(files[i]); 
    } else { 
     alert("Not an image!"); 
    } 
} 
processFileUpload(filesToUpload); 

... 

function processFileUpload(droppedFiles) { 
... 
var uploadFormData = new FormData(); 
for (var i = 0; i < droppedFiles.length; i++){ 
    uploadFormData.append("image[]",droppedFiles[i]); 
} 
...