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

第一种方法

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

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

代码

首页1.php 代码如下。

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

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

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

<?php endif ?>

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

<iframe name=&quot;image-iframe&quot; style=&quot;display:none&quot;>
</iframe>

<script src=&quot;https://lib.baomitu.com/jquery/3.3.1/jquery.min.js&quot;></script>
<script src=&quot;1.js&quot;></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'],&quot;images/&quot;.$image['name'])){
        //使用1.js中的preview函数返回图片
        echo&quot;<script>parent.preview('$filename')</script>&quot;;
    }
}

1.js代码如下。

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


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

---

第二种方法

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

代码

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

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

<img src=&quot;images/<?=$filename?>&quot; width=&quot;300px&quot; >

<?php endif ?>

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


<script src=&quot;https://lib.baomitu.com/jquery/3.3.1/jquery.min.js&quot;></script>
<script src=&quot;2.js&quot;></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","");
                $(&quot;form&quot;).append(&quot;<input type='hidden' name='filename' value='&quot;+filename+&quot;'>&quot;)
            
        }
    })
    
})

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'],&quot;images/&quot;.$image['name'])){
        //echo &quot;<script>parent.preview('$filename')</script>&quot;;
        //status 1 表示成功。并传入filename
        echo json_encode(['status'=>1,'filename'=>$filename]);
    }
}

---

版权属于：ic翼

本文链接：https://bingyishow.top/Technical-article/75.html

您必须遵守 署名-非商业性使用-相同方式共享 CC BY-NC-SA 使用这篇文章