上传文件点击后显示图片

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

时间: 2024-08-07 16:59:53

上传文件点击后显示图片的相关文章

PHP JS JQ 异步上传并立即显示图片

http://my.oschina.net/zerodeng/blog/313773 提交页面: <! DOCTYPE html> < html> < head> < meta charset ="GB2312" > < title> Insert title here </title > < script type ="text/javascript" src= "jquery

PHP JQ 异步上传并立即显示图片

提交页面: <! DOCTYPE html> < html> < head> < meta charset ="GB2312" > < title> Insert title here </title > < script type ="text/javascript" src= "jquery.js"></ script > < script 

SpringMVC上传文件进度显示

效果图: FileUploadController.java import java.io.File; import java.util.List; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import org.apache.commons.fileupload.FileIt

判断上传文件是否是图片文件

方法一:用image对象判断是否为图片 /// <summary> /// 判断文件是否为图片 /// </summary> /// <param name="path">文件的完整路径</param> /// <returns>返回结果</returns> public Boolean IsImage(string path) { try { System.Drawing.Image img = System.D

[转]C#在WinForm下使用HttpWebRequest上传文件并显示进度

/// <summary> /// 将本地文件上传到指定的服务器(HttpWebRequest方法) /// </summary> /// <param name="address">文件上传到的服务器</param> /// <param name="fileNamePath">要上传的本地文件(全路径)</param> /// <param name="saveName&qu

Android上传图片到PHP服务器并且支持浏览器上传文件(word、图片、音乐等)

暑假已经过了一半了,这才完成计划当中的第二个任务.虽然进度是慢了点.但也算是暑假的收获吧.下面我就把我学习当中的收获记录在此. 还是跟以往一样,先上图片. 操作的步骤:打开程序---->选择上传的照片----->点击返回键------>显示没有选择上传图片的toast------>点击上传的图片----->打印图片的存储的物理路径---->询问是否确认上传选择的图片----->确认则显示上传成功---->取消则退出 php代码: <?php //上传文

一款简单实用的上传文件图片插件并且兼容移动端zyupload.js

1.下载zyupload插件包 包含的文件如下图: 2.在/images/fileType文件夹下定义上传文件的显示图标 如下图所示: 3.打开zyupload.js,修改上传后显示文件图标路径 如下图所示: 4.调用的JS代码 <link rel="stylesheet" href="~/Content/assets/css/zyupload-1.0.0.min.css"> <script type="text/javascript&q

在使用 AjaxFileUpload 上传文件时,在项目发布到 iis 后,图片不能预览

在使用 AjaxFileUpload  上传文件时,图片已经上传成功了,在站点没有发布时,可以预览,可是在项目发布到 iis 后,图片就不能预览,在网上找了很多的方案也没解决,最后的解决方案如下: 1.开始运行 regedit 打开注册表,先备份注册表 2.找到 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\HTTP\Parameters 3.在 编辑 菜单上指向 新建 ,然后单击 DWORD 值 . 4.键入 EnableAggres

js上传文件

一.原始的XMLHttpRequestjs上传文件过程(参考地址:http://blog.sina.com.cn/s/blog_5d64f7e3010127ns.html) 用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 FormData 对象,还在用IE6 ? 只能仰天长叹.... 有了这两个对象,我们可以真正的实现Ajax方式上传文件. 示例代码: