php+jQuery.uploadify实现文件上传教程

这篇文章主要介绍了php+jQuery.uploadify实现文件上传教程,需要的朋友可以参考下

这两天用上传的控件,PHP+Jquery今天先介绍这个uploadify,嗯,我今天下载因为我英文不是很好所以我就在网上找的使用教程,我发现好多用不了,我那个去,你看官方文档才知道很多API已经不是以前的API了。今天总结一下给大家,给大家一个提醒最多还是要看官方的http://www.uploadify.com/documentation/!

简单举例一下使用然后我都加上注释给大家,方便大家阅读和使用下载官方的之后直接使用就OK了,当然你需要什么在直接修改就可以了!代码如下:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>UploadiFy讲解</title>
  6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  7. <script src="jquery.uploadify.min.js" type="text/javascript"></script>
  8. <link rel="stylesheet" type="text/css" href="uploadify.css">
  9. <style type="text/css">
  10. body {
  11. font: 13px Arial, Helvetica, Sans-serif;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <h1>Uploadify讲解由widuu提供</h1>
  17. <form>
  18. <div ></div>
  19. <input name="file_upload" type="file" multiple="true">
  20. </form>
  21. <script type="text/javascript">
  22. <?php $timetimestamp = time();?>
  23. $(function() {
  24. $('#file_upload').uploadify({
  25. //上传文件时post的的数据
  26. 'formData' : {
  27. 'timestamp' : '<?php echo $timestamp;?>',
  28. 'token' : '<?php echo md5('unique_salt' . $timestamp);?>',
  29. 'id' : 1
  30. },
  31. 'swf' : '/uploadify/uploadify.swf',
  32. 'uploader' : 'http://localhost/uploadify/uploadify.php',
  33. 'onInit' : function(index){
  34. alert('队列ID:'+index.settings.queueID);
  35. },
  36. 'method' : 'post', //设置上传的方法get 和 post
  37. //'auto' : false, //是否自动上传 false关闭自动上传 true 选中文件后自动上传
  38. //'buttonClass' : 'myclass', //自定义按钮的样式
  39. //'buttonImage' : '按钮图片',
  40. 'buttonText' : '选择文件', //按钮显示的字迹
  41. //'fileObjName' : 'mytest' //后台接收的时候就是$_FILES['mytest']
  42. 'checkExisting' : '/uploadify/check-exists.php', //检查文件是否已经存在 返回0或者1
  43. 'fileSizeLimit' : '100KB', //上传文件大小的限制
  44. 'fileTypeDesc' : '你需要一些文件',//可选择的文件的描述
  45. 'fileTypeExts' : '*.gif; *.jpg; *.png', //文件的允许上传的类型
  46. //上传的时候发生的事件
  47. 'onUploadStart' : function(file){
  48. alert('开始上传了'); },
  49. 'uploadLimit' : 5, //设置最大上传文件的数量
  50. /*
  51. 'onUploadComplete' : function(result){
  52. for (var i in result.post){
  53. alert(i+':::'+result[i]);
  54. }
  55. },
  56. */
  57. //文件上传成功的时候
  58. 'onUploadSuccess' : function(file, data, response) {
  59. alert(data);
  60. },
  61. //
  62. 'onUploadError' : function(file, errorCode, errorMsg, errorString) {
  63. alert(file.name + '上传失败原因:' + errorString);
  64. },
  65. 'itemTemplate' : '追加到每个上传节点的html',
  66. 'height' : 30, //设置高度 button
  67. 'width' : 30, //设置宽度
  68. 'onDisable' : function(){
  69. alert('您禁止上传');
  70. },
  71. 'onEnable' : function(){
  72. alert('您可以继续上传了');
  73. },
  74. //当文件选中的时候
  75. 'onSelect' : function(file){
  76. alert(file.name+"已经添加到队列");
  77. }
  78. });
  79. });
  80. //一些常用的事件
  81. //$('#file_upload').uploadify('upload','*'); //用javascript 上传的方法
  82. //$('#file_upload').uploadify('stop','*'); //用javascript 停止上传的方法
  83. //$('#file_upload').uploadify('disable','*'); //用javascript 禁止上传的方法
  84. //$('#file_upload').uploadify('settings','buttonText',"设置上传按钮"); //设置一些属性
  85. //更多的请到官方网站www.uploadify.com/documentation/看讲解谢谢
  86. </script>
  87. <?php
  88. /*
  89. *检查文件是否存在的check-exists.php
  90. */
  91. /*
  92. $targetFolder = '/uploads';
  93. if (file_exists($_SERVER['DOCUMENT_ROOT'] . $targetFolder . '/' . $_POST['filename'])) {
  94. echo 1;
  95. } else {
  96. echo 0;
  97. }
  98. */
  99. ?>
  100. </body>
  101. </html>

代码注释里都做了详细解释了,我这里就不多废话了,如果还是有疑问,那就联系我吧。