文件上传(带有预览模式)

这里所讲的预览是将文件上传至后台之后,代码调用服务器端文件,在网页中显示出来

第一:网页显示部分 和  显示区域css样式表

<body>
<h1>文件上传</h1>
<form action="chuli.php" method="post" enctype="multipart/form-data" id="sc" target="hidden_frame">
  <div id="yl">
    <input type="file" name="file" id="wj" onchange="document.getElementById(‘sc‘).submit()"/>
  </div>
    <input type="button" value="上传"/>
</form>

<iframe name="hidden_frame" style="display:none;">
</iframe>
</body>

  

第二:JScript代码部分函数showing()

<script type="text/javascript">

function showing(aa)
{
	var bb=document.getElementById("yl");
	bb.style.backgroundImage="url("+aa+")";
}

</script>

  

第三:后台运行代码

<?php
//var_dump($_FILES["file"]);
//判断文件上传是否失败

if(!$_FILES["file"]["error"])
{

	//限制上传文件类型
	if(($_FILES["file"]["type"]=="image/png"||$_FILES["file"]["type"]=="image/jpeg")&&($_FILES["file"]["size"]<=1048576))
	{
		//造文件存储的路径
		$filename="./img/".date("YmdHis",time()).$_FILES["file"]["name"];
		//$filename="./img/kaifa/zhangsan/20160523/".$_FILES["file"]["name"];

		//修改文件名编码格式(主要针对汉字乱码)
		$filename=iconv("utf-8","gb2312",$filename);

		//判断文件名是否重复
		if(file_exists($filename))//文件存在
		{
			echo "该文件已经存在!";
		}
		else
		{
			move_uploaded_file($_FILES["file"]["tmp_name"],$filename);  //将文件临时路径换成自己定义的路径

			echo "<script type=‘text/javascript‘>parent.showing(‘".$filename."‘)</script>";
		}
	}
	else
	{
		echo "上传文件类型不支持";
	}
}
else
{
	echo "文件上传失败";
}

  

时间: 2024-08-01 22:47:36

文件上传(带有预览模式)的相关文章

【转】文件上传前预览

网上找到的一份文件上传前预览的代码,转自JavaScript 图片的上传前预览(兼容所有浏览器) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> #preview, .img, img { w

form表单系列中文件上传及预览

文件上传及预览 Form提交 Ajax 上传文件 时机: 如果发送的[文件]:->iframe, jQurey(),伪Ajax 预览 import os img_path = os.path.join('static/img', fafafa.name) with open(img.path, 'wb') as f: for item in fafafa.chunks(): f.write(item) function iframeSubmit(){ $('#ifm1').load(functi

js的FileReader实现图片文件上传、预览

js的FileReader实现图片文件上传.预览 FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片)内嵌在网页之中,不用放到外部文件.使用Data URL的好处是,您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料:而缺点便是,网页的大小可能会变大.它适合应用在内嵌小图片,不建议将大图像文件编码成Data URL来使用.您的图像文件不能够超过浏览器限定的大小,否则无法读取图像文件.1

form里面文件上传并预览

其实form里面是不能嵌套form的,如果form里面有图片上传和其他input框,我们希望上传图片并预览图片,然后将其他input框填写完毕,再提交整个表单的话,有两种方式! 方式一:点击上传按钮的链接弹出上传页面,上传文件,上传完毕再返回表单页面:这种比较简单,其实就是表单页面的上传按钮仅仅是一个链接,仅用于打开上传文件的弹出页面: 方式二:就是表单里面有<input type="file" name="picture"/>,点击上传按钮后,会在上传

servlet实现文件上传,预览,下载和删除

CreateTime--2017年9月4日09:24:59 Author:Marydon 一.准备工作: 1.1 文件上传插件:uploadify: 1.2 文件上传所需jar包:commons-fileupload-1.3.1.jar和commons-io-2.2.jar 1.3 将数据转成JSON对象需要jar包:commons-beanutils-1.8.3.jar.commons-collections-3.2.1.jar.commons-lang-2.6.jar.commons-log

结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程

1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用,整合两者可以实现我们常规的Web数据导入操作,导入数据操作过程包括有上传文件,预览数据,选择并提交记录等一系列操作. 关于这个插件,我在早期随笔<Bootstrap文件上传插件File Input的使用>也做了一次介绍,这是一个增强的 HTML5 文件输入控件,是一个 Bootstrap 3.x

支持多文件上传,预览,拖拽,基于bootstra的上传插件fileinput 的ajax异步上传

首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="__PUBLIC__/CSS/fileinput.css" /> <script type="text/javascript&

JQ图片文件上传之前预览功能

1.先准备一个div onchange触发事件 <input  type="file" onchange="preview(this)" ></span> <div id="preview"></div> 2.写JS代码 //上传图片之前预览图片function preview(file){ if (file.files && file.files[0]){ var reader =

web端文件上传,预览,下载,删除

//HTML部分 <div class="item attachment attachmentNew"> <span class="name">附件</span> <span class="triggerUpLoad btnSpan" onclick="triggerUpLoadList(this)" v-show="operationType<2">&

实现图片文件上传之后预览

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title></head> <body> <input type="file" id="file" name="" /> <div id=