jquery php ajax多图片上传.上传进度,生成缩略图

时间：2023-03-08 20:57:01

本例用到其他2个php class.upload.php和 functions.php还有css和js以及img文件

下载地址为www.freejs.net/demo/91/down.zip

jquery php ajax多图片上传.上传进度,生成缩略图
JavaScript Code
  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. $("#filelist").niceScroll({
  4. cursorwidth: "8px",
  5. cursorborderradius: "0px",
  6. cursoropacitymin: 0.1,
  7. cursoropacitymax: 0.3
  8. });
  9. $(".side-pane").niceScroll({
  10. cursorwidth: "8px",
  11. cursorborderradius: "0px",
  12. cursoropacitymin: 0.1,
  13. cursoropacitymax: 0.3
  14. });
  15. $(".time").timeago();
  16. });
  17. </script>
XML/HTML Code
  1. <script type="text/javascript">
  2. // <![CDATA[
  3. $('#upload_button').click(function() {
  4. $('.side-pane').html('');
  5. $('#upload_button').hide();
  6. $('#pickfiles').hide();
  7. $('#upload_info').show();
  8. $('#upload_info').css("display","inherit");
  9. uploader.start();
  10. $('#filelist').block({
  11. message: '<center><div class="start-message">Upload in Progress</div></center>',
  12. css: {
  13. border: 'none',
  14. backgroundColor: 'none'
  15. },
  16. overlayCSS: {
  17. backgroundColor: '#fff',
  18. opacity: '0',
  19. cursor: 'wait'
  20. }
  21. });
  22. });
  23. var uploader = new plupload.Uploader({
  24. runtimes : 'flash, html5',
  25. browse_button : 'pickfiles',
  26. container : 'uploader',
  27. max_file_size : '10mb',
  28. url : 'upload.php',
  29. flash_swf_url : 'uploader/uploader.swf',
  30. filters : [
  31. { title : "Image files", extensions : "jpg,jpeg,gif,png" }
  32. ]
  33. });
  34. uploader.bind('Init', function(up, params) {});
  35. uploader.init();
  36. uploader.bind('FilesAdded', function(up, files) {
  37. /*
  38. @@ Show / hide various elements
  39. */
  40. $('.upload-message').hide();
  41. $('.info-message').hide();
  42. $('#upload_button').show();
  43. $('#filelist_header').show();
  44. $.each(files, function(i, file) {
  45. $('#filelist').append(
  46. '<div id="' + file.id + '" class="filecontainer">' +
  47. '<div class="filename"> '+file.name + '</div>'+
  48. '<div class="filesize">' + plupload.formatSize(file.size) + '</div>'+
  49. '<div class="filestatus" id="status_'+file.id+'">0%</div>'+
  50. '<div class="filedel"><a id="remove_'+file.id+'" href="javascript:;"><img src="img/uploader/delete.gif" /></a></div>' +
  51. '</div>');
  52. $('#remove_'+file.id).click(function(e) {
  53. uploader.removeFile(file)
  54. $('#'+file.id).hide('slow', function() { ('#'+file.id).remove(); });
  55. });
  56. });
  57. up.refresh();
  58. $('#filelist').animate({scrollTop: $('#filelist').attr("scrollHeight")}, 1500);
  59. });
  60. uploader.bind('UploadProgress', function(up, file) {
  61. $('#status_' + file.id).html(file.percent + "%");
  62. if(file.percent == 100) {
  63. $('#' + file.id).block({
  64. message: '',
  65. css: {
  66. border: 'none',
  67. backgroundColor: 'none'
  68. },
  69. overlayCSS: {
  70. backgroundColor: '#fff',
  71. opacity: '0.7',
  72. cursor: 'wait'
  73. }
  74. });
  75. }
  76. $('#percent').width(uploader.total.percent+"%");
  77. $('#upRate').text(Math.ceil(uploader.total.bytesPerSec/1024)+" kb/sec");
  78. });
  79. uploader.bind('FileUploaded', function(up, file, response) {
  80. var input = $("#uploaded_photos");
  81. var data = response.response;
  82. var details = data.split(',');
  83. if(details[0] == 'success') {
  84. var photo_html = '<div class="padding-10 hm-photo clearfix"><a href="../upload/source/'+details[4]+'" target="_blank"><img src="../upload/small/'+details[4]+'"></a><p class="small-text light-text">'+details[1]+'</p><abbr class="time small-text" title="'+details[2]+'"></abbr></div>';
  85. input.val(input.val() + details[1] + ":");
  86. } else {
  87. var photo_html = '<div class="clearfix">'+details[1]+'</div>';
  88. }
  89. $('.side-pane').prepend(photo_html);
  90. $('.time').timeago();
  91. });
  92. uploader.bind('UploadComplete', function(up, files) {
  93. $('#upload_info').hide();
  94. $('#filelist').unblock({
  95. onUnblock: function () {
  96. $('#filelist_header').hide();
  97. $('#filelist').html('<div style="margin-top: 180px; text-align: center;"><strong>ok</strong><br/>All photos have been uploaded.</div>');
  98. }
  99. });
  100. });
  101. // ]]>
  102. </script>

上面2个js都放在index.php里面

