主页

<!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. sublime text 3 插件：package control

    sublime text 3安装package control import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf ...

  2. python学习之路二（字符串，字典，序列和元组）

    # -*- coding: utf-8 -* ''' Created on 2013-7-26 @author: lixingle ''' #!/usr/bin/python import math# ...

  3. golang环境搭建

    golang环境搭建 好久没写博客了,最近加班好厉害,加到自己都觉得不太适合这个行业了,每天头都是沉甸甸的,可惜今年注定不是收获的季节. 最近忙里偷闲在学习nodejs,赶巧看到golang的文章,一 ...

  4. Nvelocity模板引擎开发网页

    在ASP.NET网站开发中,我们要做许多的网页,如果多个网页的内容框架有些重复使用,我们用NVelocity模板引擎,就可以把相同的部分html代码单独放在一个文件中就行了,当要使用的时候,只需使用# ...

  5. Oracle JDBC存入图片Blob

    创建测试表 create table test_img( id integer primary key, name ), image blob ); 存储图片 import java.io.FileI ...

  6. 数据访问模式之Repository模式

    数据访问模式之Repository模式   数据访问层无非就是对数据进行增删改查,其中增.删.改等我们可以抽象出来写一个公共的接口或抽象类来定义这些方法,并采用一个基类实现这些方法,这样该基类派生的子 ...

  7. JavaEE：Eclipse开发工具的相关使用和XML技术

    Eclipse开发工具的知识点1.工程的属性(properties)1)Text file encoding  工程编码(在导入其他工程时,注意编码类型一致)2)Java build path设置cl ...

  8. Android数据存储汇总

    1.sharedpreference,存储简单的信息,比如用户名,密码 package com.google.datastore.sharep; import android.app.Activity ...

  9. java 逆波兰表达式

    最近想把这破机 装成WIN7 想想还是算了 ...  反正用的机会也不多. 不过 发现了一些 想念的东西 从前的作业. 从前的记忆. package org.lmz; import java.util ...

  10. Web开发必回知识点

    Web前端必须知道 一.常用那几种浏览器测试?有哪些内核(Layout Engine)? 1.浏览器:IE,Chrome,FireFox,Safari,Opera. 2.内核:Trident,Geck ...