Vedä ja pudota useita tiedostolatauksia käyttämällä JavaScriptiä ja PHP: tä
Aiemmin olen kirjoittanut artikkelin Vedä ja pudota tiedostojen lataaminen JavaScriptin ja PHP: n avulla. Jotkut lukijat pyysivät kirjoittamaan artikkelin tiedostojen latausohjelman lisäämisestä, jonka avulla käyttäjät voivat ladata useita tiedostoja vedä ja pudota -ominaisuuksien avulla.
Työskennellessäsi verkkosovelluksessa sinun on ehkä ladattava useita tiedostoja yhdellä latauslaitteella lomakkeellesi. Se voi auttaa käyttäjää lataamaan yhden tai useita tiedostoja kerralla. He eivät halua ladata useita tiedostoja yksi kerrallaan. Tällaisen tiedostonlatausominaisuuden antaminen lisää parempaa käyttökokemusta ja myös nopeuttaa sovellustasi.
Tässä artikkelissa näytän, kuinka voit lisätä tämän tiedostolatausohjelman käyttämättä ulkoista vedä ja pudota -laajennusta. Lähetän tiedostot Ajaxilla. Se tarkoittaa, että tiedostot ladataan palvelimelle lataamatta koko sivua uudelleen.
Päästä alkuun
Kuten sanoin, emme käytä mitään ulkoista laajennusta vedä ja pudota -ominaisuuteen. Aion kirjoittaa kaiken koodin tyhjästä. Se on paljon helpompaa. Siinä ei ole monimutkaisia juttuja. Seuraa vain alla olevia ohjeita ja olet valmis.
Luodaan tiedosto index.htmlja lisätään koodi sen alle.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Drag Drop Multiple File Upload</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">
<div id="drag_upload_file">
<p>Drop file(s) here</p>
<p>or</p>
<p><input type="button" value="Select File(s)" onclick="file_explorer();"></p>
<input type="file" id="selectfile" multiple>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="custom.js"></script>
</body>
</html>Tässä olen mukana style.cssja custom.jsjohon lisätään siihen liittyvä koodi. Koska aiomme käyttää Ajaxia, otin mukaan jQuery-kirjaston.
Annetaan peruskäyttöliittymä tiedostolatauksellemme lisäämällä joitain CSS-ominaisuuksia. Voit tietysti lisätä oman CSS: n, jotta tiedostojen latauslaite olisi erilainen.
style.css
#drop_file_zone {
background-color: #EEE;
border: #999 5px dashed;
width: 290px;
height: 200px;
padding: 8px;
font-size: 18px;
}
#drag_upload_file {
width:50%;
margin:0 auto;
}
#drag_upload_file p {
text-align: center;
}
#drag_upload_file #selectfile {
display: none;
}Tämän jälkeen sinun pitäisi nähdä tiedostojen latausohjelma kuten alla olevassa kuvakaappauksessa:
Vedä ja pudota useita tiedostoja JavaScriptin ja PHP: n avulla
Olet määrittänyt peruskäyttöliittymän. Nyt voimme mennä eteenpäin ja kirjoittaa todellisen koodin JavaScriptille ja PHP: lle, jotka lataavat tiedostoja palvelimelle. HTML-koodiin lisäsin 2 menetelmää upload_file() ja file_explorer (), jotka kutsuvat pudotustiedostoja ja valitsevat tiedostot vastaavasti.
Määritetään nämä menetelmät ja välitetään tiedostot palvelinpuolen komentosarjalle, joka lataa tiedostot palvelimelle.
custom.js
var fileobj;
function upload_file(e) {
e.preventDefault();
ajax_file_upload(e.dataTransfer.files);
}
function file_explorer() {
document.getElementById('selectfile').click();
document.getElementById('selectfile').onchange = function() {
files = document.getElementById('selectfile').files;
ajax_file_upload(files);
};
}
function ajax_file_upload(file_obj) {
if(file_obj != undefined) {
var form_data = new FormData();
for(i=0; i<file_obj.length; i++) {
form_data.append('file[]', file_obj[i]);
}
$.ajax({
type: 'POST',
url: 'ajax.php',
contentType: false,
processData: false,
data: form_data,
success:function(response) {
alert(response);
$('#selectfile').val('');
}
});
}
}Kirjoita lopuksi palvelinpuolen koodi tiedoston lataamista varten ajax.phptiedostoon.
ajax.php
<?php
foreach($_FILES['file']['name'] as $key=>$val){
$file_name = $_FILES['file']['name'][$key];
// get file extension
$ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
// get filename without extension
$filenamewithoutextension = pathinfo($file_name, PATHINFO_FILENAME);
if (!file_exists(getcwd(). '/uploads')) {
mkdir(getcwd(). '/uploads', 0777);
}
$filename_to_store = $filenamewithoutextension. '_' .uniqid(). '.' .$ext;
move_uploaded_file($_FILES['file']['tmp_name'][$key], getcwd(). '/uploads/'.$filename_to_store);
}
echo "File(s) uploaded successfully";
die;Tämä koodi luo palvelimellesi ‘uploads’ -hakemiston ja tallentaa kaikki tiedostot tähän hakemistoon. Tallennettaessa tiedostoja palvelimelle huolehdimme jokaisen ladatun tiedoston yksilöllisestä nimestä PHP-toiminnolla uniqid().
Kyse on useiden tiedostojen lataamisesta vetämällä pudota-ominaisuutta. Toivon, että sait tietää siitä. Haluaisin kuulla ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.