主页

<!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. golang 之 bson 与 struct 转换

    bson的介绍不说了golang下的解析包找到2个 一个是mongo的http://labix.org/gobson,另外一个比较小众https://github.com/sbunce/bson这里用 ...

  2. Bug Tracker

    Bug Tracker 使用笔记(有图有真相)   目的:管理Bug,完善业务流程. 前提条件:BugTracker是基于IIS和SQL Server和Asp.Net的.相当于一个Web端的管理系统. ...

  3. 如何本地测试例如QQ登录等第三方接口

    前言:现在基本是个网站就会集成第三方的一些接口,比如QQ登录.分享等等.但是在开发的时候,尤其是没有这方面经验的开发人员来说,调试流程时会显得迷茫,不知道怎么调试.这里就个人的这方面学习摸索做一个总结 ...

  4. ELF二进制目标文件详解

    以下内容为<<linux内核编程>>笔记 链接程序 找出所有引用的外部模块并链接起来,这些外部模块或函数库一般来自于开发者,操作系统和C运行库. 链接程序取出这些函数库,修订指 ...

  5. slxna，游戏页面切到后台回来后返回sl页面导致sl页面无响应，解决方法。

    slxna在wp7上表现很好,因为那会xna还是微软的亲儿子.但是到wp8时代,微软丢弃xna,不管不问了.但是丢之前没有把兼容搞的完美,以致有很多隐秘的坑,说不定就踩到了. 我这个游戏的sl页面用了 ...

  6. .NET：再论异常处理，一个真实的故事

    .NET:再论异常处理,一个真实的故事 背景 关于是使用枚举或布尔类型来表示方法执行状态,还是使用异常,可以参考这里的文章:http://www.google.ee/search?q=site%3Aw ...

  7. 实用的android颜色配置表（亮瞎尼的双眼）

    android开发中,常常会用到color.xml颜色配置,好的颜色配置可以让尼的应用让人看起来赏心悦目! 不罗嗦,上图先 该工程已经罗列了常用的颜色配置 附上工程链接:http://download ...

  8. Javascript_Dom编程 阅读笔记（1）

    寻找html页面中的节点 所有文档节点getElementsByTagName("*"); document.getElementsByTagName("*") ...

  9. Android 点击桌面快捷方式和Notifycation跳转到Task栈顶Activity

    我们一般下载的应用在第一次启动应用的时候都会给我创建一个桌面快捷方式,然后我在网上找了些资料整理下了,写了一个快捷方式的工具类,这样我们以后要创建快捷方式的时候直接拷贝这个类,里面提供了一些静态方法, ...

  10. java布尔值进行and和or逻辑运算原理

    先看看如下代码: public class Test { public static void test() { boolean a = true; boolean b = false; if (a ...