当前位置：Gxlcms > PHP教程 > php怎么实现上传图片的功能

php怎么实现上传图片的功能

时间：2021-07-01 10:21:17 帮助过：29人阅读

php怎么实现上传图片的功能

首先创建php脚本文件；然后使用“$_FILES”来获取上传的图片；再调用“move_uploaded_file()”函数将图片保存；最后在前端页面创建表单将图片提交过来即可。

前端：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>文件上传</title>
  6. </head>
  7. <body>
  8. <h1>文件上传</h1>
  9. <div id="divPreview">
  10.         <img id="imgHeadPhoto" src="noperson.jpg" style="width: 160px; height: 170px; border: solid 1px #d2e2e2;"
  11.             alt="" />
  12. </div>
  13. <!--enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码,"multipart/form-data"在使用包含文件上传控件的表单时，必须使用该值。-->
  14. <form action="upload.php" method="post" enctype="multipart/form-data">
  15. <!--file定义输入字段和 "浏览"按钮，供文件上传。-->
  16.     <input type="file" name="file" onchange="PreviewImage(this,'imgHeadPhoto','divPreview');" size="20" />
  17.     <input  type="submit" value="上传"/>
  18. </form>
  19. </body>
  20. <script type="text/javascript">
  21.         //js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
  22.         function PreviewImage(fileObj, imgPreviewId, divPreviewId) {
  23.             var allowExtention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;
  24.             var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
  25.             var browserVersion = window.navigator.userAgent.toUpperCase();
  26.             if (allowExtention.indexOf(extention) > -1) {
  27.                 if (fileObj.files) {//HTML5实现预览，兼容chrome、火狐7+等
  28.                     if (window.FileReader) {
  29.                         var reader = new FileReader();
  30.                         reader.onload = function (e) {
  31.                             document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
  32.                         }
  33.                         reader.readAsDataURL(fileObj.files[0]);
  34.                     } else if (browserVersion.indexOf("SAFARI") > -1) {
  35.                         alert("不支持Safari6.0以下浏览器的图片预览!");
  36.                     }
  37.                 } else if (browserVersion.indexOf("MSIE") > -1) {
  38.                     if (browserVersion.indexOf("MSIE 6") > -1) {//ie6
  39.                         document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
  40.                     } else {//ie[7-9]
  41.                         fileObj.select();
  42.                         if (browserVersion.indexOf("MSIE 9") > -1)
  43.                             fileObj.blur(); //不加上document.selection.createRange().text在ie9会拒绝访问
  44.                         var newPreview = document.getElementById(divPreviewId + "New");
  45.                         if (newPreview == null) {
  46.                             newPreview = document.createElement("div");
  47.                             newPreview.setAttribute("id", divPreviewId + "New");
  48.                             newPreview.style.width = document.getElementById(imgPreviewId).width + "px";
  49.                             newPreview.style.height = document.getElementById(imgPreviewId).height + "px";
  50.                             newPreview.style.border = "solid 1px #d2e2e2";
  51.                         }
  52.                         newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
  53.                         var tempDivPreview = document.getElementById(divPreviewId);
  54.                         tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview);
  55.                         tempDivPreview.style.display = "none";
  56.                     }
  57.                 } else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
  58.                     var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
  59.                     if (firefoxVersion < 7) {//firefox7以下版本
  60.                         document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL());
  61.                     } else {//firefox7.0+                    
  62.                         document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0]));
  63.                     }
  64.                 } else {
  65.                     document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
  66.                 }
  67.             } else {
  68.                 alert("仅支持" + allowExtention + "为后缀名的文件!");
  69.                 fileObj.value = ""; //清空选中文件
  70.                 if (browserVersion.indexOf("MSIE") > -1) {
  71.                     fileObj.select();
  72.                     document.selection.clear();
  73.                 }
  74.                 fileObj.outerHTML = fileObj.outerHTML;
  75.             }
  76.             return fileObj.value;    //返回路径
  77.         }
  78.     </script>
  79. </html>

后端：

  1. <?php
  2. //var_dump($_FILES["file"]);
  3. //array(5) { ["name"]=> string(17) "56e79ea2e1418.jpg" ["type"]=> string(10) "image/jpeg" ["tmp_name"]=> string(43) "C:\Users\asus\AppData\Local\Temp\phpD07.tmp" ["error"]=> int(0) ["size"]=> int(454445) } 
  4. //1.限制文件的类型，防止注入php或其他文件，提升安全
  5. //2.限制文件的大小，减少内存压力
  6. //3.防止文件名重复，提升用户体验
  7.     //方法一：  修改文件名    一般为:时间戳+随机数+用户名
  8.     // 方法二:建文件夹
  9.     
  10. //4.保存文件
  11. //判断上传的文件是否出错,是的话，返回错误
  12. if($_FILES["file"]["error"])
  13. {
  14.     echo $_FILES["file"]["error"];    
  15. }
  16. else
  17. {
  18.     //没有出错
  19.     //加限制条件
  20.     //判断上传文件类型为png或jpg且大小不超过1024000B
  21.     if(($_FILES["file"]["type"]=="image/png"||$_FILES["file"]["type"]=="image/jpeg")&&$_FILES["file"]["size"]<1024000)
  22.     {
  23.             //防止文件名重复
  24.             $filename ="./img/".time().$_FILES["file"]["name"];
  25.             //转码，把utf-8转成gb2312,返回转换后的字符串， 或者在失败时返回 FALSE。
  26.             $filename =iconv("UTF-8","gb2312",$filename);
  27.              //检查文件或目录是否存在
  28.             if(file_exists($filename))
  29.             {
  30.                 echo"该文件已存在";
  31.             }
  32.             else
  33.             {  
  34.                 //保存文件,   move_uploaded_file 将上传的文件移动到新位置  
  35.                 move_uploaded_file($_FILES["file"]["tmp_name"],$filename);//将临时地址移动到指定地址    
  36.             }        
  37.     }
  38.     else
  39.     {
  40.         echo"文件类型不对";
  41.     }
  42. }

推荐教程：《PHP教程》

以上就是php怎么实现上传图片的功能的详细内容，更多请关注Gxlcms其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！