javascript代码实例教程-jQuery无刷新多文件上传,批量上传,单独文件进度显示

发布时间:2019-02-18 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery无刷新多文件上传,批量上传,单独文件进度显示脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

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

javascript代码实例教程-jQuery无刷新多文件上传,批量上传,单独文件进度显示

演示

 

XML/HTML Code
  1.  

    •  
    •  
  2. <script tyPE=text/javascript>
  3. jquery(function($){
  4. $('.fileUpload').fileUploader();
  5. });
  6. </script>
  7.  

    PHP Code
    1. include(upload_class.php); //classes is the map where the class file is Stored
    2.  
    3. $upload = new file_upload();
    4.  
    5. $upload->upload_dir = &#39;../upload/';
    6. $upload->extensions = array('.png', '.jpg', '.pDF'); // specify the Allowed extensions here
    7. $upload->rename_file = true;
    8.  
    9.  
    10. if(!emptyempty($_FILES)) {
    11. $upload->the_temp_file = $_FILES['userfile']['tmp_name'];
    12. $upload->the_file = $_FILES['userfile']['name'];
    13. $upload->http_error = $_FILES['userfile']['error'];
    14. $upload->do_filename_check = 'y'; // use this boolean to check for a valid filename
    15. if ($upload->upload()){
    16.  
    17. echo '

      success

      ';
    18. echo '

      '. $upload->file_copy .' Successfully Uploaded

      ';
    19. //return the upload file
    20. echo '

      '. $upload->file_copy .'

      ';
    21.  
    22. } else {
    23.  
    24. echo '

      failed

      ';
    25. echo '

      '. $upload->show_error_string() .'

      ';
    26.  
    27. }
    28. }
    29. ?>

      upload_class.php

       

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

         

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery无刷新多文件上传,批量上传,单独文件进度显示全部内容,希望文章能够帮你解决javascript代码实例教程-jQuery无刷新多文件上传,批量上传,单独文件进度显示所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。