主页

<!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. c#QQ连连看辅助

    近来无事,写个连连看辅助,下面先说下思路吧(口才不行,见谅哈) 游戏辅助有三种方法,一种是读内存,这个不知道怎么分析,还有一种是获取封包,这个分析起来复杂,最后一种是图片识别再分析,这里采用最后一种 ...

  2. 网​址​U​R​L​中​特​殊​字​符​转​义​编​码

    网址URL中特殊字符转义编码 字符 - URL编码值 空格 - %20 " - %22 # - %23 % - %25 & - %26 ( - %28 ) - %29 + - %2B ...

  3. 企业架构研究总结（31）——TOGAF架构内容框架之内容元模型（下）

    2.2 治理扩展(Governance Extensions) 治理扩展元模型内容 治理扩展部分的意图在于引入额外的,并且与支持运营治理的目标和业务服务相关的结构化数据. 2.2.1 关注范围 为目标 ...

  4. js闭包和ie内存泄露原理

    也议 js闭包和ie内存泄露原理 可以, 但小心使用. 闭包也许是 JS 中最有用的特性了. 有一份比较好的介绍闭包原理的文档. 有一点需要牢记, 闭包保留了一个指向它封闭作用域的指针, 所以, 在给 ...

  5. IOS学习之路六（UITableView滑动删除指定行）

    滑动删除指定行代码如下: Controller.h文件 #import <UIKit/UIKit.h> @interface TableViewController : UIViewCon ...

  6. linux shell基础语法

    1.第一个Shell脚本 打开文本编辑器,新建一个文件,扩展名为sh(sh代表shell),扩展名并不影响脚本执行,见名知意就好,如果你用php写shell 脚本,扩展名就用php好了. 输入一些代码 ...

  7. 《C++游戏开发》笔记十二 战争迷雾：初步实现

    本系列文章由七十一雾央编写,转载请注明出处.  http://blog.csdn.net/u011371356/article/details/9475979 作者:七十一雾央 新浪微博:http:/ ...

  8. asp.net 上传文件

    文件上传实例 公司产品中一直是采用 flash 实现文件上传功能,但用户的需求多了以后遇到了越来越多难以解决的问题,最后试着用硕正提供的freeform.小型页面控件来解决. 硕正文件上传的实现途径有 ...

  9. 使用ResourceDictionary管理Logical Resources

    WPF整理-使用ResourceDictionary管理Logical Resources “Logical resources may be of various types, such as br ...

  10. 项目中出现黄色感叹号 教你去掉Myeclipse的黄色感叹号

    点击Window>>Preferences>>General>>Editors>>Text Editors>>Annotations 选中右 ...