首先，我们要创建一个前台页面用于操作选择文件等：
<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='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里的数据全部发到前台处理
以上就是上传图片文件和显示图片文件的代码
效果图：
