如何用php实现文件上传与显示
首先,我们要创建一个前台页面用于操作选择文件等:
<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实现文件上传与显示的更多相关文章
- Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)
Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...
- 【原创】用JAVA实现大文件上传及显示进度信息
用JAVA实现大文件上传及显示进度信息 ---解析HTTP MultiPart协议 (本文提供全部源码下载,请访问 https://github.com/grayprince/UploadBigFil ...
- silverlight漂亮的文件上传进度显示原理及示例
silverlight漂亮的文件上传进度显示原理及示例 作者:chenxumi 出处:博客园 2009/11/27 13:37:11 阅读 1219 次 概述:在网站根目录web.config里配 ...
- 文件上传下载显示进度(vue)
编写了一个vue组件,可以实时显示文件上传和下载时候的进度 <template> <div v-show="circleProgress_wrapper_panel_sta ...
- 用JAVA实现大文件上传及显示进度信息
一. 大文件上传基础描述: 各种WEB框架中,对于浏览器上传文件的请求,都有自己的处理对象负责对Http MultiPart协议内容进行解析,并供开发人员调用请求的表单内容. 比如: Spring 框 ...
- 文件上传及时显示, 前端js和后端php相互结合使用
文件读取 javascript 绑定文件上传变化事件 onchange 利用window对象 FileReader 调用方法 readerAsDataURL onload 方法 异步读取 属性:fil ...
- Asp.Net 无刷新文件上传并显示进度条的实现方法及思路
相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认”拿来主义“,只是我个人更喜欢凡是求个所以 ...
- 阿里云 oss 小文件上传进度显示
对阿里云OSS上传小文件时的进度,想过两个方法:一是.通过多线程监測Inputstream剩余的字节数来计算,可是由于Inputstream在两个线程中共用,假设上传线程将Inputstream关闭, ...
- vue项目 多文件上传并显示在页面上
<template> <label for="file" class=" btn btn-default" style="borde ...
随机推荐
- [Git]01 如何安装和配置
简单地说,Git 究竟是怎样的一个系统呢? 请注意,接下来的内容非常重要,若是理解了 Git 的思想和基本工作原理,用起来就会知其所以然,游刃有余.在开始学习 Git 的时候,请不要尝试把各种概 ...
- 【数据库系列学习一】Access与Excel的区别和联系
1.主题对一个主题Access只有一个表,而Excel可以有多个表.2.多表关系Access表各个表间存在严格的关联.Excel表各个表间的关系随意.3.数据计算Excel表中单元格中可以存储数据,也 ...
- 用Redis存储Tomcat集群的Session
作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs 前段时间,我花了不少时间来寻求一种方法,把新开发的代码推送到到生产系统中部署,生产系统要能够零宕机.对使用 ...
- OC中Foundation框架之NSDictionary、NSMutableDictionary
NSDictionary概述 NSDictionary的作用类似:通过一个key ,就能找到对应的value 同样 NSDictionary是不可变的,一旦初始化完毕,里面的内容就无法修改 NSDic ...
- NSString类
创建一个字符串 ) NSString *s = @"aaaa"; ) NSString *s1=[NSString new]; s1=@"bbb"; )格式化创 ...
- document.all 用法
一. document.all是页面内所有元素的一个集合.例如: document.all(0)表示页面内第一个元素 二. document.all可以判断浏览器是否是IE if ...
- Windows 随手笔记
1.常见快捷方式 远程桌面 mstsc 注册表 regedit 组策略 gpedit.msc 2.Windows命令手册 ping命令 ping [-t] [-a] [-n count] [-l le ...
- RabbitMQ集群和失败处理
RabbitMQ内建集群的设计用于完成两个目标:允许消费者和生产者在RabbitMQ节点在奔溃的情况下继续运行,以及通过添加更多的节点来线性扩展消息通信的吞吐量.当失去一个RabbitMQ节点时客户端 ...
- TCP协议简介
1.TCP协议的特点 TCP是面向连接的运输层协议 每一条TCP连接只能有两个端点.TCP只能进行点对点通信 TCP提供可靠交付的服务.通过TCP连接传输的数据,无差错.不丢失.不重复.并且按序到达 ...
- angular页面缓存与页面刷新
angularJS学习笔记:页面缓存与页面刷新 遇到的问题 现在存在这样一个问题,登录前与登录成功后是同一个页面,只不过通过ngIf来控制哪部分显示,图像信息如下: 所以,整体工作不是很难,无非就 ...