PHP - 使用Javascript和PHP上傳多個文件

它再次。我目前正在嘗試爲我的網站構建一個多文件上傳器，但不知道如何獲取/處理所有文件。我想向您展示的代碼首先將是一個更好的解釋：PHP - 使用Javascript和PHP上傳多個文件

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>NDSLR - Demo Upload</title> 
</head> 

<body> 
<script type="text/javascript"> 
function fileChange() 
{ 
    //FileList Objekt aus dem Input Element mit der ID "fileA" 
    var fileList = document.getElementById("fileA").files; 

    //File Objekt (erstes Element der FileList) 
    var file = fileList[0]; 

    //File Objekt nicht vorhanden = keine Datei ausgewählt oder vom Browser nicht unterstützt 
    if(!file) { 
     return; 
    } 

    var x = substr(file.name, -4); 
    document.getElementById("status").innerHTML = x; 
    /* 
    if (x != ".pdf") { 
     document.getElementById("fileA").files = null; 
     file = null; 
     fileList = null; 
     alert("Wrong Data"); 
     return; 
    } */ 
    document.getElementById("fileName").innerHTML = 'Dateiname: ' + file.name; 
    document.getElementById("fileSize").innerHTML = 'Dateigröße: ' + file.size + ' B'; 
    document.getElementById("progress").value = 0; 
    document.getElementById("prozent").innerHTML = "0%"; 
} 

var client = null; 

function uploadFile() 
{ 

    //Wieder unser File Objekt 
    for(i=0;i < document.getElementById("fileA").files; i++) { 
     var file = document.getElementById("fileA").files[i]; 
     //FormData Objekt erzeugen 
     var formData = new FormData(); 
     //XMLHttpRequest Objekt erzeugen 
     client = new XMLHttpRequest(); 

     var prog = document.getElementById("progress"); 

     if(!file) 
      return; 

     prog.value = 0; 
     prog.max = 100; 

     //Fügt dem formData Objekt unser File Objekt hinzu 
     formData.append("datei", file); 

     client.onerror = function(e) { 
      alert("onError"); 
     }; 

     client.onload = function(e) { 
      document.getElementById("prozent").innerHTML = "100%"; 
      prog.value = prog.max; 
     }; 

     client.upload.onprogress = function(e) { 
      var p = Math.round(100/e.total * e.loaded); 
      document.getElementById("progress").value = p;    
      document.getElementById("prozent").innerHTML = p + "%"; 
     }; 

     client.onabort = function(e) { 
      alert("Upload abgebrochen"); 
     }; 

     client.open("POST", "upload.php"); 
     client.send(formData); 
     } 
} 

} 

function uploadAbort() { 
    if(client instanceof XMLHttpRequest) 
     //Briecht die aktuelle Übertragung ab 
     client.abort(); 
} 
</script> 

<form action="" method="post" enctype="multipart/form-data"> 
    <input name="file[]" type="file" multiple="multiple" id="fileA" onchange="fileChange();"/> 
    <input name="upload[]" value="Upload" type="button" accept=".dem" onclick="uploadFile();" /> 
    <input name="abort" value="Abbrechen" type="button" onclick="uploadAbort();" /> 
</form> 
    <div id="status"></div> 
    <div id="fileName"></div> 
    <div id="fileSize"></div> 
    <div id="fileType"></div> 
    <progress id="progress" style="margin-top:10px"></progress> <span id="prozent"></span> 

</div> 
</body> 
</html>

所以這是我的HTML代碼和我的upload.php的跟進：

<?php 
if (isset($_FILES['datei'])) 
{ 
    move_uploaded_file($_FILES['datei']['tmp_name'], 'upload/'.$_FILES['datei']['name']); 
} 
?>

我的問題目前，我不知道如何實現多重上傳或者更好地說，如何上傳所有文件。

來源

2016-02-04 ndslr

