您现在的位置: 365建站网 > 365文章 > php+ajax实现图片文件上传功能实例

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

文章来源:365jz.com     点击数:244    更新时间:2017-08-11 09:25   参与评论

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

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

其实就是实现无刷新式的文件上传。可采用IFRAME文件上传原理。
实际上在用PHP上传文件时。。。只能用$_FILES形式,但是若我们只是单一的用JS方式取其ID,如<input id='img' type='file'>..document.getElementById('img').value或者jquery形式的$("#img")都是不能正真实际上传的(但是还是有很多人这样做,刚开始时我也是)。
可是功能上又要要求实现所谓的“异步上传”,怎么办呢?只能借助于第三方的组件,或者自己写一个(在网页里嵌入一个IFRAME)。但如果是考虑开发时间,建议用第三方的,这里有一个不错的jQuery 的Ajax文件上传的组件,即“ajaxfileupload.js",其组件下载地址为:https://www.365jz.com/js/ajaxfileupload.js

过程:

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

 

</>code

  1. <script type="text/javascript" src="/js/jquery.js"></script>
  2.  <script type="text/javascript" src="/js/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为:

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

这样客户端就完成了。

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

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

 

</>code

  1. $file_infor = var_export($_FILES,true);
  2.  file_put_contents("d:file_infor.php".$file_infor);

 

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

 

</>code

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

 

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

 

</>code

  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代码如下:

 

</>code

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

 

index.js文件:

 

</>code

  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. }
  10. upload.php文件:

 

 

</>code

  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文件上传

 

</>code

  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' id='textfield' class='txt' />
  54.     <span onclick="file.click()"  class="mybtn">浏览...</span>
  55.     <input type="file" name="file" class="file" id="file" size="28" onchange="document.getElementById('textfield').value=this.value" />
  56.     <span onclick="UpladFile()" class="mybtn">上传</span>
  57. </div>
  58. </body>
  59. </html>

 

php代码:

 

</>code

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

 

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (244人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号