Curs Javascript

Script-ul JavaScript din acest tutorial verifica numele (extensia) fisierului adaugat intr-un formular pentru upload.
Puteti adauga /sterge lista de extensii permise in variabila "ar_ext" din script.
Acest script separa numele si extensia fisierului si adauga numele intr-un camp text.
Daca extensia fisierului este in lista permisa, activeaza butonul "Submit", altfel, sterge valoarea din campul "file", dezactiveaza butonul "Submit" si afiseaza o fereastra Alert.
<form action="upload.php" method="post" id="idf" enctype="multipart/form-data">
 Upload file: <input type="file" name="fup" onchange="checkName(this, 'fname', 'submit')" /><br />
 File name: <input type="text" value="" name="denumire" id="fname" /><br />
 <input type="submit" name="submit" id="submit" value="Submit" disabled="disabled" />
</form>
<script type="text/javascript"><!--
var ar_ext = ['pdf', 'gif', 'jpe', 'jpg'];        // array cu extensiile permise

function checkName(el, to, sbm) {
// - marplo.net
  // preia numele fisierului si separa nume si extensia
  var name = el.value;
  var ar_name = name.split('.');

  // pt. IE - separa directoarele (\) de nume
  var ar_nm = ar_name[0].split('\\');
  for(var i=0; i<ar_nm.length; i++) var nm = ar_nm[i];

  // adauga numele in 'to'
  document.getElementById(to).value = nm;

  // verifica extensia
  var re = 0;
  for(var i=0; i<ar_ext.length; i++) {
    if(ar_ext[i] == ar_name[1]) {
      re = 1;
      break;
    }
  }

  // daca re are valoarea 1, extensia este in list permisa
  if(re==1) {
    // activeaza submit
    document.getElementById(sbm).disabled = false;
  }
  else {
    // sterge numele fisierului, dezactiveaza Submit, afiseaza Alert
    el.value = '';
    document.getElementById(sbm).disabled = true;
    alert('".'+ ar_name[1]+ '" nu este un tip de fisier permis');
  }
}
--></script>
Fisierul "upload.php" trebuie sa contina un script PHP care sa preia si sa copieze fisierul pe server. Mai jos este script-ul pentru "upload.php".

Cod upload.php

<?php 
// Script de la https://marplo.net/ (Transfera fisiere pe server)

// 1. Creati intai directorul cu numele 'uploads' (in acelasi director cu pagina dv. de upload) in care se vor copia fisierele
// 2. Acordati directorului 'uploads' permisiuni CHMOD 0777
// 3. introduceti tot acest cod intr-un fisier .php 

// Aici puteti modifica numele directorului de upload (daca ati pus alt nume)
$uploadpath = "uploads/";

// Aici este setata marimea maxima, in KiloBytes, care este permisa (dar marime maxima depinde si de setarile serverului)
$max_size = 500;

// Aici puteti schimba tipul, extensia fisierelor permise pt. upload
$allowtype = array('pdf', 'gif', 'jpg', 'jpe');

if(isset($_POST['submit'])) {
  if (isset ($_FILES['fup'])) {
    $uploadpath = $uploadpath . basename( $_FILES['fup']['name']);
	$type = end(explode(".", strtolower($_FILES['fup']['name'])));

    // Daca fisierul are extensia permisa
    if (in_array($type, $allowtype)) {
	  // Verifica daca fisierul are marimea permisa
	  if ($_FILES['fup']['size']<=$max_size*1000) {
        if(move_uploaded_file($_FILES['fup']['tmp_name'], $uploadpath)) { 
          echo "Fisierul:<b> ". basename( $_FILES['fup']['name']). "</b> a fost incarcat cu succes:"; 
          echo "<br />Tipul fisieului:<b> ". $_FILES['fup']['type'] ."</b>"; 
          echo "<br />Marime  (<i>in Bytes</i>): <b>". $_FILES['fup']['size'] ."</b><br /><br />";
		  echo 'Link catre fisierul incarcat: <b>http://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['REQUEST_URI']).'/'.$uploadpath.'</b>';
        }
        else { 
          echo "<b>A aparut o eroare la urcarea fisierului pe server, <br /> posibil ca marimea fisierului sa depaseasca permisiunile setate de server.</b>"; 
        }
	  }
	  else { echo 'Fisierul <b>'. $_FILES['fup']['name']. '</b> depaseste marimea permisa de maxim <i><b>'. $max_size. 'KB</b></i>'; }
    }
	else { echo 'Fisierul <b>'. $_FILES['fup']['name']. '</b> nu are tipul de extensie permis'; }
  }
}
?>

Puteti testa script-ul JavaScript cu formularul urmator (tipuri permise: PDF, GIF, JPE, and JPG):
Upload file:
File name:

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care meta tag se foloseste pentru scurta descriere a paginii?
<meta content="..."> <meta description="..."> <meta http-equiv="...">
<meta name="description" content="70-160 caractere ce descriu continutul paginii" />
Ce proprietate CSS opreste efectul dat de "float"?
clear text-align position
#some_id {
  clear: both;
}
Clic pe metoda ce creaza un array cu toate elementele din pagina cu un anumit nume de tag.
getElementsByName() getElementById() getElementsByTagName()
var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);
Indicati functia PHP ce returneaza numarul de elemente dintr-un array.
is_[) count() strlen()
$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4
Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "I live (happy)".
happly happily hapily
I live happily.
- Traiesc fericit (in mod fericit).
Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "Vivo (feliz)".
felizamente felizmente felices
Vivo felizmente.
- Traiesc fericit (cu fericire).
Verificare tip fisier pentru upload

Last accessed pages

  1. Cursuri Limba Germana (6587)
  2. Creare formulare (9204)
  3. Curs HTML gratuit Tutoriale HTML5 (196993)
  4. Curs de Miracole (4407)
  5. Instructiuni conditionale if, else, switch (20026)

Popular pages this month

  1. Curs HTML gratuit Tutoriale HTML5 (771)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (740)
  3. Coduri pt culori (585)
  4. Creare si editare pagini HTML (260)
  5. Formatare text in pagina html (235)