zoukankan      html  css  js  c++  java
  • 上传文件点击后显示图片

    HTML代码

    <include file="./Application/Home/View/default/Public/homeheader.html" />
    <html>
    <body>
    <!--<form action="{:U('home/statistics/uploadinformation')}" method="post" enctype="multipart/form-data">
        <label for="file">Filename:</label>
        <input type="file" name="file" id="file"/>
        <br />
        <input type="submit" name="submit" value="上传" />
    
    </form>!-->
    <form action="{:U('home/setting/upload')}" method="post" enctype="multipart/form-data">
        <div style=" 100%;height: 100%;">
            <div><strong>代理信息上传:</strong></div>
            <div class="form-group">
                <a class="button input-file" style="text-align: center;vertical-align: middle;" href="javascript:void(0);">上传合同文件<input  size="80" type="file" name="file1" id="file1" onchange="check1()" /></a><!--//显示合同!-->
                <a class="button input-file" style="text-align: center;vertical-align: middle;" href="javascript:void(0);">上传证件图片<input  size="80" type="file" name="file2" id="file2" onchange="check2()" /></a><!--//显示证件!-->
                <button class="button bg-main" type="submit" name="submit" style="text-align: center;vertical-align: middle;" >确定上传</button>
            </div>
            <div><p id="f1name"></p></div>
            <div><p id="f2name"></p></div>
            <br>
            <a id="changemouse1" class="dialogs" data-toggle="click" data-target="#mydialog1" data-width="40%" onmouseover="changemouse()" onmouseout="defaultmouse()">查看合同</a><br>
            <a id="changemouse2" class="dialogs" data-toggle="click" data-target="#mydialog2" data-width="40%" onmouseover="changemouse()" onmouseout="defaultmouse()">查看证件</a>
        </div>
    </form>
    
    <div id="mydialog1"><!--点击时弹出窗口,显示合同图片!-->
        <div class="dialog">
            <div class="dialog-head">
                <span class="close rotate-hover"></span><strong>查看合同</strong>
            </div>
            <div style="text-align: center;vertical-align: middle" class="dialog-body"><img style="height:70%" width="100%" src="{$addr1}"></div>
            <div class="dialog-foot">
                <button class="button bg-green dialog-close">确认</button>
            </div>
        </div>
    </div>
    <div id="mydialog2"><!--点击时弹出窗口,显示合证件图片!-->
        <div class="dialog">
            <div class="dialog-head">
                <span class="close rotate-hover"></span><strong>查看证件</strong>
            </div>
            <div style="text-align: center;vertical-align: middle" class="dialog-body"><img style="height:70%" width="100%" src="{$addr2}"></div>
            <div class="dialog-foot">
                <button class="button bg-green dialog-close">确认</button>
            </div>
        </div>
    </div>
    
    
    <script>
        function changemouse() //鼠标移过去变成手形
        {
            var obj1 = document.getElementById("changemouse1");
            var obj2 = document.getElementById("changemouse2");
            obj1.style.cursor = 'pointer';
            obj2.style.cursor = 'pointer';
        }
    </script>
    <script>
        function defaultmouse()//鼠标移回,回复默认
        {
            var obj1 = document.getElementById("changemouse1");
            var obj2 = document.getElementById("changemouse2");
            obj1.style.cursor = 'default';
            obj2.style.cursor = 'default';
        }
    </script>
    <!--
    <script>
        function display()
        {
            var obj = document.getElementById("demo")
            {
                obj.style.display="";
            }
    
        }
    
    </script>
    !-->
    <script>
        function check1()//检查图片格式
        {
    
            var filepath=file1.value ;
            filepath=filepath.substring(filepath.lastIndexOf('.')+1,filepath.length);
            if(filepath != 'jpg' && filepath != 'gif'&& filepath != 'png'&& filepath != 'jpeg')
                alert("只能上传JPG,GIF,PNG或者JPEG格式的图片");
            else document.getElementById("f1name").innerText=file1.value;
    
        }
    </script>
    <script>
        function check2()
        {
    
            var filepath=file2.value ;
            filepath=filepath.substring(filepath.lastIndexOf('.')+1,filepath.length);
            if(filepath != 'jpg' && filepath != 'gif'&& filepath != 'png'&& filepath != 'jpeg')
                alert("只能上传JPG,GIF,PNG或者JPEG格式的图片");
           else document.getElementById("f2name").innerText=file2.value;
    
        }
    </script>
    
    </body>
    </html>

    PHP代码

    public function upload()
    {
        if (isset($_POST['submit']))
        {
    
            import('Think.Verify.Upload');
            // $imagea = new Image();
            $picture = new Upload() ; // 实例化上传类
            $picture->maxSize = 3145728;// 设置附件上传大小
            $picture->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
            $picture->rootPath = './Uploads/';// 设置附件上传根目录
            $picture->savepath = ''; // 设置附件上传(子)目录
            $info = $picture->upload();// 上传文件
    
            if(!($info['file1']&&$info['file2']))
            {
                echo "<script>alert('请上传文件')</script>";
            }
            // $fr = './Uploads/'; //错误http://localhost/use/index.php/home/user/Uploads/2016-11-14/5829803394673.jpg
            // $fr = 'Uploads/'; //错误http://localhost/use/index.php/home/user/Uploads/2016-11-14/582980519743a.jpg
            // $fr = '/Uploads/'; //错误http://localhost/Uploads/2016-11-14/5829807535c04.jpg
            $fr = '/user/Uploads/';//正确 http://localhost/user/Uploads/2016-11-14/582963ff2640f.jpg
            // $addr1 = $fr . $info['file1']['savepath'] . $info['file1']['savename'];
            // $addr2 = $fr . $info['file2']['savepath'] . $info['file2']['savename'];
            $user = M('user_admin');// 实例化User对象
            // 更改用户的certificate_address和contract_address的值
            $upload_role_id_address = array('certificate_address' => $fr.$info['file2']['savepath'].$info['file2']['savename'], 'contract_address' => $fr.$info['file1']['savepath'].$info['file1']['savename']);
            $name = $_SESSION['adminid'];//获取SESSION的账户名 $_SESSION['adminid'],$_SESSION['pwd'],$_SESSION['loginkey'],
            $where['admin'] = $name;//判断条件实例化
            $user->where($where)->setField($upload_role_id_address);
            // $addr1 = $upload_role_id_address['contract_address'];
            // $addr2 = $upload_role_id_address['certificate_address'];
            // $this->assign('addr1',$addr1);
            // $this->assign('addr2',$addr2);
            //echo "<img src='$addr1'>";die();
            $image1 = new ThinkImage();
            $image2 = new ThinkImage();
            $image1->open('./Uploads/'.$info['file1']['savepath'].$info['file1']['savename']);
            $image2->open('./Uploads/'.$info['file2']['savepath'].$info['file2']['savename']);
    
            $image1->thumb(800, 600,ThinkImage::IMAGE_THUMB_FIXED)->save('./Uploads/contract.jpg');//固定缩略图
            $image2->thumb(800, 600,ThinkImage::IMAGE_THUMB_FIXED)->save('./Uploads/certificate.jpg');//固定缩略图
            // $image1->thumb(150, 150)->save('./Uploads/contract.jpg'); //按比例缩放
            // $image2->thumb(150, 150)->save('./Uploads/certificate.jpg');
            echo "<script>alert('信息上传成功')</script>";
            $addr1= $fr.'contract.jpg';
            $addr2= $fr.'certificate.jpg';
    
            /*   echo " <div class="form-group" style="float: right">//文件预览功能
               <div><strong>文件预览:</strong></div>
               <table>
                   <tr>
                       <td><img src='$addr1'></td>
                       <td><img src='$addr2'></td>
                   </tr>
               </table>
            </div>";//显示合同
            */
            //echo "<img src='$addr2'>";//显示证件
            $this->assign('addr1',$addr1);
            $this->assign('addr2',$addr2);
        }
    
        $this->display();
    } //修改

    另外在当前文件夹建立个Upload文件夹,不然没法上传图片。

    http://blog.csdn.net/s371795639/article/details/53410697

  • 相关阅读:
    JS基础语法---函数练习part3---4个练习
    JS基础语法---函数练习part2---10个综合练习(运用:循环/数组/函数)
    JS基础语法---函数练习part1---5个练习
    JS基础语法---函数---介绍、定义、函数参数、返回值
    JS基础语法---冒泡顺序
    JS基础语法---数组案例---9个练习
    JS基础语法---for循环遍历数组
    Python小技巧:使用一行命令把你的电脑变成服务器
    目前最全的Python的就业方向
    这十个Python常用库,学习Python的你必须要知道!
  • 原文地址:https://www.cnblogs.com/findumars/p/6323733.html
Copyright © 2011-2022 走看看