首先，我们要创建一个前台页面用于操作选择文件等：

<body>

	<div id="div1"></div>

	<form action="doAddImg.php" method="post" enctype="multipart/form-data" id="form">

		<br />

		<input type="file" name="myImg[]" multiple="multiple" accept="image/*" id="img" />

		<input type="hidden" name="userName" id="userName" />

		<input type="hidden" name="time" id="time" />

		<br /><br />

	</form>

	<input type="button" id="submit" value="发布图片" />

	<h1>精彩图片展示</h1>

	<hr>

	<div id="tupianqv">

	</div>

</body>

如上述代码所示，由于在表单提交时要进行其他操作，所以不能使用form表单自带的submit按钮，而应该使用自己定义的按钮添加submit事件来进行操作，也因此

<input type="button" id="submit" value="发布图片" />

不能写在form表单里。同时也预留了空的id为#div1和#tupianqv的空div作为展示区使用。

以下是JQUERY代码：

<script src="libs/jquery-1.10.2.js"></script>  //首先加载jquery插件

<script  type="text/jscript">

	$(function(){

		getData();

		var userName = '<?php echo isset($_GET["name"])?$_GET["name"]:"null"; ?>'; //获取从上一个页面获得的name的值，判断是否合法

		if(userName=="null"){

			location = "login.php";

		}

		$("#div1").html("欢迎您，<span style='color:red;'>"+userName+"</span>"); //将获取的name的值添加到#div1里的<span></span>标签里

		$("#submit").on("click",function(){  //获取用于提交表单数据的按钮，绑定事件

			if(!$("#img").val()){　　　　　//通过#img的值是否为空判断有没有选择图片，如果没有选择，不能提交，否则继续执行

				alert("图片至少上传一张！");

				return false;

			}

			$("#userName").val(userName);//将一开始获得的name的值传给id为#userNam的e隐藏input的value

			$("#time").val(getTime());   //将获得的时间数据传给id为#time的隐藏input的value

			$("#form").submit();         //将form表单的数据提交到新页面

		});

	});

	function getData(){   //对从后台获得的数据进行处理的函数

		$.post("doShowImg.php",function(data){ //通过Ajax从doShowImg.php中获得数据进行处理

			var arr = data.split("[;]"); //由于后台发过来的数据是由"[;]"字符串链接的一整串字符串，所以用split("[;]")函数可以将该字符串以"[;]"分成一组组数据组成的数组

			arr.pop(); // 该数组最后会多出一个"[;]"，因此用pop()删掉数组的最后一个元素

			for (var i=0;i<arr.length;i++) { //遍历该数组

				var img = $.parseJSON(arr[i]); //$.parseJSON(arr[i])函数可将数组中存的每一串字符串解析成对象

				//将该对象的每一个键对应的值设为一个div里的元素
　　　　　　　　　　　　　　　　　　 var div = "<br/><div id='div"+i+"' style='width:98%; overflow-y:hidden; '>用户名："+img.userName+"     发布时间："+img.time+"<br/><br/>";

				for (var j=0;j<img.imgArr.length;j++) { //图片可能不止一张，通过for循环给img标签赋上相应的src地址

					div += "<img src='"+img.imgArr[j]+"' style='height:100px'/>   ";

				}

				div += "</div><br><hr>";

				$("#liuyanban").prepend(div);//将创建的div插入到id名为#liuyanban的div的第一个元素

			}

		});

	}

	function getTime(){ //获取时间的函数

		var today  = new Date();

		var year = today.getFullYear();

		var month = today.getMonth();

		var date1  = today.getDate();

		var hours = today.getHours();

		var minutes = today.getMinutes()<10?"0"+today.getMinutes():today.getMinutes();

		var seconds = today.getSeconds()<10?"0"+today.getSeconds():today.getSeconds();

		var dateTime = year+"年"+(month+1)+"月"+date1+"日"+hours+":"+minutes+":"+seconds;

		return dateTime;

	}

</script>

后台代码:

<?php

header("Content-Type:text/html;charset=utf-8");

$myImg = $_FILES["myImg"];

$imgArr = array();

// 通过遍历myImg数组的name属性，判断有几个name就可以知道有几个图片

foreach ($myImg["name"] as $key => $value) {

	
　　　　　//以下三行代码是生成  随机数.文件后缀名 的形式的文件名
　　　 　$nameArr = explode(".", $_FILES["myImg"]["name"][$key]);

	$houzhiming = $nameArr[count($nameArr)-1];

	$filename = date("YmdHis").rand(100,999).".".$houzhiming;

	if(is_uploaded_file($_FILES["myImg"]["tmp_name"][$key])){

		$isOk = move_uploaded_file($_FILES["myImg"]["tmp_name"][$key],"upload/{$filename}"); //将选中的每一个文件以 随机数.文件后缀名 的命名方式储存到指定文件夹中

		if(!$isOk){

			continue;

		}

	}else{

		continue;

	}

	$imgArr[] = "upload/{$filename}"; //将文件的相对路径存到数组$imgArr中

}

