快速实现PHP图片上传和预览

用户点击选择文件 选好图片后，自动进行一次提交。完成图片的上传。但不修改原引用图片的地址。后续第二次提交是修改result文件中引用图片的地址（PS：为了简便这里使用了result文件），完成整个上传过程。

第一种方法

使用iframe来返回图片。自动提交表单时页面不刷新，通过target进入iframe实现图片预览的功能。

第二次手动提交通过返回js，修改result中引用图片的名称完成整个上传过程。

代码

首页1.php 代码如下。

• 图片放在了images中。
• result文件存放图片地址。

<!--filename记录result中的数值-->
<?php if($filename = file_get_contents('result')) : ?>

<!--引用图片-->
<img src="images/<?=$filename?>" width="300px" >

<?php endif ?>

<form action="upload.php" method="post" enctype="multipart/form-data" target="image-iframe">
        <input type="file" name="image" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
        <button type="submit">提交</button>
</form>

<iframe name="image-iframe" style="display:none">
</iframe>

<script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
<script src="1.js"></script>

upload.php代码如下。

<?php

//定义$image用于存储FILES的image信息
    $image = $_FILES['image'];
//定义$filename获取image信息的filename
    $filename = $image['name'];

//如果不为空，就是二次提交,否则是第一次提交
if(!empty($_POST['filename'])) {
    //修改result文件的filename，完成上传图片的引用
    file_put_contents('result',$_POST['filename']);
    //跳转回上传页面
    return header('Location:1.php');
    
}else{ 
    //上传成功后返回js
    if(move_uploaded_file($image['tmp_name'],"images/".$image['name'])){
        //使用1.js中的preview函数返回图片
        echo"<script>parent.preview('$filename')</script>";
    }
}

1.js代码如下。

//自动提交方法，第一次上传时自动点击submit
$("input").change(function(){
    $("form").submit();
})


function preview(filename){
    //不刷新，让图片返回（预览功能）
    $("img").attr('src',"images/"+filename);
    //清空target，不再进入iframe
    $("form").attr("target","");
    //第一次提交完成时，添加一个隐藏字段，用于判断是不是二次提交
    $("form").append("<input type='hidden' name='filename' value='"+filename+"'>");
}

---

第二种方法

使用ajax实现。通过json来传输数据。

代码

主页面是2.php 代码如下。

<!--这个没有什么可写的注释-->
<?php if($filename = file_get_contents('result')) : ?>

<img src="images/<?=$filename?>" width="300px" >

<?php endif ?>

<form action="ajax-upload.php" method="post" enctype="multipart/form-data">
        <input type="file" name="image" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
        <button type="submit">提交</button>
</form>


<script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
<script src="2.js"></script>

2.js代码如下。

//在实际中不建议直接使用input，建议指定某个class。

$("input").change(function(){
    //通过ajax异步操作表单。实例化form
    var form = new FormData($("form")[0]);
    
    $.ajax({
        url: "ajax-upload.php",
        type: "POST",
        dataType: "json",
        data:form,
        contentType:false,
        processData:false,
        success:function(data){
                //这里直接使用1.js的代码就可以了。
                var filename = data.filename;
                $("img").attr('src',"images/"+filename);
                $("form").attr("target","");
                $("form").append("<input type='hidden' name='filename' value='"+filename+"'>")
            
        }
    })
    
})

ajax-upload.php代码如下。

<?php

$image = $_FILES['image'];

$filename = $image['name'];

if(!empty($_POST['filename'])) {
    
    file_put_contents('result',$_POST['filename']);
    return header('Location:2.php');
    
}else{
    
    if(move_uploaded_file($image['tmp_name'],"images/".$image['name'])){
        //echo "<script>parent.preview('$filename')</script>";
        //status 1 表示成功。并传入filename
        echo json_encode(['status'=>1,'filename'=>$filename]);
    }
}