首页>>表单>>jQuery无刷新多文件上传,批量上传,单独文件进度显示(2013-11-22)

jQuery无刷新多文件上传,批量上传,单独文件进度显示

jQuery无刷新多文件上传,批量上传,单独文件进度显示
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="main_container">  
  2.     <form action="upload.php" method="post" enctype="multipart/form-data">  
  3.         <input type="file" name="userfile" class="fileUpload" multiple>  
  4.           
  5.         <button id="px-submit" type="submit">上传</button>  
  6.         <button id="px-clear" type="reset">清除</button>  
  7.     </form>  
  8.     <script type="text/javascript">  
  9.         jQuery(function($){  
  10.             $('.fileUpload').fileUploader();  
  11.         });  
  12.     </script>  
  13. </div>  

 

PHP Code
  1. <?php  
  2. include("upload_class.php"); //classes is the map where the class file is stored  
  3.       
  4. $upload = new file_upload();  
  5.   
  6. $upload->upload_dir = '../upload/';  
  7. $upload->extensions = array('.png''.jpg''.pdf'); // specify the allowed extensions here  
  8. $upload->rename_file = true;  
  9.   
  10.   
  11. if(!emptyempty($_FILES)) {  
  12.     $upload->the_temp_file = $_FILES['userfile']['tmp_name'];  
  13.     $upload->the_file = $_FILES['userfile']['name'];  
  14.     $upload->http_error = $_FILES['userfile']['error'];  
  15.     $upload->do_filename_check = 'y'// use this boolean to check for a valid filename  
  16.     if ($upload->upload()){  
  17.           
  18.         echo '<div id="status">success</div>';  
  19.         echo '<div id="message">'$upload->file_copy .' Successfully Uploaded</div>';  
  20.         //return the upload file  
  21.         echo '<div id="uploadedfile">'$upload->file_copy .'</div>';  
  22.           
  23.     } else {  
  24.           
  25.         echo '<div id="status">failed</div>';  
  26.         echo '<div id="message">'$upload->show_error_string() .'</div>';  
  27.           
  28.     }  
  29. }  
  30. ?>  

upload_class.php

 

