美文网首页
ThinkPHP实现 预览上传图片

ThinkPHP实现 预览上传图片

作者: geeooooz | 来源:发表于2018-05-08 10:31 被阅读53次

    html:

    <!DOCTYPE html>
    <html>
    <include file="Public/header" />
    <link rel="stylesheet" href="__WECHAT__/css/aui.css" /> 
    <link rel="stylesheet" href="__WECHAT__/css/weui.min.css" /> 
     </head> 
     <style>
        .weui-cell{padding:1.5px 15px!important;}
     </style>
     <body> 
      <div class="weui-cells  weui-cells_form"> 
      <form action="{:U('Demo/ceshi')}" method="post" class="form-horizontal js-ajax-forms" enctype="multipart/form-data">
        <div class="weui-bd"> 
        
        
        <div class="weui-cell">
           <div class="weui-cell__hd"> 
                <label for="info_photo" class="col-sm-2 control-label">物品图片</label>
           </div>
           <div class="weui-cell__bd">
            <span class="btn btn-success btn-file">
             <input type="file" class="weui-input" required="required" name="info_photo" value="" id="info_photo"
             onchange='PreviewImage(this)' />
            </span>
           </div>
          </div>
          
          <div class="weui-cell">
           <div class="weui-cell__hd">
            <div id="photo_info" class="photo_info"></div>
           </div>
          </div>
          
            <a class="weui-cell weui-cell_access">
                    <div class="submit">
                            <input type="submit" id="txt" style="color:#fff;background:none;font-size:15px;" value="注册"/>
                    </div>
                </a>
       </div> 
       </form>
      </div> 
      <div class="weui-footer"> 
       <p class="weui-footer__text">Copyright &copy; 2008-2016 工伤镖局</p> 
      </div> 
    <script type="text/javascript" src="__JS__/jquery-3.1.0.min.js"></script> 
    <script type="text/javascript">
    function clickButton(obj){
        var phone=$("input[name='phone']").val();
            $.post({
                url: "{:U('Demo/sendMsg')}",
                type: "post",
                data: {
                      phone:phone, 
                },
                dataType: "json",
                success: function(data){
                }
        });
        var obj = $(obj);
        obj.attr("disabled","disabled");/*按钮倒计时*/
        var time = 60;
        var set=setInterval(function(){
        obj.val(--time+"(s)");
        }, 1000);/*等待时间*/
        setTimeout(function(){
        obj.attr("disabled",false).val("重新获取验证码");/*倒计时*/
        clearInterval(set);
        }, 60000);
    }
    </script>  
    <script type="text/javascript">
    <!-- 对比两次输入的密码 -->
    function validate() {
        var pwd1 = document.getElementById("pwd1").value;
        var pwd2 = document.getElementById("pwd2").value;
    
        if(pwd1 == pwd2) {
            document.getElementById("tishi").innerHTML="<font color='green'>两次密码相同</font>";
        }
        else {
            document.getElementById("tishi").innerHTML="<font color='red'>两次密码不相同</font>";
        }
    }
    </script>
    <script type="text/javascript">//上传图片立即预览
     function PreviewImage(imgFile) {
      var filextension = imgFile.value.substring(imgFile.value
        .lastIndexOf("."), imgFile.value.length);
      filextension = filextension.toLowerCase();
      if ((filextension != '.jpg') && (filextension != '.gif')
        && (filextension != '.jpeg') && (filextension != '.png')
        && (filextension != '.bmp')) {
       alert("对不起,系统仅支持标准格式的照片,请您调整格式后重新上传,谢谢 !");
       imgFile.focus();
      } else {
       var path;
       if (document.all)//IE
       {
        imgFile.select();
        path = document.selection.createRange().text;
        document.getElementById("photo_info").innerHTML = "";
        document.getElementById("photo_info").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""
          + path + "\")";//使用滤镜效果  
       } else//FF
       {
        path = window.URL.createObjectURL(imgFile.files[0]);// FF 7.0以上
        //path = imgFile.files[0].getAsDataURL();// FF 3.0
        document.getElementById("photo_info").innerHTML = "<img id='img1' width='120px' height='100px' src='"+path+"'/>";
        //document.getElementById("img1").src = path;
       }
      }
     }
     </script>
     </body>
    </html>
    

    PHP:

    public function ceshi()
        {
            $img=is_uploaded_file($_FILES['info_photo']['tmp_name']);
            //如果有上传文件,获取新文件id
            if($img){
                $upload = new \Think\Upload();// 实例化上传类
                $upload->maxSize   =     5*1024*1024 ;// 设置附件上传大小
                $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg','bmp');// 设置附件上传类型
                $upload->rootPath  =     './public'; // 设置附件上传根目录
                $upload->savePath  =     '/upload/'; // 设置附件上传(子)目录
                // 上传文件
                $f=$_FILES['info_photo'];
                $imginfo   =   $upload->uploadOne($f);
                if(!$imginfo) {
                    $error="上传图片失败".$upload->getError();
                }else{
                    $idata=$imginfo['savepath'].$imginfo['savename'];
                    dump($idata);die;
                }
            }
        }
    

    相关文章

      网友评论

          本文标题:ThinkPHP实现 预览上传图片

          本文链接:https://www.haomeiwen.com/subject/vvsirftx.html