PHP论坛开发技术总结

Bootstrap

本项目的前端都是通过Bootstrap来实现，我们只需要在页面头部加载Bootstrap的层级样式表，即可非常快捷地使用Bootstrap的组件

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

Bootstrap官方文档：https://v3.bootcss.com/

图片上传

我实现图片上传的思路如下：

• 前端打开文件，获取文件信息

  <div id="file">
  <input id="inpfile" type="file" accept="image/gif, image/jpeg, image/png" name="file"> 
  <button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
  </button>
  </div>
  

• 通过ajax技术将图片发给后端

  $( document ).ready(function(){
       
            $('#inpfile').change(function(){
           
            
              var file_data = $('#inpfile').prop('files')[0];   
              var form_data = new FormData();                  
              form_data.append('file', file_data);
            
                $.ajax({
       
                url:'pic.php',
                type:'POST',
                dataType: 'text',  
                cache: false,
                contentType: false,
                processData: false,
                data:form_data,
  
        success:function(data1){
       
  
            var pic = "<br><img src ="+data1+" /><br>"
  
            document.execCommand("insertHTML","false",pic);
  
        }
  
            });
  
  })
    })
  

• 后端处理并存储图像（放在服务器或本地的某个文件夹）

  $imgname = $_FILES["file"]["name"]; //获取上传的文件名称
  $filetype = pathinfo($imgname, PATHINFO_EXTENSION);//获取后缀
  $newname = date("Ymdhis").".".$filetype; 
  //构建新名称
  $_FILES['file']['name'] = $newname;
  // 构建传输路径
  $dir = 'img/'.iconv('UTF-8','gbk'