if(count($myImg["name"])!=count($imgArr)){

	goToIndex("图片上传失败！请重新上传！");

}else{

	$arr = ["userName"=>$_POST["userName"],"time"=>$_POST["time"],"imgArr"=>$imgArr]; //将从上一个页面获取的用户名，上传时间，文件存储的路径设置为关联数组的元素

	$str = json_encode($arr); //将该数组用json_encode($arr)转为JSON字符串

	$num = file_put_contents("imgList.txt", $str."[;]",FILE_APPEND); //将JSON字符串存到指定的文件imgList.txt中

	if($num>0){

		goToIndex("图片上传成功！");

	}else{

		goToIndex("图片上传失败！请重新上传！");

	}

}

function goToIndex($str){ //以上操作完成后跳转到原页面并将用户名传回去

	$js = <<<js

			<script>

				alert("{$str}");

				location="index.php?name={$_POST['userName']}";

			</script>

js;

		echo $js;

}

处理imgList.txt文件中的数据的代码

<?php

	header("Content-Type:text/html;charset=utf-8");

	echo file_get_contents("imgList.txt");//将imgList.txt里的数据全部发到前台处理

以上就是上传图片文件和显示图片文件的代码

效果图：

如何用php实现文件上传与显示的更多相关文章

  1. Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)

    Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...

  2. 【原创】用JAVA实现大文件上传及显示进度信息

    用JAVA实现大文件上传及显示进度信息 ---解析HTTP MultiPart协议 (本文提供全部源码下载,请访问 https://github.com/grayprince/UploadBigFil ...

  3. silverlight漂亮的文件上传进度显示原理及示例

    silverlight漂亮的文件上传进度显示原理及示例 作者:chenxumi 出处:博客园  2009/11/27 13:37:11 阅读 1219  次 概述:在网站根目录web.config里配 ...

  4. 文件上传下载显示进度(vue)

    编写了一个vue组件,可以实时显示文件上传和下载时候的进度 <template> <div v-show="circleProgress_wrapper_panel_sta ...

  5. 用JAVA实现大文件上传及显示进度信息

    一. 大文件上传基础描述: 各种WEB框架中,对于浏览器上传文件的请求,都有自己的处理对象负责对Http MultiPart协议内容进行解析,并供开发人员调用请求的表单内容. 比如: Spring 框 ...

  6. 文件上传及时显示， 前端js和后端php相互结合使用

    文件读取 javascript 绑定文件上传变化事件 onchange 利用window对象 FileReader 调用方法 readerAsDataURL onload 方法 异步读取 属性:fil ...

  7. Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

    相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认”拿来主义“,只是我个人更喜欢凡是求个所以 ...

  8. 阿里云 oss 小文件上传进度显示

    对阿里云OSS上传小文件时的进度,想过两个方法:一是.通过多线程监測Inputstream剩余的字节数来计算,可是由于Inputstream在两个线程中共用,假设上传线程将Inputstream关闭, ...

  9. vue项目 多文件上传并显示在页面上

    <template> <label for="file" class=" btn btn-default" style="borde ...

随机推荐

  1. 蓝桥杯-比酒量-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  2. python安装pillow模块错误

    安装的一些简单步骤就不介绍了,可以去搜索一下,主要就记录下我在安装pillow这一模块遇到的问题 1:安装好pillow后,安装过程没有出错 2:但是在python的IDLE输入from PIL im ...

  3. Layout基本属性总结

    在Android中,共有五种布局方式,分别是:FrameLayout(框架布局),LinearLayout (线性布局),GridLayout(网格布局),RelativeLayout(相对布局),T ...

  4. Java并发，看到了，就记录下呗

    在这篇博客中,主要把之前看的书的内容记录一下,个人感觉还是可以的,原题是这样的:开发一个高效的缓存.这里指的是单机. 首先我来看当前的一个版本 public interface Computable& ...

  5. Java 通过先序后序序列生成二叉树

    题目 二叉树的前序以及后续序列,以空格间隔每个元素,重构二叉树,最后输出二叉树的三种遍历方式的序列以验证. 输入: 1 2 3 4 5 6 7 8 9 10 3 2 5 4 1 7 8 6 10 9 ...

  6. centos6.5软件安装：RPM,SRPM与yum功能

    鸟哥的linxu私房菜读书笔记 前言: Linux上软件的安装可以以原始码的方式来安装软件,也就是利用厂商释出的 Tarball 来进行软件的安装.不过,你应该很容易发现,那就是每次安装软件都需要侦测 ...

  7. Kafka学习-复制

    复制 Kafka可以通过可配置的服务器数量复制每个主题分区的日志(可以为每个主题设置复制因子).这允许在集群中的服务器发生故障时自动故障转移到其他副本,因此在存在故障的情况下,消息仍然可用. 其他消息 ...

  8. 模仿下拉框datalist的jquery插件的一点小经验

    原本项目里是用h5的新属性data-list,但是这个下拉框的数据太多,而data-list似乎没有设置高度的地方,所以写了个小插件,期间也发现了一些bug,目前这个版本算是可以一用的版本,故写一下这 ...

  9. Document 对象

    document.body //返回文档的body元素 document.cookies //返回当前文档有关的所有cookie document.createElement() //创建元素节点 d ...

  10. 利用Java提供的Observer接口和Observable类实现观察者模式

    对于观察者模式,其实Java已经为我们提供了已有的接口和类.对于订阅者(Subscribe,观察者)Java为我们提供了一个接口,JDK源码如下: package java.util; public ...