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

<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. EXT 可选择图片列表的表单控件实现

    先看一下表单效果: 点击图标,显示图标列表: 实现代码: var appform = new Ext.form.FormPanel({ id: 'appform', cardStep:0, url:A ...

  2. cctype学习

    #include <cctype>(转,归纳很好) 头文件描述: 这是一个拥有许多字符串处理函数声明的头文件,这些函数可以用来对单独字符串进行分类和转换: 其中的函数描述: 这些函数传入一 ...

  3. Java爬虫（一）利用GET和POST发送请求，获取服务器返回信息

    本人所使用软件 eclipse fiddle UC浏览器 分析请求信息 以知乎(https://www.zhihu.com)为例,模拟登陆请求,获取登陆后首页,首先就是分析请求信息. 用UC浏览器F1 ...

  4. 一句话告诉你JQuery $(this)到底指的是什么，怎么用

    看了网上好多关于jquery $(this)的解释,感觉都说的很模糊. 下面说出我自己的理解. this表示的是当前对象,下面以例子来说明 <!DOCTYPE html> <html ...

  5. springboot(十二)：springboot如何测试打包部署

    有很多网友会时不时的问我,spring boot项目如何测试,如何部署,在生产中有什么好的部署方案吗?这篇文章就来介绍一下spring boot 如何开发.调试.打包到最后的投产上线. 开发阶段 单元 ...

  6. js-获取两个字符串日期的相隔周

    例如说"2017-04-01 23:00:00"是周六, "2017-04-28 23:00:00"是周五,包含各自所在的那一周,我真正需要获得的结果是5个周. ...

  7. ReactiveCocoa学习总结(2)

    信号(signal)- RACSignal类 1. 一般表示将来有数据传递,只要有数据改变,信号内部接收到数据,就会马上发出数据. 2. 事件类型: next:发送数据到下一个管道 error:发送数 ...

  8. NancyFx 2.0的开源框架的使用-Stateless(二)

    继续上一篇Stateless的博文,在上一篇的博文的基础上稍微加点东西 接下来右键解决方案添加新项目,一样建一个空的Web项目 然后在StatelessDemoWeb项目里面添加Views文件夹,Sc ...

  9. selenium基础框架的封装(Python版)

    一.常用函数的封装 在使用selenium做web自动化测试的过程中,经常会碰到各种各样的问题,比如: 1.页面加载比较慢时,selenium查找元素抛出异常,导致脚本运行中止 2.写完脚本后发现代码 ...

  10. MySql学习笔记(一) —— 关键字的使用

    1.distinct关键字 作用:检索出有不同值的列,比如一个商品表中存在供应商vend_id,一个供应商会对应很多商品,我们要查找有多少供应商,就可以用到该关键字去重. select distinc ...