Acesta este un script de upload prin care pot fi incarcate mai multe fisiere in acelasi timp.
Scriptul foloseste JavaScript si PHP. Poate fi implementat si folosit atat in pagini HTML cat si PHP, dar serverul trebuie sa ruleze PHP.
Incarcarea fisierelor se face fara reincarcarea paginii, astfel, un eventual refresh nu va retrimite datele la server.

- Aici puteti vedea cum functioneaza. Este doar pt. test, in realitate nu va incarca nici un fisier pe server.

Testare



Adauga casuta upload

Scriptul e format doua fisiere principale: - Mai jos aveti codul pt. fiecare in parte

uploader.php

<?php
$updir = 'upload';    // Directorul pt. upload
$max_size = 500;      // Marimea maxima, in KiloBytes, care este permisa

// Seteaza matricea cu tipurile de fisiere permise
$allowtype = array('bmp', 'flv', 'gif', 'jpg', 'jpeg', 'mp3', 'pdf', 'png', 'rar', 'zip');

// Creaza directorul din $updir (cu CHMOD 077), daca nu exista
if(!is_dir($updir)) mkdir($updir, 0777);

/** Incarcarea imaginii pe server **/

$rezultat = array();
// Daca este primit din formular un fisier valid
if(isset ($_FILES['file_up'])){
  // Seteaza pt. upload fisierele primite (pot fi primite din mai multe campuri 'file_up')
  for($f=0; $f<count($_FILES['file_up']['name']); $f++){
    // Verifica daca fisierul are tipul de extensie permis
    $ar_ext = explode(".", strtolower($_FILES['file_up']['name'][$f]));
    $type = end($ar_ext);
    if(in_array($type, $allowtype)){
      // Verifica daca fisierul are marimea permisa
      if($_FILES['file_up']['size'][$f]<=$max_size*1000){
        // Daca nu sunt erori in procesul de copiere
        if($_FILES['file_up']['error'][$f]==0){
        // Seteaza locatia si numele pt. incarcare pe server
          $thefile = $updir . "/" . $_FILES['file_up']['name'][$f];
          // Daca fisierul nu poate fi incarcat, returneaza mesaj
          if(!move_uploaded_file ($_FILES['file_up']['tmp_name'][$f], $thefile)) $rezultat[$f] = ' Fisierul nu a putut fi copiat, incercati din nou';
          else $rezultat[$f] = '<b>'.$_FILES['file_up']['name'][$f].'</b>';  // Retine numele fisierului incarcat
        }
      }
    else { $rezultat[$f] = 'Fisierul <b>'. $_FILES['file_up']['name'][$f]. '</b> depaseste marimea permisa de maxim <i>'. $max_size. 'KB</i>'; }
    }
    else { $rezultat[$f] = 'Fisierul <b>'. $_FILES['file_up']['name'][$f]. '</b> nu are tipul de extensie permis'; }
  }

   // Returneaza rezultatul
  $rezultat2 = implode('<br> ', $rezultat);
  echo '<h4>Fisiere incarcate:</h4>'.$rezultat2;
}

upload.js

// Functia care adauga o noua casuta de upload in formular
function add_upload(form_id){
  // Elementul inaintea caruia e adaugat cel nou
  var element = document.getElementById('sub');

  // Creaza elementul nou <input>, si atributele lui
  var new_el = document.createElement('input');
  new_el.setAttribute('type', 'file');
  new_el.setAttribute('name', 'file_up[]');
  document.getElementById(form_id).insertBefore(new_el, element);
}

// Functia care trimite datele din formular, fiind transferate la iframe
function uploading(theform){
  // Adauga codul cu iframe-ul
  document.getElementById('ifrm').innerHTML = '<iframe id="uploadframe" name="uploadframe" src="uploader.php" frameborder="0"></iframe>';

  theform.submit();    // Executa trimiterea datelor

  // Reinoeste formularul
  document.getElementById('uploadform').innerHTML = '<input type="file" id="test" class="file_up" name="file_up[]" /><input type="submit" value="UPLOAD" id="sub" />';
  return false;
}

- Mod de utilizare

