PHP文件上传预览
主页
<!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文件上传预览的更多相关文章
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...
- 用file标签实现多图文件上传预览
效果图: js 代码: <script> //下面用于多图片上传预览功能 function setImagePreviews(avalue) { var docObj = document ...
- React + js-xlsx构建Excel文件上传预览功能
首先要准备react开发环境以及js-xlsx插件 1. 此处省略安装react安装步骤 2.下载js-xlsx插件 yarn add xlsx 或者 npm install xlsx 在项目中引入 ...
- [js] - 前端FileReader使用,适用于文件上传预览.(并未传入后端)
<body> <div class="box"> <div class="container"> <ul> &l ...
- h5图片上传预览
项目中常用到文件上传预览功能,整理一下:如果不想使用 type="file" 的默认样式,可以让其覆盖在一个按钮样式上边,设其透明度为0,或者使用Label关联 html < ...
- PHP WAMP 文件上传 及 简单的上传预览
...... 使用特殊的表单类型file, 主(上传)页面: <form action="chuli.php" method="post" enctype ...
- 上传文件的三种方式xhr,ajax和iframe及上传预览
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html,图片上传预览，input file获取文件等相关操作
input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 ...
- 用html5文件api实现移动端图片上传&预览效果
想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象 Blob表示原始二进制数据,Html5的file对象就继 ...
随机推荐
- Vnix项目正式启动
历经3年的学习时间,我从Puppy Linux到各种常见的Linux发行版,从Gentoo Linux再到LFS,期间学会了LiveCD.中文化定制.服务器搭建.Google Key Search.C ...
- [google面试CTCI] 1-4.判断两个字符串是否由相同字符组成
[字符串与数组] Q:Write a method to decide if two strings are anagrams or not 题目:写一个算法来判断两个字符串是否为换位字符串.(换位字 ...
- 一个使用MVC3+NHibernate “增删改查” 的项目
一个使用MVC3+NHibernate “增删改查” 的项目 前言: 谈到NHibernate大伙并不陌生,搞Java的更是清楚,Hibernate是一个目前应用的最广泛的开放源代码的对象关系映射框 ...
- WCF心跳判断服务端及客户端是否掉线并实现重连接
WCF心跳判断服务端及客户端是否掉线并实现重连接 本篇文章将通过一个实例实现对WCF中针对服务端以及客户端是否掉线进行判断:若掉线时服务器或客户端又在线时将实现自动重连:将通过WCF的双工知识以及相应 ...
- ASP.NET Web API的消息处理管道: HttpRoutingDispatcher
ASP.NET Web API的消息处理管道: HttpRoutingDispatcher 认情况下,作为消息处理管道“龙头”的HttpServer的Dispatcher属性返回一个HttpRouti ...
- gettimeofday(struct timeval *tv, struct timezone *tz)函数
gettimeofday(struct timeval *tv, struct timezone *tz)函数 功能:获取当前精确时间(Unix时间) 其中: timeval为时间 truct tim ...
- Android ListView多布局讲解
Listview优化是一个老生常谈的事情了,其优化的方面也有很多种,例如,布局重用.在getView()中减少逻辑计算.减少在页面滑动的时候加在图片,而是在页面停止滚动的时候再加在图片.而今天要介绍的 ...
- [APUE]进程控制(中)
一.wait和waitpid函数 当一个进程正常或异常终止时会向父进程发送SIGCHLD信号.对于这种信号系统默认会忽略.调用wait/waidpid的进程可能会: 阻塞(如果其子进程都还在运行); ...
- eclipse安装svn插件的多种方式
方法一:在线安装 1.打开HELP->MyEclipse Configuration Center.切换到SoftWare标签页. 2.点击Add Site 打开对话框,在对话框Name输入Sv ...
- [jstips]向数组中插入一个元素
向现有数组中插入一个元素是经常会见到的一个需求.你可以: 使用push将元素插入到数组的尾部: 使用unshift将元素插入到数组的头部: 使用splice将元素插入到数组的中间: 上面那些方法都是常 ...