php实现文件上传

最新推荐文章于 2024-08-23 10:29:55 发布

qq_37996815

最新推荐文章于 2024-08-23 10:29:55 发布

阅读量199

点赞数

文章标签： php 前端表单图片

本文链接：https://blog.csdn.net/qq_37996815/article/details/78535535

版权

上次在看了一篇文章实现了前端的图片预览，这次做一个php实现文件的上传功能，发现代码太久没敲都忘了好多，中间出了好多问题？在此谨记；
首先我们创建两个文件，1个前端的模板文件，另一个就是PHP文件了。
在前端文件上我们要写一个form表单了，我们这个是上传文件的所以别忘了在里面加上怎么一句话enctype="multipart/form-data"，要不然你文件是上传不上去的。
好了现在前端写完了，我们现在来高后端，因为我们是post传递，所以我们要判断是不是post提交的//判断是否是post方式提交 if(!$_SERVER['REQUEST_METHOD']=='POST'){ echo '不是post提交'; }，用来$file=$_FILE['file'];接收我们传过来的数据，而且我们判断这个文件是否存在。现在我们的文件已经存到了我们的临时服务器了，我们要判断一下它是不是图片类型的，$type=$_FILES['file']['type'];这句我们是用来获取他的类型的，不过我们要处理以下才能得到他的真实格式的$type=explode('/',$type)[1];// jpg，要开始判断//判断是否是图片文件 $typeList=array('jpg','jpeg','png','bmp'); if(!in_array($type,$typeList)) { echo '非法的文件格式'; exit(); }，现在出来的已经是我们图片格式的文件了，我们之后要做的工作就是把文件从临时缓存那移动过来。

  //移动文件
//判断  upload下是否存在该文件
if(file_exists('upload/'.$_FILES['file']['name'])){
      echo '文件已经存在';
      exit();
}


//$_FILES['file']['name'] = iconv("UTF-8","gb2312",$_FILES['file']['name'])
//这个iconv()里面有3个值，一是现在使用的编码格式，二是想要转换的编码格式，三是想要转化的字符串

//如果upload下文件不存在，则移入
else{
    //注意参数问题
    $res=move_uploaded_file($_FILES['file']['tmp_name'],'./upload/'.date('YmdHis').$_FILES['file']['name']);
    if(!$res){
        echo '文件上传失败';
        exit();
    }
    echo '文件已上传';
}

至此我们已经把文件存到我们的文件夹底下了，是不是很愉快，回头想想是不是什么东西忘了，哦，原来前端的图片预览还没写，不说放代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文件上传</title>
  <style>
  .uploadView{
     width: 300px;
     height: 400px;
     border: 1px solid lightgrey;
  }
</style>
</head>
<body>
   <form action="file.php" method="post" enctype="multipart/form-data">
    <input type="file" name="file"   id="fileChange" >
    <input type="submit" value="上传文件">
</form>
<div class="uploadView">
<img src="" alt="" width="300px" id="img">
</div>
</body>
<script type="text/javascript">
window.onload=function() {
     var submit=document.querySelector('#fileChange');
     var img=document.getElementById('img');
     submit.onchange= function (){
//       alert('a');
                //得到一个参数列表
                var files=!!this.files? this.files:[];
                //如果没有选择任何文件或者督导任何文件则返回
                if(! files.length || !window.FileReader){
                    return;
                }
                //只有图片才会读进来
                if(/^image/.test( files[0].type)){
                  //创建一个新的fileRead实例
                  var reader=new FileReader();
                  //读取本地文件作为一个DataUrl
                  reader.readAsDataURL(files[0]);
                  //图片加载
                  reader.onload=function(e) {
//                      var src=this.result.split(',')[1];
                     img.src= this.result;
                     console.log(img);
//                     console.log( this.result);
                  }

            }
               else {
                    alert('请输入图片');
               }
     }
}

</script>
</html>

总结：做这个的时候遇到了两个比较大的问题，都是自己的粗心造成了，其实也就是自己不熟悉的原因。第一个问题：就是我在移动文件的时候$res=move_uploaded_file($_FILES['file']['tmp_name'],'./upload/'.date('YmdHis').$_FILES['file']['name']);把move_upload_file()函数的第一个参数写错了，写成了$_FILES[‘file’][‘name’],然后一直返回false，弄的我一脸蒙蔽。第二个问题就是前端页面设置 img的src出错了，脑子里一致以为是 img.style.src=”;导致图片出不来，其实是 img.src=”就可以了。把style弄混了，style是样式的内容。这里写图片描述