[jQuery的AJAX文件上傳的PHP（可能的重複http://stackoverflow.com/questions/23980733/jquery-ajax-file-upload-php ） –

https://www.codeproject.com/Articles/19606/Javascript-PHP-Multiple-File-Upload – Super

在互聯網上有一些教程，你可以簡單地通過谷歌搜索「多文件上傳」找到。反正這裏是一個例子：

的HTML

<!-- IMPORTANT: FORM's enctype must be "multipart/form-data" --> 
<form method="post" action="upload-page.php" enctype="multipart/form-data"> 
    <input name="filesToUpload[]" id="filesToUpload" type="file" multiple="" /> 
</form>

清單多個文件使用JavaScript

//get the input and UL list 
var input = document.getElementById('filesToUpload'); 
var list = document.getElementById('fileList'); 

//empty list for now... 
while (list.hasChildNodes()) { 
    list.removeChild(ul.firstChild); 
} 

//for every file... 
for (var x = 0; x < input.files.length; x++) { 
    //add to list 
    var li = document.createElement('li'); 
    li.innerHTML = 'File ' + (x + 1) + ': ' + input.files[x].name; 
    list.append(li); 
}

的input.files屬性提供文件的數組，你可以檢查長度;如果有一個長度，你可以遍歷每個文件並訪問文件路徑和名稱。

接收和使用PHP

文件處理

if(count($_FILES['uploads']['filesToUpload'])) { 
    foreach ($_FILES['uploads']['filesToUpload'] as $file) { 

     //do your upload stuff here 
     echo $file; 

    } 
}

PHP創建一個與給定的輸入的名字上傳的文件的數組。該變量將始終是PHP中的數組。

Source

Demo

來源

2016-02-04 13:56:23 Bfcm

這是使用AJAX上傳。還有其他的方式，例如使用iframe和jquery的$.load()。

ajax_upload.js

嗯... FORMDATA不是IE安全。因此，您可能需要使用iframe & $.load()。

function doUpload(fle_id, url_upld) 
{ 
    var upldLimit = 2000000; // 2mb by default; 

    if($('#'+fle_id)[0] == undefined || $('#'+fle_id)[0].files.length == 0) { 
     alert('nothing to upload'); 
     return; 
    } 

    // put files to formData 
    var tfSize = 0; // in bytes 
    var fd = new FormData(); 
    $.each($('#'+fle_id)[0].files, function(i, file) { 
     fd.append(i, file); 
     tfSize = tfSize + file.size; 
    }); 

    // you may check file size before sending data 
    if(tfSize > upldLimit) { 
     alert('File upload exceeded the '+(upldLimit/1000000)+' MB limit.'); 
     return; 
    } 

    // actual data transfer 
    $.ajax({ 
     url: url_upld, 
     cache: false, 
     data: fd, 
     type: 'POST', 
     contentType : false, 
     processData : false, 
     success: function(data){ 
      alert(data); 
     }, 
     error: function(jqXHR, textStatus, errorMessage) { 
      alert(errorMessage); 
     } 
    }); 
}

upload_form.html

讓我們用jquery使事情變得簡單。

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="ajax_upload.js"></script> 
<script type="text/javascript"> 
    $(function(){ 

     $('form').submit(function(e){ 
      if(e.preventDefault) e.preventDefault(); // chrome/firefox 
      else e.cancelBubble(); // IE 

      // supply file input id and upload url 
      doUpload('fle', $(this).attr('action')); 

     }); 

    }); 
</script> 
Upload 
<form action="ajax_upload.php" 
     method="post" 
     enctype="multipart/form-data" 
     accept-charset="utf-8" 
> 
    <input type="file" id="fle" name="fle[]" multiple > 
    <button type="submit">Upload</button> 
</form>

ajax_upload.php

<?php 

    if(count($_FILES) == 0) { 
     echo 'Nothing uploaded.'; 
     exit; 
    } 

    $upldPath = 'E:/stack/upload/'; 
    foreach($_FILES as $file) { 
     if ($file['error'] == UPLOAD_ERR_OK) { 
      try { 
       if(!move_uploaded_file($file["tmp_name"], $upldPath . $file['name'])) { 
        // abort even if one file cannot be moved. 
        echo 'Cannot upload one of the files.'; 
        exit; 
       } 
      } 
      catch(Exception $e) { 
       echo 'Cannot upload the files.'; 
       exit; 
      } 
     } else { 
      // abort even if one file has error. 
      echo 'Cannot upload one of the files.'; 
      exit; 
     } 
    } 

    echo 'Upload successful!'; 

?>

來源

2016-02-04 14:56:57 rma

PHP - 使用Javascript和PHP上傳多個文件

回答

相關問題