在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
首先,我们要创建一个前台页面用于操作选择文件等: <body> <div ></div> <form action="doAddImg.php" method="post" enctype="multipart/form-data" > <br /> <input type="file" name="myImg[]" multiple="multiple" accept="image/*" /> <input type="hidden" name="userName" /> <input type="hidden" name="time" /> <br /><br /> </form> <input type="button" /> <h1>精彩图片展示</h1> <hr> <div > </div> </body> 如上述代码所示,由于在表单提交时要进行其他操作,所以不能使用form表单自带的submit按钮,而应该使用自己定义的按钮添加submit事件来进行操作,也因此 <input type="button" /> 不能写在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里的元素 后台代码: <?php header("Content-Type:text/html;charset=utf-8"); $myImg = $_FILES["myImg"]; $imgArr = array(); // 通过遍历myImg数组的name属性,判断有几个name就可以知道有几个图片 foreach ($myImg["name"] as $key => $value) { 处理imgList.txt文件中的数据的代码 <?php header("Content-Type:text/html;charset=utf-8"); echo file_get_contents("imgList.txt");//将imgList.txt里的数据全部发到前台处理 以上就是上传图片文件和显示图片文件的代码 效果图:
|
2022-08-17
2022-11-06
2022-07-29
2022-08-18
2022-08-13
请发表评论