PHP Code
  1. <?php   
  2.   
  3. class file_upload {  
  4.   
  5.     var $the_file;  
  6.     var $the_temp_file;  
  7.     var $upload_dir;  
  8.     var $replace;  
  9.     var $do_filename_check;  
  10.     var $max_length_filename = 100;  
  11.     var $extensions;  
  12.     var $ext_string;  
  13.     var $language;  
  14.     var $http_error;  
  15.     var $rename_file// if this var is true the file copy get a new name  
  16.     var $file_copy// the new name  
  17.     var $message = array();  
  18.     var $create_directory = true;  
  19.     /*  
  20.     ver. 2.32  
  21.     Added vars for file and directory permissions, check also the methods move_upload() and check_dir(). 
  22.     */  
  23.     var $fileperm = 0644;  
  24.     var $dirperm = 0777;  
  25.       
  26.     function file_upload() {  
  27.         $this->language = 'en'// choice of en, nl, es  
  28.         $this->rename_file = false;  
  29.         $this->ext_string = '';  
  30.     }  
  31.     function show_error_string($br = '<br />') {  
  32.         $msg_string = '';  
  33.         foreach ($this->message as $value) {  
  34.             $msg_string .= $value.$br;  
  35.         }  
  36.         return $msg_string;  
  37.     }  
  38.     function set_file_name($new_name = '') { // this 'conversion' is used for unique/new filenames   
  39.         if ($this->rename_file) {  
  40.             if ($this->the_file == ''return;  
  41.             $name = ($new_name == '') ? uniqid() : $new_name;  
  42.             sleep(3);  
  43.             $name = $name.$this->get_extension($this->the_file);  
  44.         } else {  
  45.             $name = str_replace(' ''_'$this->the_file); // space will result in problems on linux systems  
  46.         }  
  47.         return $name;  
  48.     }  
  49.     function upload($to_name = '') {  
  50.         $new_name = $this->set_file_name($to_name);  
  51.         if ($this->check_file_name($new_name)) {  
  52.             if ($this->validateExtension()) {  
  53.                 if (is_uploaded_file($this->the_temp_file)) {  
  54.                     $this->file_copy = $new_name;  
  55.                     if ($this->move_upload($this->the_temp_file, $this->file_copy)) {  
  56.                         $this->message[] = $this->error_text($this->http_error);  
  57.                         if ($this->rename_file) $this->message[] = $this->error_text(16);  
  58.                         return true;  
  59.                     }  
  60.                 } else {  
  61.                     $this->message[] = $this->error_text($this->http_error);  
  62.                     return false;  
  63.                 }  
  64.             } else {  
  65.                 $this->show_extensions();  
  66.                 $this->message[] = $this->error_text(11);  
  67.                 return false;  
  68.             }  
  69.         } else {  
  70.             return false;  
  71.         }  
  72.     }  
  73.     function check_file_name($the_name) {  
  74.         if ($the_name != '') {  
  75.             if (strlen($the_name) > $this->max_length_filename) {  
  76.                 $this->message[] = $this->error_text(13);  
  77.                 return false;  
  78.             } else {  
  79.                 if ($this->do_filename_check == 'y') {  
  80.                     if (preg_match('/^[a-z0-9_]*.(.){1,5}$/i'$the_name)) {  
  81.                         return true;  
  82.                     } else {  
  83.                         $this->message[] = $this->error_text(12);  
  84.                         return false;  
  85.                     }  
  86.                 } else {  
  87.                     return true;  
  88.                 }  
  89.             }  
  90.         } else {  
  91.             $this->message[] = $this->error_text(10);  
  92.             return false;  
  93.         }  
  94.     }  
  95.     function get_extension($from_file) {  
  96.         $ext = strtolower(strrchr($from_file,'.'));  
  97.         return $ext;  
  98.     }  
  99.     function validateExtension() {  
  100.         $extension = $this->get_extension($this->the_file);  
  101.         $ext_array = $this->extensions;  
  102.         if (in_array($extension$ext_array)) {   
  103.             // check mime type hier too against allowed/restricted mime types (boolean check mimetype)  
  104.             return true;  
  105.         } else {  
  106.             return false;  
  107.         }  
  108.     }  
  109.     // this method is only used for detailed error reporting  
  110.     function show_extensions() {  
  111.         $this->ext_string = implode(' '$this->extensions);  
  112.     }  
  113.     function move_upload($tmp_file$new_file) {  
  114.         if ($this->existing_file($new_file)) {  
  115.             $newfile = $this->upload_dir.$new_file;  
  116.             if ($this->check_dir($this->upload_dir)) {  
  117.                 if (move_uploaded_file($tmp_file$newfile)) {  
  118.                     umask(0);  
  119.                     chmod($newfile , $this->fileperm);  
  120.                     return true;  
  121.                 } else {  
  122.                     return false;  
  123.                 }  
  124.             } else {  
  125.                 $this->message[] = $this->error_text(14);  
  126.                 return false;  
  127.             }  
  128.         } else {  
  129.             $this->message[] = $this->error_text(15);  
  130.             return false;  
  131.         }  
  132.     }  
  133.     function check_dir($directory) {  
  134.         if (!is_dir($directory)) {  
  135.             if ($this->create_directory) {  
  136.                 umask(0);  
  137.                 mkdir($directory$this->dirperm);  
  138.                 return true;  
  139.             } else {  
  140.                 return false;  
  141.             }  
  142.         } else {  
  143.             return true;  
  144.         }  
  145.     }  
  146.     function existing_file($file_name) {  
  147.         if ($this->replace == 'y') {  
  148.             return true;  
  149.         } else {  
  150.             if (file_exists($this->upload_dir.$file_name)) {  
  151.                 return false;  
  152.             } else {  
  153.                 return true;  
  154.             }  
  155.         }  
  156.     }  
  157.     /* 
  158.     ver. 2.32  
  159.     Method get_uploaded_file_info(): Replaced old n line-ends with the PHP constant variable PHP_EOL 
  160.     */  
  161.     function get_uploaded_file_info($name) {  
  162.         $str = 'File name: '.basename($name).PHP_EOL;  
  163.         $str .= 'File size: '.filesize($name).' bytes'.PHP_EOL;  
  164.         if (function_exists('mime_content_type')) {  
  165.             $str .= 'Mime type: '.mime_content_type($name).PHP_EOL;  
  166.         }  
  167.         if ($img_dim = getimagesize($name)) {  
  168.             $str .= 'Image dimensions: x = '.$img_dim[0].'px, y = '.$img_dim[1].'px'.PHP_EOL;  
  169.         }  
  170.         return $str;  
  171.     }  
  172.     // this method was first located inside the foto_upload extension  
  173.     function del_temp_file($file) {  
  174.         $delete = @unlink($file);   
  175.         clearstatcache();  
  176.         if (@file_exists($file)) {   
  177.             $filesys = eregi_replace('/','\',$file);  
  178.             $delete = @system('del $filesys'); 
  179.             clearstatcache(); 
  180.             if (@file_exists($file)) {  
  181.                 $delete = @chmod ($file, 0644);  
  182.                 $delete = @unlink($file);  
  183.                 $delete = @system('del $filesys'); 
  184.             } 
  185.         } 
  186.     } 
  187.     // this function creates a file field and if $show_alternate is true it will show a text field if the given file already exists 
  188.     // there is also a submit button to remove the text field value  
  189.     /* 
  190.     ver. 2.32  
  191.     Method create_file_field(): Minor code clean up (better code formatting and replaced double with single quotes) 
  192.     */ 
  193.     function create_file_field($element, $label = '', $length = 25, $show_replace = true, $replace_label = 'Replace old file?', $file_path = '', $file_name = '', $show_alternate = false, $alt_length = 30, $alt_btn_label = 'Delete image') { 
  194.         $field = ''; 
  195.         if ($label != '') $field = '  
  196.             <label>'.$label.'</label>'; 
  197.         $field = '  
  198.             <input type="file" name="'.$element.'" size="'.$length.'" />'; 
  199.         if ($show_replace) $field .= '  
  200.             <span>'.$replace_label.'</span>  
  201.             <input type="checkbox" name="replace" value="y" />'; 
  202.         if ($file_name != '' && $show_alternate) { 
  203.             $field .= '  
  204.             <input type="text" name="'.$element.'" size="'.$alt_length.'" value="'.$file_name.'" readonly="readonly"'; 
  205.             $field .= (!@file_exists($file_path.$file_name)) ? ' title="'.sprintf($this->error_text(17), $file_name).'" />' : ' />'; 
  206.             $field .= '  
  207.             <input type="checkbox" name="del_img" value="y" />  
  208.             <span>'.$alt_btn_label.'</span>'; 
  209.         }  
  210.         return $field; 
  211.     } 
  212.     // some error (HTTP)reporting, change the messages or remove options if you like. 
  213.     /* ver 2.32  
  214.     Method error_text(): Older Dutch language messages are re-written, thanks Julian A. de Marchi. Added HTTP error messages (error 6-7 introduced with newer PHP versions, error no. 5 doesn't exists)   
  215.     */  
  216.     function error_text($err_num) {  
  217.         switch ($this->language) {  
  218.             case 'nl':    
  219.             $error[0] = 'Bestand <b>'.$this->the_file.'</b> staat nu op de server.';  
  220.             $error[1] = 'Dit bestand is groter dan de toegestaane upload bestandgrootte in de server configuratie.';  
  221.             $error[2] = 'Dit bestand is groter dan de MAX_FILE_SIZE parameter welke in de html formulier werdt gespecificiëerd.';  
  222.             $error[3] = 'De upload is helaas mislukt.  Slechts een deel van het bestand is bij de server aangekomen.  Probeer het opnieuw.';  
  223.             $error[4] = 'De upload is helaas mislukt.  Geen betrouwbare verbinding met de server kwam tot stand.  Probeer het opnieuw.';  
  224.             $error[6] = 'De map voor tijdelijke opslag ontbreekt. ';  
  225.             $error[7] = 'Het schrijven op de server is mislukt. ';  
  226.             $error[8] = 'Een PHP extensie is gestopt tijdens het uploaden. ';  
  227.             // end  http errors  
  228.             $error[10] = 'Selecteer een bestand om te uploaden.';  
  229.             $error[11] = 'Uitsluitend bestanden van de volgende types zijn toegestaan: <b>'.$this->ext_string.'</b>';  
  230.             $error[12] = 'Helaas heeft het gekozen bestand karakters die niet zijn toegestaan. Gebruik uitsluitend cijfers, letters, en onderstrepen. <br>Een geldige naam eindigt met een punt met daarop volgend het extensietype.';  
  231.             $error[13] = 'De bestandsnaam is echter te lang, en mag een maximum van '.$this->max_length_filename.' tekens bevatten.';  
  232.             $error[14] = 'De gekozen map werdt niet gevonden.';  
  233.             $error[15] = 'Een bestand met dezelfde naam ('.$this->the_file.') bestaat al op de server.  Probeer opnieuw met een andere naam.';  
  234.             $error[16] = 'Op de server werdt het bestand hernoemd tot <b>'.$this->file_copy.'</b>.';  
  235.             $error[17] = 'Het bestand %s bestaat niet.';  
  236.             break;  
  237.             case 'de':  
  238.             $error[0] = 'Die Datei: <b>'.$this->the_file.'</b> wurde hochgeladen!';   
  239.             $error[1] = 'Die hochzuladende Datei ist größer als der Wert in der Server-Konfiguration!';   
  240.             $error[2] = 'Die hochzuladende Datei ist größer als der Wert in der Klassen-Konfiguration!';   
  241.             $error[3] = 'Die hochzuladende Datei wurde nur teilweise übertragen';   
  242.             $error[4] = 'Es wurde keine Datei hochgeladen';  
  243.             $error[6] = 'Der temporäre Dateiordner fehlt';  
  244.             $error[7] = 'Das Schreiben der Datei auf der Festplatte war nicht möglich.';  
  245.             $error[8] = 'Eine PHP Erweiterung hat während dem hochladen aufgehört zu arbeiten. ';   
  246.               
  247.             $error[10] = 'Wählen Sie eine Datei aus!.';   
  248.             $error[11] = 'Es sind nur Dateien mit folgenden Endungen erlaubt: <b>'.$this->ext_string.'</b>';  
  249.             $error[12] = 'Der Dateiname enthält ungültige Zeichen. Benutzen Sie nur alphanumerische Zeichen für den Dateinamen mit Unterstrich. <br>Ein gültiger Dateiname endet mit einem Punkt, gefolgt von der Endung.';   
  250.             $error[13] = 'Der Dateiname überschreitet die maximale Anzahl von '.$this->max_length_filename.' Zeichen.';   
  251.             $error[14] = 'Das Upload-Verzeichnis existiert nicht!';   
  252.             $error[15] = 'Upload <b>'.$this->the_file.'...Fehler!</b> Eine Datei mit gleichem Dateinamen existiert bereits.';  
  253.             $error[16] = 'Die hochgeladene Datei ist umbenannt in <b>'.$this->file_copy.'</b>.';  
  254.             $error[17] = 'Die Datei %s existiert nicht.';  
  255.             break;  
  256.             //  
  257.             // place here the translations (if you need) from the directory 'add_translations'  
  258.             //  
  259.             default:  
  260.             // start http errors  
  261.             $error[0] = 'File: <b>'.$this->the_file.'</b> successfully uploaded!';  
  262.             $error[1] = 'The uploaded file exceeds the max. upload filesize directive in the server configuration.';  
  263.             $error[2] = 'The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the html form.';  
  264.             $error[3] = 'The uploaded file was only partially uploaded';  
  265.             $error[4] = 'No file was uploaded';  
  266.             $error[6] = 'Missing a temporary folder. ';  
  267.             $error[7] = 'Failed to write file to disk. ';  
  268.             $error[8] = 'A PHP extension stopped the file upload. ';  
  269.               
  270.             // end  http errors  
  271.             $error[10] = 'Please select a file for upload.';  
  272.             $error[11] = 'Only files with the following extensions are allowed: <b>'.$this->ext_string.'</b>';  
  273.             $error[12] = 'Sorry, the filename contains invalid characters. Use only alphanumerical chars and separate parts of the name (if needed) with an underscore. <br>A valid filename ends with one dot followed by the extension.';  
  274.             $error[13] = 'The filename exceeds the maximum length of '.$this->max_length_filename.' characters.';  
  275.             $error[14] = 'Sorry, the upload directory does not exist!';  
  276.             $error[15] = 'Uploading <b>'.$this->the_file.'...Error!</b> Sorry, a file with this name already exitst.';  
  277.             $error[16] = 'The uploaded file is renamed to <b>'.$this->file_copy.'</b>.';  
  278.             $error[17] = 'The file %s does not exist.';  
  279.         }  
  280.         return $error[$err_num];  
  281.     }  
  282. }  
  283. ?>  

 


原文地址:http://www.freejs.net/article_biaodan_109.html