主页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<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>

处理页面（chuli.php）

<?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. 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...

  2. 用file标签实现多图文件上传预览

    效果图: js 代码: <script> //下面用于多图片上传预览功能 function setImagePreviews(avalue) { var docObj = document ...

  3. React + js-xlsx构建Excel文件上传预览功能

    首先要准备react开发环境以及js-xlsx插件 1. 此处省略安装react安装步骤 2.下载js-xlsx插件 yarn add xlsx 或者 npm install xlsx 在项目中引入 ...

  4. [js] - 前端FileReader使用,适用于文件上传预览.(并未传入后端)

    <body> <div class="box"> <div class="container"> <ul> &l ...

  5. h5图片上传预览

    项目中常用到文件上传预览功能,整理一下:如果不想使用 type="file" 的默认样式,可以让其覆盖在一个按钮样式上边,设其透明度为0,或者使用Label关联 html < ...

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

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

  7. 上传文件的三种方式xhr,ajax和iframe及上传预览

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. html,图片上传预览，input file获取文件等相关操作

    input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 ...

  9. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

随机推荐

  1. 关于grub的那些事（一）

    /etc/default/grub里的秘密: # If you change this file, run 'update-grub' afterwards to update # /boot/gru ...

  2. CLR的组成和运转

    CLR的组成和运转 clr基本 CLR(Common Language Runtime)是一个可由多种编程语言使用的“运行时”.(例如:c#,c++/cli,vb,f#,ironpython,iron ...

  3. MongoDB学习之--增删改查（2）

    昨天简单介绍了官方驱动操作MongoDB进行增删查操作的,今天继续介绍更新操作..... 方法简介 官方驱动中更新操作使用collection的Update方法,有泛型和非泛型两个版本: 其签名如下( ...

  4. 老鸟都应该注意的git 提交规范

    不知道大家有没有看过自己项目的git 提交信息-----我看过好多次 ,不忍直视  然后提醒一起的小伙伴 :大家规范点 信息要详细, 过段时间再看下 ,还是一样. 相信很多猿都有这样的感受,对于垃圾的 ...

  5. synchronized简介

    synchronized简介 Java提供了一种内置的锁机制来支持原子性:同步代码块(Synchronized Block).同步代码块包括两部分:一个作为锁对象的引用,一个作为由这个锁保护的代码块. ...

  6. Android Chronometer控件使用，计时器

    Android Chronometer实现了一个简单的计时器,继承自TextView,因此可以使用TextView的text控制属性来控制时间显示的颜色.字体大小等:可以定义时间显示格式,默认“MM: ...

  7. WCF服务属性注入基础设施

    WCF服务属性注入基础设施 WCF的服务的创建行为:使用默认构造函数创建WCF服务对象.如果我们想要在WCF内使用外部对象,最简单的方式就是把外部对象做成全局对象.然而这样的话会增加全局对象的数量,让 ...

  8. [置顶] 如何高效使用和管理Bitmap--图片缓存管理模块的设计与实现

    传送门 ☞ 轮子的专栏 ☞ 转载请注明 ☞ http://blog.csdn.net/leverage_1229 上周为360全景项目引入了图片缓存模块.因为是在Android4.0平台以上运作,出于 ...

  9. Linux下逻辑卷创建与管理

    用虚拟机加一块硬盘后,查看硬盘状况,使用fdisk-l命令: [root@jerrybj ~]# fdisk -l Disk /dev/sda: 21.4 GB, 21474836480 bytes ...

  10. 深入浅出学习Spring框架（四）：IoC和AOP的应用——事务配置

    在前文 深入浅出学习Spring框架(一):通过Demo阐述IoC和DI的优势所在. 深入浅出学习Spring框架(三):AOP 详解 分别介绍了Spring的核心功能——IoC和AOP,光讲知识远远 ...