前台页面显示

<style type="text/css">

#yl{ width:200px; height:300px; background-image:url(img/11.png); background-size:200px 300px;}

#file{ width:200px; height:300px; float:left; opacity:0;} /*设置透明，当点击图像时，即点击了上传文件文本框*/

</style>

</head>

<body>

<form id="sc" action="chuli.php" method="post" enctype="multipart/form-data" target="shangchuan">

    <input type="hidden" name="tp" value="" id="tp" />

    <div id="yl">

        <input type="file" name="file" id="file" onchange="document.getElementById('sc').submit()" />

    </div>

</form>

<iframe style="display:none" name="shangchuan" id="shangchuan">

</iframe>

</body>

<script type="text/javascript">

//回调函数,调用该方法传一个文件路径，该变背景图

function showimg(url)

{

    var div = document.getElementById("yl");

    div.style.backgroundImage = "url("+url+")";

    document.getElementById("tp").value = url;

}

</script>

</html>

处理页面代码

<?php

if($_FILES["file"]["error"])

{

    echo $_FILES["file"]["error"];

}

else

{

    if(($_FILES["file"]["type"]=="image/jpeg" || $_FILES["file"]["type"]=="image/png")&& $_FILES["file"]["size"]<1024000)

    {

        $fname = "./img/".date("YmdHis").$_FILES["file"]["name"];    

        $filename = iconv("UTF-8","gb2312",$fname);

        if(file_exists($filename))

        {

            echo "<script>alert('该文件已存在！');</script>";

        }

        else

        {

            move_uploaded_file($_FILES["file"]["tmp_name"],$filename);

            unlink($_POST["tp"]);

            echo "<script>parent.showimg('{$fname}');</script>";

        }

    }

}

php部分--头像上传预览的更多相关文章

  1. jQuery插件ImgAreaSelect 实例讲解一（头像上传预览和裁剪功能）

    上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其 ...

  2. php头像上传预览

    php头像上传带预览: 说道上传图片,大家并不陌生,不过,在以后开发的项目中,可能并不会让你使用提交刷新页面式的上传图片,比如上传头像,按照常理,肯定是在相册选择照片之后,确认上传,而肯定不会通过fo ...

  3. input file图片上传预览

    两种方法,方法一: js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $ ...

  4. input file图片上传预览效果

    两种方法,方法一: js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $ ...

  5. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  6. 12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转

    文本编辑器插件:1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包:tinymce/js/tinymce/langs目录下 ...

  7. signup图片上传预览经常总结

    html <html> <head> <meta charset="utf-8" /> <meta http-equiv="X- ...

  8. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  9. PHP WAMP 文件上传 及 简单的上传预览

    ...... 使用特殊的表单类型file, 主(上传)页面: <form action="chuli.php" method="post" enctype ...

随机推荐

  1. 解决IE6的PNG透明

    http://www.jb51.net/article/35669.htm http://blog.csdn.net/mosliang/article/details/6760028

  2. HttpModel 和 HttpHandle

    页面的请求过程: HttpRequest-> inetinfo.exe-> aspnet_isapi.dll-> Http pipeline(命名管道)-> aspnet_wp ...

  3. （转）堆heap和栈stack

    一 英文名称 堆和栈是C/C++编程中经常遇到的两个基本概念.先看一下它们的英文表示: 堆――heap 栈――stack 二 从数据结构和系统两个层次理解 在具体的C/C++编程框架中,这两个概念并不 ...

  4. HDU 4866 Shooting （主席树）

    题目链接  HDU 4866 题意  给定$n$条线段.每条线段平行$x$轴,离x轴的距离为$D$,覆盖的坐标范围为$[L, R]$.   现在有$m$次射击行动,每一次的射击行动可以描述为在横坐标$ ...

  5. Codeforces 766E Mahmoud and a xor trip（树形DP）

    题目链接 Mahmoud and a xor trip 树形DP.先考虑每个点到他本身的距离和,再算所有点两两距离和. 做的时候考虑二进制拆位即可. #include <bits/stdc++. ...

  6. POJ2104 K-th Number(线段树)

    题目链接 K-th Number #include <cstdio> #include <cstring> #include <iostream> #include ...

  7. 余秋雨的话（与OI无关）

    余秋雨的话 1.假如你想要一件东西,就放它走.它若能回来找你,就永远属于你:它若不回来,那根本就不是你的. 2. 一个人会落泪,是因为痛:一个人之所以痛,是因为在乎:一个人之所以在乎,是因为有感觉:一 ...

  8. gradients的一些注意点

    Each variable has a [.grad_fn] attribute that references a Function that has created the Variable(ex ...

  9. linux 项目管理、服务器管理、服务器维护

    代码打包:tar -zcvf ImOra.3.2.6.tgz --exclude=Public/.htaccess --exclude=Apps/Demo Apps/ Config/ Shell/ L ...

  10. mysql-实现远程连接(授权法)

    远程连接阿里云主机的mysql,遇到以下问题: 1.连接被拒,无法连接 可能原因:1.3306(默认)端口未开放,在控制台设置防火墙规则: 2. host字段的值改为%就表示在任何客户端机器上能以ro ...