jQuery ajax 无刷新多图片上传并记要到数据库

jQuery ajax 无刷新多图片上传并记录到数据库

本例适合多图片自动选择后上传，无提交按钮，并记录到数据库

数据库的结构

CREATE TABLE `user_uploads` (

? `upload_id` int(11) NOT NULL auto_increment,

? `image_name` text collate utf8_unicode_ci,

? `user_id_fk` int(11) default NULL,

? `created` int(11) default NULL,

? PRIMARY KEY ?(`upload_id`)

) ENGINE=MyISAM ?DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;

?

1. <script>??
2. ?$(document).ready(function()?{???
3. ??????????
4. ????????????$('#photoimg').die('click').live('change',?function()???????????{???
5. ???????????????????????//$("#preview").html('');??
6. ??????????????????
7. ????????????????$("#imageform").ajaxForm({target:?'#preview',???
8. ?????????????????????beforeSubmit:function(){???
9. ??????????????????????
10. ????????????????????console.log('ttest');??
11. ????????????????????$("#imageloadstatus").show();??
12. ?????????????????????$("#imageloadbutton").hide();??
13. ?????????????????????},???
14. ????????????????????success:function(){???
15. ????????????????????console.log('test');??
16. ?????????????????????$("#imageloadstatus").hide();??
17. ?????????????????????$("#imageloadbutton").show();??
18. ????????????????????},???
19. ????????????????????error:function(){???
20. ????????????????????console.log('xtest');??
21. ?????????????????????$("#imageloadstatus").hide();??
22. ????????????????????$("#imageloadbutton").show();??
23. ????????????????????}?}).submit();??
24. ??????????????????????
25. ??????????
26. ????????????});??
27. ????????});???
28. </script>??

1. <div?id='preview'>??
2. </div>??
3. ??????
4. <form?id="imageform"?method="post"?enctype="multipart/form-data"?action='ajaxImageUpload.php'?style="clear:both">??
5. <h1>请选择图片上传，多图片可以上传</h1>???
6. <div?id='imageloadstatus'?style='display:none'><img?src="loader.gif"?alt="Uploading...."/></div>??
7. <div?id='imageloadbutton'>??
8. <input?type="file"?name="photos[]"?id="photoimg"?multiple="true"?/>??
9. </div>??
10. </form>??
11. ??
12. ??
13. </div>??

?ajaxImageUpload.php

?

1. ?<?php??
2. error_reporting(0);??
3. session_start();??
4. include('conn.php');??
5. ??
6. $session_id='1';?//$session?id??
7. define?("MAX_SIZE","9000");???
8. function?getExtension($str)??
9. {??
10. ?????????$i?=?strrpos($str,".");??
11. ?????????if?(!$i)?{?return?"";?}??
12. ?????????$l?=?strlen($str)?-?$i;??
13. ?????????$ext?=?substr($str,$i+1,$l);??
14. ?????????return?$ext;??
15. }??
16. ??
17. ??
18. $valid_formats?=?array("jpg",?"png",?"gif",?"bmp","jpeg");??
19. if(isset($_POST)?and?$_SERVER['REQUEST_METHOD']?==?"POST")???
20. {??
21. ??????
22. ????$uploaddir?=?"../upload/";?//a?directory?inside??
23. ????foreach?($_FILES['photos']['name']?as?$name?=>?$value)??
24. ????{??
25. ??????
26. ????????$filename?=?stripslashes($_FILES['photos']['name'][$name]);??
27. ????????$size=filesize($_FILES['photos']['tmp_name'][$name]);??
28. ????????//get?the?extension?of?the?file?in?a?lower?case?format??
29. ??????????$ext?=?getExtension($filename);??
30. ??????????$ext?=?strtolower($ext);??
31. ??????????
32. ?????????if(in_array($ext,$valid_formats))??
33. ?????????{??
34. ???????????if?($size?<?(MAX_SIZE*1024))??
35. ???????????{??
36. ???????????$image_name=time().$filename;??
37. ???????????echo?"<img?src='".$uploaddir.$image_name."'?class='imgList'>";??
38. ???????????$newname=$uploaddir.$image_name;??
39. ?????????????
40. ???????????if?(move_uploaded_file($_FILES['photos']['tmp_name'][$name],?$newname))???
41. ???????????{??
42. ???????????$time=time();??
43. ???????????mysql_query("INSERT?INTO?user_uploads(image_name,user_id_fk,created)?VALUES('$image_name','$session_id','$time')");??
44. ???????????}??
45. ???????????else??
46. ???????????{??
47. ????????????echo?'<span?style="margin: auto; padding-left: 5px; color: #aa0000;">??
48. ???????????}??
49. ???????????else??
50. ???????????{??
51. ????????????echo?'<span?style="margin: auto; padding-left: 5px; color: #aa0000;">???????????}??
52. ?????????
53. ??????????}??
54. ??????????else??
55. ?????????{???
56. ????????????echo?'<span?style="margin: auto; padding-left: 5px; color: #aa0000;">?????????????
57. ?????????}??
58. ?????????????
59. ?????}??
60. }??
61. ??
62. ?>??

?

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