使用ajax或XMLHttpRequest,通过formData的方式 上传文件

jq的ajax方式

1 html表单,设置id

<form id= "editForm"> 
 
      <p >用户名： <input type="text" name="user" value= ""/></p >  
　　   <p >用户密码： <input type="password" name="pwd" value= ""/></p > 
　　   <p >上传的文件： <input type="file" name="file"/></ p>   
       <input  id="btn-update" type="button" value="修改"  >

 </form>

2  js代码

<script>
   
      $('#btn-update').on("click", function() {
        // 需要在收集前, 设置 id
        // 收集表单数据, 用于表单提交 (文件和基本表单数据  使用 formData 收集)
        var formData = new FormData( $('#editForm')[0]);
        // 结合着jquery ajax 发送 formData
        $.ajax({
          type: "post",
          url: "./posts/postsUpdate.php", 
          data: formData,
          cache: false, //设置false将不会从浏览器缓存中加载请求信息。
          contentType: false, // 不进行设置请求头 (formData不需要设置请求头, 浏览器会自动检测设置)
          processData: false, // 不进行编码 (true 会将对象编码成字符串)
          success: function( info ) {//成功之后的回调
            console.log(info)
          }
        })
      });

  </script>

 

3 php代码

<?php
   echo '<pre>';
    print_r( $_POST );
   echo '</pre>';

      echo '<pre>';
    print_r( $_FILES);
   echo '</pre>';
?>

 

XMLHttpRequest方式

1 HTML代码

              <input id="avatar" type="file">
              <img src="/static/assets/img/default.png">
              <input type="hidden" name="avatar">

2 js代码

<script>
   
      $('#btn-update').on("click", function() {
        // 需要在收集前, 设置 id
        // 收集表单数据, 用于表单提交 (文件和基本表单数据  使用 formData 收集)
       var formdata=new FormData( $('#editForm')[0]);
        // 结合着jquery ajax 发送 formData
        $.ajax({
          type: "post",
          url: "./posts/postsUpdate.php", 
          data: formData,
          cache: false, //设置false将不会从浏览器缓存中加载请求信息。
          contentType: false, // 不进行设置请求头 (formData不需要设置请求头, 浏览器会自动检测设置)
          processData: false, // 不进行编码 (true 会将对象编码成字符串)
          success: function( info ) {//成功之后的回调
            console.log(info)
          }
        })
      });

  </script>

3 php代码

<?php  

// var_dump($_FILES['avatar']);
// 
// 接收文件
// 保存文件
// 返回这个文件访问的 url

if(empty($_FILES['avatar'])){

    exit('必须上传文件');
}

$avatar=$_FILES['avatar'];


if($avatar['error']!==UPLOAD_ERR_OK){
    exit('上传失败');
}
//移动文件到网站范围之内 按年归档必须创建年份文件夹 makedir
$ext=pathinfo($avatar['name'],PATHINFO_EXTENSION);

$target='../../static/uploads/img-'.uniqid().'.'.$ext;

if(!move_uploaded_file($avatar['tmp_name'], $target)){

    exit('上传失败');
}
//上传成功
    echo substr($target,5);
?>