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

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

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

演示

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. }