6.28 头像预览：form方法和ajax方法

一用form实现头像预览

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="../public/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <title>Document</title>
    <style type="text/css">
        #sc{
            display:none;
        }
        #showing{
            width:100px;
            height: 100px;
            background-image: url(../0626liucheng/upfile/1530091054aa.jpg);
            background-size:100% 100%;
        }
        
        #upfile{
            opacity:0;
            width: 100%;
            height: 100%;
        }    
    </style>
</head>
<body>
    <form action="chuli.php" method="post" id="sc_form" enctype="multipart/form-data" target="sc">
        <div id="showing">                                                     <!-- target 属性规定在何处打开 action URL。-->
            <input type="file" name="upfile" id="upfile" value="" onchange="$('#sc_form').submit()"/>
        </div>
    </form>
    <!--<iframe> 标签规定一个内联框架。
                         一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。-->
    <iframe id="sc" name="sc" src="" width="" height="">
        <!--PHP传过来的js代码-->
    </iframe>
</body>
</html>
<script type="text/javascript">
    //当提交表单时，会发生 submit 事件。
    /*function aa(){
        $("#sc_form").submit();
    }*/
    function showImage(url){
        //alert(url);
        $("#showing").css("background-image","url("+url+")");
    }
</script>
============================处理页面=======================================
<?php
         //var_dump($_FILES['upfile']);
      $name = $_FILES['upfile']['name'];
      $type = $_FILES['upfile']['type'];
      $tmp_name = $_FILES['upfile']['tmp_name'];//储存的临时文件名，一般是系统默认。
      $error = $_FILES['upfile']['error'];
      $size = $_FILES['upfile']['size'];
      if(!empty($name)){
          if($error<=0){
              if($type =="image/jpeg"){
                  if($size<=100000){
                      if(!is_dir("./upfile/")){
                          mkdir("./upfile/");
                      }
                      $path ="./upfile/".$name;
                      //转换编码格式
                    //$filename = iconv("UTF-8","gb2312",$filename);
                      if(move_uploaded_file($tmp_name,$path)){
                          echo "<script> window.parent.showImage('{$path}');</script>";
                         //在iframe的父级当前页面调用js代码
                      }
                  }
              }
          }
      }
?>

二 用ajax方法实现头像预览

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="../public/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../public/ajaxfileupload.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        #showing{
            width:100px;
            height: 100px;
            background-image: url(../0626liucheng/upfile/1530091054aa.jpg);
            background-size:100% 100%;
        }
        #upfile{
            opacity:0;
            width:100%;
            height: 100%;
        }    
    </style>    
</head>
<body>
    <div id="showing">
        <input type="file" name="upfile" id="upfile" value="" title="上传附件" />
    </div>
    <input type="button" value="上传" onclick="upload()"/>
</body>
</html>
<script type="text/javascript">
    function upload(){
        var path = $("#upfile").val();
        if($.trim(path)==""){
            alert("请选择要上传的文件");
            return;
        }
        $.ajaxFileUpload({
            type:"post",
            url:"chuli2.php",//这是服务器处理的代码
            secureuri:false,//是否启用安全提交，默认为false
            fileElementId:'upfile',//上传文件的id，name属性名
            dataType:"text",//返回值类型，一般设置为json，application/json
            data:{
                
            },//传递参数到服务器
            success:function(data){
                $("#showing").css("background-image","url("+data+")");
            }
        });
        $
    }
</script>


<?php
     //var_dump($_FILES['upfile']);
      $name = $_FILES['upfile']['name'];
      $type = $_FILES['upfile']['type'];
      $tmp_name = $_FILES['upfile']['tmp_name'];//储存的临时文件名，一般是系统默认。
      $error = $_FILES['upfile']['error'];
      $size = $_FILES['upfile']['size'];
      if(!empty($name)){
          if($error<=0){
              if($type =="image/jpeg"){
                  if($size<=100000){
                      if(!is_dir("./upfile/")){
                          mkdir("./upfile/");
                      }
                      $path ="./upfile/".$name;
                      //转换编码格式
                    //$filename = iconv("UTF-8","gb2312",$filename);
                      if(move_uploaded_file($tmp_name,$path)){
                          echo $path;
                      }
                  }
              }
          }
      }
?>

 

posted @ 2018-06-28 18:37  sun1987  阅读(202)  评论(0)    收藏  举报