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

<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. [ext4] 磁盘布局 - extent tree

    传统的类Unix文件系统,比如Ext3,都是使用一个间接数据块映射表来记录每一个数据块的分配情况的.但是这种机制对于超大文件的存储是有缺陷的,特别是当对超大文件进行删除和截断操作时.映射表会对每一个数 ...

  2. Python 与 C/C++ 交互的几种方式

    python作为一门脚本语言,其好处是语法简单,很多东西都已经封装好了,直接拿过来用就行,所以实现同样一个功能,用Python写要比用C/C++代码量会少得多.但是优点也必然也伴随着缺点(这是肯定的, ...

  3. SVN常见问题总结一

    注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/6828776.html  ) 作者:wangwen896 SVN是Subversion的简称,是一个开放 ...

  4. 【初识Python】

    一.Python的简介 1.什么是python? Python(发音:[ 'paiθ(ə)n; (US) 'paiθɔn ]),是一种面向对象的解释性的计算机程序设计语言,也是一种功能强大而完善的通用 ...

  5. 解决U盘容量变小问题

    今天又想重新给电脑刷刷kali linux新版本了貌似N久没更,直接重新刷系统吧...然后发现USB容量变小,这就尴尬了,接着总结了个小方法. 解决方法:1.先把u盘插好,运行cmd,2.输入disk ...

  6. Windows安装Mysql5.7.10绿色版

    今天在Windows上安装Mysql的时候,去官网上下了一个最新版本的Mysql5.7.10绿色版,但是之前网上安装方式都过时了,比如会报一些常见的错误“[ERROR] Fatal error: Ca ...

  7. tomcat启动一闪而过问题的解决

    1.今天使用startup.bat启动tomcat报错,现象是一闪而过,在logs文件夹中有没有日志文件, 可以在控制台输入startup.bat,如下:   但是也没有看出什么太有用的错误,然后可以 ...

  8. Rabin-Karp字符串查找算法

    1.简介 暴力字符串匹配(brute force string matching)是子串匹配算法中最基本的一种,它确实有自己的优点,比如它并不需要对文本(text)或模式串(pattern)进行预处理 ...

  9. `DevOps`相关知识搜集

    本文记录的是搞清楚什么是DevOps过程中检索资料时发现的有价值的帖子. 传送门: 我眼中的DevOps 作者简介:申思维,2005年本科毕业于华南理工大学计算机学院.一直从事Web领域的开发,3年多 ...

  10. VFP 实验参考答案

    1．    使用for循环计算1到1000之间能既能被7整除也能被11整除的所有的数的和.(结果为6006)源程序代码 sum=0 i=1 for i=1 to 1000 if((i%7=0) and ...