上传文件点击后显示图片

时间:2022-05-06 08:20:26

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="width: 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 \Think\Image();
        $image2 = new \Think\Image();
        $image1->open('./Uploads/'.$info['file1']['savepath'].$info['file1']['savename']);
        $image2->open('./Uploads/'.$info['file2']['savepath'].$info['file2']['savename']);

        $image1->thumb(800, 600,\Think\Image::IMAGE_THUMB_FIXED)->save('./Uploads/contract.jpg');//固定缩略图
        $image2->thumb(800, 600,\Think\Image::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