- Creati cele doua fisiere de mai sus pe server (cu numele si codul date mai sus), in acelasi director unde se afla pagina (.html sau .php) in care doriti sa folositi scriptul.
- In pagina respectiva adaugati urmatorul cod (in locul unde doriti sa apara formularul pt. upload):
<div id="ifrm"> </div>
<form id="uploadform" action="uploader.php" method="post" enctype="multipart/form-data" target="uploadframe" onsubmit="uploading(this); return false">
  <input type="file" class="file_up" name="file_up[]" />
  <input type="submit" value="UPLOAD" id="sub" />
</form>
<script type="text/javascript" src="upload.js"></script>
<a href="#" onclick="add_upload('uploadform'); return false;" title="Adauga element nou">Adauga casuta upload</a>

- Pentru a fi afisate unele sub altele casutele de upload din formular, adaugati in pagin urmatorul cod CSS, in sectiunea HEAD:
<style type="text/css">
#uploadform input {
  display:block; 
  margin:3px auto;
}
</style>

Precizari:

- Directorul in care sunt incarcate fisierele are denumirea "upload" (poate fi modificata din "uploader.php", variabila "$updir") si scriptul e construit sa creeze singur acest director, daca PHP are permisiunea de creare directoare pe server. Daca nu poate crea directorul, sau dupa ce l-a creat nu i-a setat CHMOD 0777 si afiseaza o eroare ca fisierul nu a putut fi incarcat, trebuie sa-l creati manual, cu denumirea upload (in acelasi loc in care ati copiat fisierele scriptului) sau /si sa setati CHMOD 0777.
- Tipul fisierelor permise pentru upload (extensia lor) poate fi modificat din variabila "$allowtype"
- Marimea fisierelor, in KiloBytes, permisa pt. upload poate fi modificata la variabila "$max_size", initial 500 KB (Marimea maxima a fisierelor care pot fi transferate depinde si de setarile facute in configurarea serverului)
- Daca incarcati fisiere care au aceasi denumire si extensie cu altele deja incarcate, cele noi le vor suprascrie (inlocui) pe cele vechi.

In arhiva pe care o puteti descarca de la Download (din partea dreapta-sus a paginii) gasiti scriptul complet si un fisier de test dupa care sa va ghidati sau sa-l folositi pe server.

Scriptul este gratuit, il pteti modifica si folosi dupa cum doriti.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tip de <input> creaza o paleta de culori pentru selectare culoare?
type="text" type="color" type="date"
<input type="color" name="get_color" />
Care metoda CSS roteste elementul HTML la un anumit numar de grade?
scale() translate() rotate()
#some_id:hover {
  transform: rotate(60deg);
  -ms-transform: rotate(60deg);    /* IE 9 */
  -moz-transform: rotate(60deg);   /* Firefox */
}
Click pe functia care returneaza numarul cel mai mare.
pow() min() max()
var maxn = Math.max(8, 4, 88, 56);
alert(maxn);      // 88
Ce functie previne ca un fisier sa fie inclus mai mult de o data intr-o pagina?
include() include_once() require()
include_once("un_fisier.php");
Care este traducerea corecta pentru: "Ahead of time"?
Peste timp La timp Inainte de vreme
Most people arrived ahead of time.
- Cei mai multi oameni au sosit inainte de vreme (prea devreme).
Indicati traducerea corecta a cuvantului "buenĂ­simo"
mai bun mai putin bun extrem de bun
Este fruto es buenĂ­simo.
- Acest fruct este extrem /nemaipomenit de bun.
Script Multi-Uploader

Last accessed pages

  1. Conditional IF in Limba Engleza - Fraze Conditionale (58983)
  2. Curs PHP MySQL, Tutoriale si Scripturi PHP (48406)
  3. Creare si editare pagini HTML (43507)
  4. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (121325)
  5. Curs HTML gratuit Tutoriale HTML5 (79822)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (951)
  2. Curs HTML gratuit Tutoriale HTML5 (688)
  3. Curs PHP MySQL, Tutoriale si Scripturi PHP (636)
  4. Curs si Tutoriale JavaScript (634)
  5. Curs si Tutoriale Ajax (625)