php+ajax实现图片文件上传功能实例

目前常用的异步文件上传功能有几种,比较多见的如使用iframe框架形式,ajax功能效果,以及flash+php功能,下面介绍ajax与iframe实现异步文件上传的功能的例子。

方法一,利用jquery ajaxfileupload.js实现文件上传

其实就是实现无刷新式的文件上传。可采用IFRAME文件上传原理。

实际上在用PHP上传文件时。。。只能用$_FILES形式,但是若我们只是单一的用JS方式取其ID,如<input type='file'>..document.getElementById('img').value或者jquery形式的$("#img")都是不能正真实际上传的(但是还是有很多人这样做,刚开始时我也是)。

可是功能上又要要求实现所谓的“异步上传”,怎么办呢?只能借助于第三方的组件,或者自己写一个(在网页里嵌入一个IFRAME)。但如果是考虑开发时间,建议用第三方的,这里有一个不错的jQuery 的Ajax文件上传的组件,即“ajaxfileupload.js",其组件下载地址为://img.jbzj.com/file_images/article/201306/js/ajaxfileupload.js

过程:

(1 )前端文件的代码: test.php 代码如下:

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="ajaxfileupload.js"></script>
  3. <script type="text/javascript">
  4. function ajaxFileUpload()
  5. {
  6. $.ajaxFileUpload
  7. (
  8. {
  9. url:'doajaxfileupload.php', //你处理上传文件的服务端
  10. secureuri:false,
  11. fileElementId:'img',
  12. dataType: 'json',
  13. success: function (data)
  14. {
  15. alert(data.file_infor);
  16. }
  17. }
  18. )
  19. return false;
  20. }
  21. </script>

相应的HTML为:

  1. <input type="file" size="45" name="img" class="input">
  2. <button class="button" onclick="return ajaxFileUpload();">Upload</button>

这样客户端就完成了。

(2) 在服务器端的doajaxfileupload.php

此处为了简便的检测是否真正的传值过来了,你可以将它存起来了,代码如下:

$file_infor = var_export($_FILES,true);

file_put_contents("d:file_infor.php".$file_infor);

这样你打来刚生成的file_infor.php文件时,你又看到了熟悉的信息了:

  1. array(
  2. 'name'=>'lamp.jpg',
  3. 'type'=>'image/pjpeg',
  4. 'tmp_name'=>'c:windowstempphpFA.tmp',
  5. 'error'=>0,
  6. 'size'=>3127
  7. )

当然,真正的处理类于这样的:

  1. <?php
  2. $upFilePath = "d:/";
  3. $ok=@move_uploaded_file($_FILES['img']['tmp_name'],$upFilePath);
  4. if($ok === FALSE){
  5. echo json_encode('file_infor'=>'上传失败');
  6. }else{
  7. echo json_encode('file_infor'=>'上传成功');
  8. }
  9. ?>

方法二,利用iframe框架上传图片

html代码如下:

  1. <div class="frm">
  2. <form name="uploadFrom" action="upload.php" method="post" target="tarframe" enctype="multipart/form-data">
  3. <input type="file" name="upfile">
  4. </form>
  5. <iframe src="" width="0" height="0" name="tarframe"></iframe>
  6. </div>
  7. <div >
  8. </div>

index.js文件:

  1. $(function(){
  2. $("#upload_file").change(function(){
  3. $("#uploadFrom").submit();
  4. });
  5. });
  6. function stopSend(str){
  7. var im="<img src='upload/images/"+str+"'>";
  8. $("#msg").append(im);
  9. }

upload.php文件:

  1. <?php
  2. $file=$_FILES['upfile'];
  3. $name=rand(0,500000).dechex(rand(0,10000)).".jpg";
  4. move_uploaded_file($file['tmp_name'],"upload/images/".$name);
  5. //调用iframe父窗口的js 函数
  6. echo "<script>parent.stopSend('$name')</script>";
  7. ?>

方法三,原生态ajax文件上传,代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Html5 Ajax 上传文件</title>
  5. <meta charset="utf-8">
  6. <script type="text/javascript">
  7. var xhr;
  8. function createXMLHttpRequest()
  9. {
  10. if(window.ActiveXObject)
  11. {
  12. xhr = new ActiveXObject("Microsoft.XMLHTTP");
  13. }
  14. else if(window.XMLHttpRequest)
  15. {
  16. xhr = new XMLHttpRequest();
  17. }
  18. }
  19. function UpladFile()
  20. {
  21. var fileObj = document.getElementById("file").files[0];
  22. var FileController = 'upload.php';
  23. var form = new FormData();
  24. form.append("myfile", fileObj);
  25. createXMLHttpRequest();
  26. xhr.onreadystatechange = handleStateChange;
  27. xhr.open("post", FileController, true);
  28. xhr.send(form);
  29. }
  30. function handleStateChange()
  31. {
  32. if(xhr.readyState == 4)
  33. {
  34. if (xhr.status == 200 || xhr.status == 0)
  35. {
  36. var result = xhr.responseText;
  37. var json = eval("(" + result + ")");
  38. alert('图片链接:n'+json.file);
  39. }
  40. }
  41. }
  42. </script>
  43. <style>
  44. .txt{ height:28px; border:1px solid #cdcdcd; width:670px;}
  45. .mybtn{ background-color:#FFF; line-height:14px;vertical-align:middle;border:1px solid #CDCDCD;height:30px; width:70px;}
  46. .file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
  47. </style>
  48. </head>
  49. <body>
  50. <div class="form-group">
  51. <label class="control-label">图片</label>
  52. <br/>
  53. <input type='text' name='textfield' class='txt' />
  54. <span onclick="file.click()" class="mybtn">浏览...</span>
  55. <input type="file" name="file" class="file" size="28" onchange="document.getElementById('textfield').value=this.value" />
  56. <span onclick="UpladFile()" class="mybtn">上传</span>
  57. </div>
  58. </body>
  59. </html>

php代码:

  1. <?php
  2. if(isset($_FILES["myfile"]))
  3. {
  4. $ret = array();
  5. $uploadDir = 'images'.DIRECTORY_SEPARATOR.date("Ymd").DIRECTORY_SEPARATOR;
  6. $dir = dirname(__FILE__).DIRECTORY_SEPARATOR.$uploadDir;
  7. file_exists($dir) || (mkdir($dir,0777,true) && chmod($dir,0777));
  8. if(!is_array($_FILES["myfile"]["name"])) //single file
  9. {
  10. $fileName = time().uniqid().'.'.pathinfo($_FILES["myfile"]["name"])['extension'];
  11. move_uploaded_file($_FILES["myfile"]["tmp_name"],$dir.$fileName);
  12. $ret['file'] = DIRECTORY_SEPARATOR.$uploadDir.$fileName;
  13. }
  14. echo json_encode($ret);
  15. }
  16. ?>