0

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

ic翼 2018-12-20 发布于后端 bingyishow.top

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

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

2018-12-20 发布,来源:bingyishow.top

用户点击选择文件 选好图片后,自动进行一次提交。完成图片的上传。但不修改原引用图片的地址。后续第二次提交是修改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
$(&quot;input&quot;).change(function(){
    $(&quot;form&quot;).submit();
})


function preview(filename){
    //不刷新,让图片返回(预览功能)
    $(&quot;img&quot;).attr('src',&quot;images/&quot;+filename);
    //清空target,不再进入iframe
    $(&quot;form&quot;).attr(&quot;target&quot;,&quot;&quot;);
    //第一次提交完成时,添加一个隐藏字段,用于判断是不是二次提交
    $(&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。

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

最后修改:2018 年 12 月 20 日 09 : 03 PM
© 著作权归作者所有
2k 浏览 收藏 报告 阅读模式
载入中...