JQuery/PHP Multi Datei und Bilder Upload mit Uploadify

Gepostet am Februar 15, 2012

Eine sehr gut JQuery Komponente um Bilder oder andere Dateien auf einen Server zu laden ist Uploadify (http://www.uploadify.com). An dieser Stelle möchte ich diese Komponente empfehlen und gleichzeitig auf ein kleines Sicherheitsproblem hinweisen.

Die Einbindung ist ganz einfach:

1. Einbinden aller nötigen Header-Daten (JQuery, uploadify.css, jquery.uploadify.v2.1.4.js)
2. Folgenden Code Einbinden:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="status-message"></div>
<div id="custom-queue"></div>
<input id="custom_file_upload" type="file" name="file_upload" />
 
<script type="text/javascript">
 
$(function() {
  $('#custom_file_upload').uploadify({
  'uploader'       : '/lib/uploadify/uploadify.swf',
  'script'         : '/admin/upload/image/',
  'cancelImg'      : '/lib/uploadify/cancel.png',
  'folder'         : '/images',
  'multi'          : true,
  'auto'           : true,
  'fileExt'        : '*.jpg;*.gif;*.png',
  'fileDesc'       : 'Image Files (.JPG, .GIF, .PNG)',
  'queueID'        : 'custom-queue',
  'queueSizeLimit' : 3,
  'simUploadLimit' : 3,
  'sizeLimit'   : 102400,
  'removeCompleted': false,
  'onSelectOnce'   : function(event,data) {
      $('#status-message').text(data.filesSelected + ' files have been added to the queue.');
    },
  'onAllComplete'  : function(event,data) {
      $('#status-message').text(data.filesUploaded + ' files uploaded, ' + data.errors + ' errors.');
    }
  });				
});
 
</script>

Achtung vor falschem Dateityp


Im Auswahlfenster zum Uplaod einer Datei ist zwar zu Beginn der Filer auf (jpg, gif, png) gesetzt, schreibt man dann aber in den Dateinamen *.* und klickt auf Öffnen, können alle Datei-Typen ausgewählt und hochgeladen werden. Daher muss unbedingt der Dateityp nach dem Upload durch php geprüft werden!

Tags: , ,

Leave a Reply

 

Posts of Current Category



Facebook: