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

<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. vector介绍

    vector(向量,也可称为容器): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间的目的. 1.1  ...

  2. 基于CSS的个人网页

    前端时间做的CSS作业:基于CSS的个人网页 基于CSS的个人网页 效果图: 代码: <!DOCTYPE html> <html> <head> <meta ...

  3. C#控制台程序使用Log4net日志组件

    1.Log4net一般都不陌生,但是在配置上不同类型的项目又不相同的地方比如C#控制台程序和C# MVCWeb项目,拿控制台项目为例   项目源码在文章底部 2.首先创建一个控制台程序,引入Log4n ...

  4. ST-3- Installing and Testing IUnit, Hamcrest and Eclemma

    一.安装JUnit和Hamcrest 1.首先从办公网上下载JUnit.jar和Hamcrest.jar,并且将其放入所进行的项目的bin目录下,我将其放入了triangle项目的bin目录下. 2. ...

  5. ELK logstash 处理MySQL慢查询日志（初步）

    写在前面:在做ELK logstash 处理MySQL慢查询日志的时候出现的问题: 1.测试数据库没有慢日志,所以没有日志信息,导致 IP:9200/_plugin/head/界面异常(忽然出现日志数 ...

  6. C#集合之有序列表

    如果需要基于键对所需集合排序,就可以使用SortedList<TKey,TValue>类.这个类按照键给元素排序.这个集合中的值和键都可以使用任何类型.定义为键的自定义类型需要实现ICom ...

  7. App架构经验总结（转载）

    原文地址:http://www.iteye.com/news/31472 架构因人而异,不同的架构师大多会有不同的看法:架构也因项目而异,不同的项目需求不同,相应的架构也会不同.然而,有些东西还是通用 ...

  8. 【JAVAWEB学习笔记】02_HTML&CSS

    //--------------纯文本版------------------------------------------------- 今日新增单词(更多属性查看手册) form:表单 (要提交的 ...

  9. 学习笔记TF009:对数几率回归

    logistic函数,也称sigmoid函数,概率分布函数.给定特定输入,计算输出"success"的概率,对回题回答"Yes"的概率.接受单个输入.多维数据或 ...

  10. layui框架部分功能介绍

    注意:代码的所有功能都没有导入layui的css样式 一,分页功能 layui框架分页使用,其实layui分页非常简单只需要传入一个总页数就可以很好运用这个功能 下面就看一下我对layui框架分页的介 ...