jquery και front end check file size

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
wdesignergr
Δημοσιεύσεις: 23
Εγγραφή: 28 Μάιος 2010 01:21

jquery και front end check file size

Δημοσίευση από wdesignergr » 14 Μάιος 2013 12:12

Καλησπέρα παιδιά,

Επιστρέφω σε εσάς με κάποιες ερωτήσεις jquery.

Μία μικρή εισαγωγή:
Έχω μία upload form στην οποία ο πελάτης μου μπορεί να ανεβάσει φωτογραφίες σε έναν tmp folder στον server μου. Έπειτα από το upload χρησιμοποιώ την GD Library για να κάνω resize την εικόνα, ώστε να μην σπαταλάει storage από τον server και την μεταφέρω στον κατάλληλο folder (με rename).
Το πρόβλημα δημιουργήθηκε όταν ο πελάτης μου προσπάθησε να ανεβάσει 20mb φωτογραφία. Η φωτογραφία ανέβηκε αλλά δεν έγινε resize διότι δεν είχε ram για να προχωρήσει η διαδικασία, καθότι βρίσκομαι σε shared server.
Η λύση που βρήκα ονομάζεται ImageMagick Library. Η συγκεκριμενη library, καταναλώνει ελάχιστη ram και έπειτα τραβάει πόρους μόνο από το σκληρό δίσκο για το resize. Δυστυχώς κανείς από τους 3 shared server μου δεν έχει προεγκατεστημένη την ImageMagick Library.
Με τα πολλά διαπίστωσα πως πρέπει να θέσω όριο στον πελάτη μου τα 2mb/photo.
Θα κάνω πρώτο έλεγχο με jquery/html5. (front end)
Δεύτερο έλεγχο με php. (back end)(για σιγουριά και για παλιούς browser που δεν υποστηρίζουν html5)


Στο θέμα μας :)
Θα ήθελα να αναγνωρίζω το filesize front end και να απενεργοποιώ το submit button, βγάζοντας ένα alert αν η εικόνα είναι μεγαλύτερη από 2mb.

Σαν αρχάριος στην jquery κατάφερα να βλέπω το size της εικόνας με jquery/html5:

Κώδικας: Επιλογή όλων

<!doctype html>
<html>
<head>
	<meta charset='utf-8' />
	<title>Check File Size Before User Upload it</title>
	<script type='text/javascript' src='http&#58;//code.jquery.com/jquery-1.7.1.js'></script>
	<script>
		$&#40;document&#41;.ready&#40;function&#40;&#41; &#123;
		   $&#40;"#flUpload"&#41;.change&#40;function &#40;&#41; 
		   &#123; 
			 var iSize = &#40;$&#40;"#flUpload"&#41;&#91;0&#93;.files&#91;0&#93;.size / 1024&#41;; 
			 if &#40;iSize / 1024 > 1&#41; 
			 &#123; 
				if &#40;&#40;&#40;iSize / 1024&#41; / 1024&#41; > 1&#41; 
				&#123; 
					iSize = &#40;Math.round&#40;&#40;&#40;iSize / 1024&#41; / 1024&#41; * 100&#41; / 100&#41;;
					$&#40;"#lblSize"&#41;.html&#40; iSize + "Gb"&#41;; 
				&#125;
				else
				&#123; 
					iSize = &#40;Math.round&#40;&#40;iSize / 1024&#41; * 100&#41; / 100&#41;
					$&#40;"#lblSize"&#41;.html&#40; iSize + "Mb"&#41;; 
				&#125; 
			 &#125; 
			 else 
			 &#123;
				iSize = &#40;Math.round&#40;iSize * 100&#41; / 100&#41;
				$&#40;"#lblSize"&#41;.html&#40; iSize  + "kb"&#41;; 
			 &#125;    
		  &#125;&#41;; 
		&#125;&#41;;	
	</script>
</head>
<body>
<form method='post' action='hi.php'>
  <p>Select file &#58; <input type="file" id="flUpload" /></p>
  <p>File Size is &#58; <b><label id="lblSize" /></b></p>
  <p><input type='submit' /></p>
</form>
Επίσης βρήκα τον τρόπο να απενεργοποιώ το submit button.

Κώδικας: Επιλογή όλων

if&#40;lblSize > 2&#41;&#123;
  alert&#40;"You must select an image lower than 2mb."&#41;;
  $&#40;'#submit_postcode'&#41;.attr&#40;'disabled', 'disabled'&#41;;
&#125;
Δυστηχώς δεν μπορώ με τίποτα να τα συνδυάσω.
Κάποια βοήθεια;

Ευχαριστώ πολύ!

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

jquery και front end check file size

Δημοσίευση από alou » 14 Μάιος 2013 13:18

Δεν ξέρω γιατί κάνεις όλες τις μετατροπές με το / 1024, προφανώς το script το έκανες έτσι copy. θεωρώντας ότι θες max file size 2MB:

Κώδικας: Επιλογή όλων



   <script>
      $&#40;document&#41;.ready&#40;function&#40;&#41; &#123;
         $&#40;"#flUpload"&#41;.change&#40;function &#40;&#41;  &#123;
          var iSize = parseFloat&#40;$&#40;"#flUpload"&#41;&#91;0&#93;.files&#91;0&#93;.size / 1024 / 1024&#41;.toFixed&#40;2&#41;; //to kanoume MB me 2 dekadika
          if &#40;iSize > 2&#41; &#123; 
             alert&#40;'Δεν επιτρέπεται upload άνω των 2 MB. Το αρχείο σου είναι ' +  iSize + ' MB'&#41;;
             $&#40;"input&#91;type=submit&#93;"&#41;.attr&#40;'disabled', 'disabled'&#41;; 
            &#125; else &#123;
               $&#40;"input&#91;type=submit&#93;"&#41;.removeAttr&#40;"disabled"&#41;;
            &#125;
        &#125;&#41;;
      &#125;&#41;;   
   </script>
</head>
<body>
<form method='post' action='hi.php'>
  <p>Select file &#58; <input type="file" id="flUpload" /></p>
  <p>File Size is &#58; <b><label id="lblSize" /></b></p>
  <p><input type='submit'  disabled="disabled" /></p>
</form> 
Τελευταία επεξεργασία από το μέλος alou την 14 Μάιος 2013 13:45, έχει επεξεργασθεί 1 φορά συνολικά.

wdesignergr
Δημοσιεύσεις: 23
Εγγραφή: 28 Μάιος 2010 01:21

jquery και front end check file size

Δημοσίευση από wdesignergr » 14 Μάιος 2013 13:34

Σε ευχαριστώ πάρα πολύ για την άμεση απάντηση. :)

Τα mb είναι περιττά σωστά.

Δυστυχώς με το παραπάνω το submit button είναι πάντα disabled. :/
Ούτε φαίνεται κάποιο alert message :/ (δοκίμασα με 2 εικόνες/ η 1η 400kb η 2η 10mb)

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

jquery και front end check file size

Δημοσίευση από alou » 14 Μάιος 2013 13:46

Μια χαρά δουλεύει όπως το θες, αλλά είχα ένα τυπογραφικό.

Δες και εδώ
http://alou.gr/demos/filesize-js-check.html
και πάρτο όπως είναι αν θες.

wdesignergr
Δημοσιεύσεις: 23
Εγγραφή: 28 Μάιος 2010 01:21

jquery και front end check file size

Δημοσίευση από wdesignergr » 14 Μάιος 2013 13:51

Δουλεύει Τέλεια. Σε ευχαρστώ πολύ!

mpempe
Δημοσιεύσεις: 156
Εγγραφή: 23 Ιουν 2003 02:48
Τοποθεσία: peloponisos

jquery και front end check file size

Δημοσίευση από mpempe » 15 Μάιος 2013 17:40

Πάρα πολύ χρήσιμο το script που δώσατε.

Θα μπορούσε παράλληλα με το μέγεθος της εικόνας να κάνει έλεγχο και των διαστάσεων?

Π.χ θέλουμε οι εικόνες που θα ανεβάσει ο χρήστης να είναι συγκεκριμένων διαστάσεων. Π.χ. 1000 χ 600 pixel.

Θα μπορούσε το script αν ο χρήστης προσπαθούσε να ανεβάσει διαφορετικών διαστάσεων εικόνα να το καταλάβει και να του βγάλει κάποιο alert?

mpempe
Δημοσιεύσεις: 156
Εγγραφή: 23 Ιουν 2003 02:48
Τοποθεσία: peloponisos

jquery και front end check file size

Δημοσίευση από mpempe » 15 Μάιος 2013 18:40

Για έλεγχο των διαστάσεων βρήκα αυτό το script.
http://jsfiddle.net/3f4cC/34/
Αλλα στην προσπάθεια μου τα τα συνδιάσω δε τα κατάφερα.

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

jquery και front end check file size

Δημοσίευση από alou » 15 Μάιος 2013 20:09

Πρόχειρα, κάπως έτσι:
http://alou.gr/demos/js-check-size-width-height.html

Υπόψιν ότι καλά όλα αυτά με js και HTML5 αλλά για usability και μόνο, αν δεν γίνει καλός server side έλεγχος στο upload ενδέχονται προβλήματα.

mpempe
Δημοσιεύσεις: 156
Εγγραφή: 23 Ιουν 2003 02:48
Τοποθεσία: peloponisos

jquery και front end check file size

Δημοσίευση από mpempe » 15 Μάιος 2013 22:15

alou ευχαριστώ
να ρωτήσω και κάτι άλλο

αν θελω συγκεκριμένη ανάλυση, δημαδή μόνο 900χ600
το
if (platos < 900 && ipsos < 600 && megethos < 2)
μπορώ να το κάνω
if (platos = 900 && ipsos = 600 && megethos < 2)
δε μου δουλευει έτσι

http://jsfiddle.net/3f4cC/37/

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

jquery και front end check file size

Δημοσίευση από alou » 15 Μάιος 2013 22:31

if (platos === 900 && ipsos === 600 && megethos < 2)

mpempe
Δημοσιεύσεις: 156
Εγγραφή: 23 Ιουν 2003 02:48
Τοποθεσία: peloponisos

jquery και front end check file size

Δημοσίευση από mpempe » 16 Μάιος 2013 09:44

πάρα πολυ καλά
νασαι καλα alou

ευχαριστώ

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες