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

<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. Vue2.x中的父子组件相互通信

    业务场景:(这里指的是直接父子级关系的通信) 美女(子组件)将消息发送给大群(父组件) 大群(父组件)收到美女发送的消息后再回个信息给美女(子组件) 父组件 template <template ...

  2. 关于获取URL中传值的解决方法

    在我们页面的URL中包含着很多信息,包括域名,协议等等这里就不一一介绍了),对于我们开发者而言,使用比较多的就是页面之间的传值.为什么要页面传值呢?很简单,当你在浏览一个商品页面的时候你要看到一个商品 ...

  3. python之基础中的基础（三）

    1.类,类就像是负责特定项目的主管,交给主管干这件事情,主管可以让手下的人分别去完成自己该干的活,最后综合起来把结果交给主管传递出去,即完成任务. class Dog(): ""& ...

  4. 通过js来设置cookie和读取cookie，实现登陆时记住密码的功能

    function setCookie(){ //设置cookie var loginCode = $("#login_code").val(); //获取用户名信息 var pwd ...

  5. routeProvider路由的使用

    先创建一个主程序文件index.html,内容如下: <!DOCTYPE html> <html ng-app="myApp"> <head> ...

  6. Python之返回函数

    高阶函数可以把函数作为一个结果值返回 举例说明 普通的求积函数是 vim day5-6.py #!/usr/bin/python # -*- coding:utf-8 -*- def product( ...

  7. PAT1030 Travel Plan (30)---DFS

    (一)题意 题目链接:https://www.patest.cn/contests/pat-a-practise/1030 1030. Travel Plan (30) A traveler's ma ...

  8. Android分享功能实现

    通过系统分享组件实现分享功能 Intent.createChooser() 方法用来弹出系统分享列表. createChooser(Intent target, CharSequence title, ...

  9. VR全景智慧城市-梦幻城市降临

    有人说,创业分为两种,一种是富创业,一种是穷创业! 什么是富创业呢?就是拿钱砸,我觉得这种说法有点荒唐,为什么创业,因为没钱才会去创业,有钱的那不叫创业的,那是拿钱投资点项目. 看看老一辈的富豪,不都 ...

  10. 【JAVAWEB学习笔记】25_基础加强：类加载器、注解 @xxx和动态代理

    基础加强 学习目标 案例-自定义单元测试@MyTest 案例-全局的编码的解决 一.类加载器 1．什么是类加载器,作用是什么? 类加载器就加载字节码文件(.class) 2．类加载器的种类 类加载器有 ...