• 如何实现无刷新图片上传


    如何实现无刷新图片上传

    一、总结

    一句话总结:用的是普通的图片上传技术,只不过将跳转页面用iframe 放到了自己的体内并且隐藏了

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>index</title>
     6     <script src="jquery.min.js"></script>
     7 </head>
     8 <body>
     9     <h1>
    10         <?php
    11             echo "当前时间戳:".time();
    12         ?>
    13     </h1>
    14     <form action="upload.php" method="post" target="mywin" enctype="multipart/form-data">
    15         <p>文件上传</p>
    16         <p>
    17             <input type="file" name="img" id="">
    18         </p>
    19     </form>
    20     <div>
    21         <img src="" id="imgid">
    22     </div>
    23     <iframe name="mywin" frameborder="0" src="" style="display: none;"></iframe>
    24 </body>
    25 <script>
    26 $(':file').change(function(){
    27     $('form').submit();
    28 });
    29 </script>
    30 </html>

    1、php知道源文件路径和目标文件路径如何上传图片?

     8     if(move_uploaded_file($src, $dst)){

    2、如何让表单提交之后跳转到自己体内?

    用form的target属性指向一个iframe

    14     <form action="upload.php" method="post" target="mywin" enctype="multipart/form-data">

    将iframe放到自己体内,并且无需指定src,然后隐藏iframe

    23     <iframe name="mywin" frameborder="0" src="" style="display: none;"></iframe>

    3、证明页面没有刷新的技巧是什么?

    让页面显示一个时间戳,时间戳没有变动说明页面没有刷新

    4、子如何调用父亲(如何获取父窗口)?

    用top

     9         echo "<script>imgid=top.document.getElementById('imgid');imgid.src='{$dst}';</script>";

    5、文件上传的路径一般如何指定(区分文件)?

    一般是时间戳加上随机数

     5 $rand=time().mt_rand().'.'.$ext;

    6、表单如何提交?

    选取form元素然后submit方法即可

    27     $('form').submit();

    7、如何选中文件框元素?

    冒号属性选择器 :file

    26 $(':file').change(function(){
    27     $('form').submit();
    28 });

    二、jquery实现无刷新图片上传

    1、截图

     

    2、代码

    目录结构:

    index.php

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>index</title>
     6     <script src="jquery.min.js"></script>
     7 </head>
     8 <body>
     9     <h1>
    10         <?php
    11             echo "当前时间戳:".time();
    12         ?>
    13     </h1>
    14     <form action="upload.php" method="post" target="mywin" enctype="multipart/form-data">
    15         <p>文件上传</p>
    16         <p>
    17             <input type="file" name="img" id="">
    18         </p>
    19     </form>
    20     <div>
    21         <img src="" id="imgid">
    22     </div>
    23     <iframe name="mywin" frameborder="0" src="" style="display: none;"></iframe>
    24 </body>
    25 <script>
    26 $(':file').change(function(){
    27     $('form').submit();
    28 });
    29 </script>
    30 </html>

    upload.php

     1 <?php
     2 $src=$_FILES['img']['tmp_name'];
     3 $file=$_FILES['img']['name'];
     4 $ext=array_pop(explode('.', $file));
     5 $rand=time().mt_rand().'.'.$ext;
     6 $dst="uploads/{$rand}";
     7 if($_FILES['img']['error']===0){
     8     if(move_uploaded_file($src, $dst)){
     9         echo "<script>imgid=top.document.getElementById('imgid');imgid.src='{$dst}';</script>";
    10     }
    11 }
    12 //echo $dst;
    13 ?>
     
  • 相关阅读:
    CNN(卷积神经网络)入门
    基于linux vim环境python代码自动补全
    Linux 基本bash命令
    基于pytorch的CNN、LSTM神经网络模型调参小结
    深度学习中Batch size对训练效果的影响
    argparse.ArgumentParser()用法解析
    大数据学习之Hive数据仓库 20
    centOS中安装MySQL超级方便简单的方法
    大数据学习之zookeeper案例节点动态上下线感知19
    大数据学习之zookeeper客户端的命令行及API操作18
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9582199.html
Copyright © 2020-2023  润新知