需求分析:
实现对网页上的图片进行显示。由于读取图片名称相同,而图片内容已发生改变。采用网上所用的要求浏览器不缓存的操作不生效
<META http-equiv="Pragma" CONTENT="no-cache"> <META http-equiv="Cache-Control" CONTENT="no-cache, must-revalidate"> <META http-equiv="expires" CONTENT="0"> <meta charset="utf-8"> <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> <META HTTP-EQUIV="expires" CONTENT="0">
后面采用ajax的方式请求数据,直接从后端将图片内容读取并返回给前端,从而实现图片数据的最新显示
前端 ajax请求:
$.ajax({ url: 'index.php', type: 'POST', dataType: 'json', data: {mode: '<?=$Mode?>',id:'<?=$idVal;?>'}, }) .success(function(data){ // console.log(data); $.each(data,function(name,value){ // console.log(name); // console.log(value); $("#sm_image"+name).attr("src","data:image/png;base64,"+value); }) }) .done(function(data) { console.log("success"); // $("sm_image").attr("src","data:image/png;base64,"+data); // echo }) .fail(function(data) { console.log(data); console.log("error"); }) .always(function() { console.log("complete"); });
后台php解析并返回:
<?php if($_POST) { switch ($_POST['mode']) { case 1: // print_r($_POST['id']); $idArr = explode(",", $_POST['id']); $jsonStr = "{"; for ($i=0; $i <count($idArr) ; $i++) { $img = base64_encode(file_get_contents("/web/image/image_id".$idArr[$i].".png")); $jsonStr .= """.$idArr[$i]."":"$img","; } $jsonStr = substr($jsonStr,0,-1); $jsonStr .= "}"; echo $jsonStr; break; case 2: $id = $_POST['id']; $img = base64_encode(file_get_contents("/web/image/image_id".$id.".png")); echo '{"'.$id.'":"'.$img.'"}'; //读取图片数据并作base64编码 break; default: break; } } ?>