XML/HTML Code
  1. <div id="uploader" class="main-pane">
  2. <div id="filelist_header" class="clearfix">
  3. <div class="filename">Name</div>
  4. <div class="filesize">Size</div>
  5. <div class="filestatus">Status</div>
  6. <div class="filedel"></div>
  7. <div></div>
  8. </div>
  9. <div id="filelist"></div>
  10. <div class="action-btns">
  11. <a id="pickfiles" class="login-button btn">Select files to upload</a>
  12. <a href="javascript:;" id="upload_button" class="login-button upload hide">Upload</a>
  13. </div>
  14. <center>
  15. <div id="upload_info">
  16. <div id="upload_info_inner">
  17. <div class="progressbg">
  18. <div id="percent" class="progress"></div>
  19. </div>
  20. </div>
  21. <div id="unknown">
  22. <div id="time2go"></div>
  23. <div id="upRate"></div>
  24. </div>
  25. </div>
  26. </center>
  27. <form method="POST" action="process.php" id="processupload">
  28. <input type="hidden" name="uploaded_photos" id="uploaded_photos" />
  29. <input type="hidden" name="fkey" value="<?php echo $fkey; ?>" />
  30. </form>
  31. </div>

upload.php

PHP Code
  1. <?php
  2. /*
  3. @@ Including the functions.php for using the necessary functions.
  4. */
  5. include('functions.php');
  6. /*
  7. @@ This is the file upload class which does all the uploading work.
  8. */
  9. include('class.upload.php');
  10. if(isset($_FILES["file"])) {
  11. /*
  12. @@ Generating unique name for the photo.
  13. */
  14. $time = time();
  15. $rand_1 = rand(999, 999999);
  16. $rand_2 = rand(999999, 999999999);
  17. $rand_3 = rand();
  18. $unique_value = $time.'_'.$rand_1.'_'.$rand_2.'_'.$rand_3;
  19. /*
  20. @@ Folder creation for each and every day. This ensures performance even with millions of images.
  21. */
  22. $folder = date('zY');
  23. if(substr($folder, 0) == 0) {
  24. $folder = '367'.date('Y');
  25. }
  26. /*
  27. @@ This folder is for the source image files.
  28. */
  29. $pfolder = '../upload/source/';
  30. if(!is_dir($pfolder)) {
  31. mkdir($pfolder, 0755);
  32. }
  33. /*
  34. @@ This folder is for the image files with 120x120 dimensions.
  35. */
  36. $tfolder = '../upload/small/';
  37. if(!is_dir($tfolder)) {
  38. mkdir($tfolder, 0755);
  39. }
  40. /*
  41. @@ Assigning the upload file to the upload class for all the processing.
  42. */
  43. $handle = new Upload($_FILES["file"]);
  44. if($handle->uploaded) {
  45. $extension = $handle->file_src_name_ext;
  46. $mime = $handle->file_src_mime;
  47. if(($mime == 'image/gif') || ($mime == 'image/jpg') || ($mime == 'image/png') || ($mime == 'image/bmp') || ($mime == 'image/pjpeg') | ($mime == 'image/jpeg')) {
  48. /*
  49. @@ Check if the uploaded filetype is an image or not.
  50. */
  51. if(($extension == 'gif') || ($extension == 'jpg') || ($extension == 'jpeg') || ($extension == 'png') || ($extension == 'bmp') || ($extension == 'pjpeg')) {
  52. if($handle->image_src_x > 500) {
  53. /*
  54. @@ Check if the filesize is smaller than 10 MB. 10 MB = 10485760 bytes.
  55. */
  56. if($handle->file_src_size < 10485760) {
  57. /*
  58. @@ Getting the actual file name (with and without extension) and sanitizing it for inserting in the database.
  59. */
  60. $real_name = clean_input($handle->file_src_name);
  61. $body_name = clean_input($handle->file_src_name_body);
  62. $handle->file_new_name_body = $unique_value.'_'.$body_name;
  63. $handle->Process($pfolder);
  64. $handle->image_resize = true;
  65. $handle->image_ratio_crop = 'T';
  66. $handle->image_y = 120;
  67. $handle->image_x = 120;
  68. $handle->file_new_name_body = $unique_value.'_'.$body_name;
  69. $handle->Process($tfolder);
  70. if($handle->processed) {
  71. $actual_name = $handle->file_dst_name;
  72. $size = ceil($handle->file_src_size / 1024);
  73. ## Sending photo details back to the uploader.
  74. $date = date("c", $time);
  75. ## Reducing the length of real name if it exceeds 50 characters.
  76. if(strlen($real_name) > 50) {
  77. $real_name = substr($real_name, 0, 50).'..';
  78. }
  79. echo 'success,'.$real_name.','.$date.','.$folder.','.$actual_name;
  80. } else {
  81. echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>There was an error uploading the photo.</div>';
  82. }
  83. } else {
  84. echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>The photo is bigger than the allowed upload size of <strong>10MB</strong>.</div>';
  85. }
  86. } else {
  87. echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>You are trying to upload a photo with smaller dimensions.</div>';
  88. }
  89. } else {
  90. echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>Only photo uploads are allowed.</div>';
  91. }
  92. } else {
  93. echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>Only photo uploads are allowed.</div>';
  94. }
  95. } else {
  96. echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>An upload error occured.</div>';
  97. }
  98. /*
  99. @@ Return the json response to the script.
  100. */
  101. $handle->Clean();
  102. } else {
  103. echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>An upload error occured.</div>';
  104. }

相关文章