本文介绍了基于HTML、php的文件上传、显示。可以实现数据采集获取的时域、频域的数据显示。
步骤及代码如下。
1.用HTML5和bootstap构建图形的基本架构，代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>ReadingAndDisplaying the file of unv</title>
<link rel="stylesheet" href="source/bootstrap.min.css">
<script src="source/jquery-3.4.1.min.js"></script>
<script src="source/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container"><!--main frame -->
<div class="row"> <!-- 菜单区-->
</div>
<div class="row"> <!-- the area of selecting the file -->
<!-- mb-xx 用来调整标签的下边距 -->
<form method="POST" action="readingfile.php" enctype="multipart/form-data">
<div class="mb-3">
<label for="file_1" class="form-label">选择要显示的文件</label>
<input type="file" class="form-control" id="file_1" name="file_1" multiple>
<div id="tishi" class="form-text" style="color: red;">请选择单个unv文件，然后上传</div>
<button type="submit" value="tijiao" class="btn btn-primary mb-2">上传</button>
</div>
<!-- <button id="tijiao" type="button" class="btn btn-primary mb-3">提交</button> the type of the button is "button",or is default submit! -->
</form>
</div>
<button class="btn btn-primary mb-1 btn" id="xianshi">显示已经上传的文件</button>
<div class="row mb" id="displaymes">文件信息显示区</div>
<div class="row" id="displaycurve">
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#xianshi").click(function(e){
$.ajax({
url:"filename.php",
method:"GET"
})
.done(function(res){
$("#displaymes").html(res);
})
}) /* tijiao*/
}) /* document */
</script>
</body>
</html>
2.用php显示文件的上传：，代码如下：
<?php
$name = $_FILES['file_1']['name'];
if(move_uploaded_file($_FILES['file_1']['tmp_name'],"myfile/$name")){
echo "成功上传 <br/>";
echo "文件大小为：".$_FILES['file_1']['size'];
}
else{
echo "Failed ,the size of the file is:".$_FILES['file_1']['size'];
echo "<br/>";
}
?>
3.用php再现上传文件的名称。代码如下：
<?php
header("content-type:text/html;charset=utf-8"); //保证传输文件格式
// 获取文件夹中的所有txt文件名
$dir = "myfile/"; //这里输入其他路径
$handle = opendir($dir.".");
$row = array();
while (false!=($file=readdir($handle)))
{
if($file!="."&&$file!="..")
{
$row[]['name'] = $file;//将文件名存入数组 $row
}
}
$files = [];
echo "已经上传的文件如下：";
echo "<form method='post' action='displayfile_1.php'>";
foreach ($row as $k => $v)
{
$files[] = $row[$k]['name']; //$files是该文件夹下所有文件的名字
echo ($k+1).".<input type=\"checkbox\" name=\"file[]\" value=\"$files[$k]\">".$files[$k]."<br/>";
}
echo "<button id='display_1' class='btn btn-primary'>显示曲线</button>";
echo "</form>";
closedir($handle);
?>
4.用php和JS插件canvasJS实现图形的显示，代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>曲线显示</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="source/bootstrap.min.css">
<script src="source/jquery-3.4.1.min.js"></script>
<script src="source/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="source/canvasjs.min.js"></script>
</head>
<body>
<p><a href="index.html" style="text-decoration: underline;">回到选择页面</a></p>
<h4>要显示的数据信息</h4>
<?php
$file= $_POST['file']; //传递过来的file数组
//下面的语句为读取并显示file
$message = []; //收集各个文件的信息,是一个2维数组
$freqArr =[];
$processMethod_1 =[]; //存储各个文件的类型:random、sine、time
$freqFen = [];
for($i = 0;$i < count($file);$i++){ //for语句循环文件夹下的每一个文件,打开并处理
$file_arr =$file[$i];
$fp = fopen("myfile/".$file_arr,"r"); //须写上要打开的文件的文件夹myfle，因为php文件和要打开的文件不在一个文件夹里。
$singlemessage = []; //单个文件的通道数、如果是随机信号，起始频率和分辨率
$processMethod =[]; //处理方式peak or harmonics
$message[$i]['filename'] =$file[$i]; //将文件信息赋予数组
for($j = 0;$j<18;$j++)
fgets($fp);
$processMethod = preg_split('/\s+/',trim(fgets($fp)));
$processMethod_1[] = $processMethod[0];
for($j = 0;$j<5;$j++)
fgets($fp);
//preg_match('/\d{2,}/',fgets($fp),$singlemessage); //捕获测点的数目
$singlemessage = preg_split('/\s+/',trim(fgets($fp)));
$message[$i]['number'] = $singlemessage[1]; //将测点的数个赋予message数组
$startFreq = $singlemessage[3];//随机信号频率信息
$freqFen[] = $singlemessage[4];//随机信号频率分辨率
$lineNumer = ceil($singlemessage[1]/2);
for($k=0;$k<4;$k++)
fgets($fp);
if(!strcmp($processMethod[0],"PSD")){ // the frequency message of the random signal
$freq = [];//记录频率信息
for($m=0;$m < $singlemessage[1];$m++){
$freq[]= $startFreq;
$startFreq += $singlemessage[4];
}
}
elseif(!strcmp($processMethod[0],"Time")){
$freq = [];//记录频率信息
for($m=0;$m < $singlemessage[1];$m++){
$freq[]= $startFreq;
$startFreq += $singlemessage[4];
}
}
else{ //the frequency message of the sine signal
$freq = [];//记录频率信息
for($m=0;$m<$lineNumer;$m++){
$str1 = trim(fgets($fp));
$arr_1 = preg_split('/\s+/',$str1);
$freq[]= $arr_1[0];
$freq[] = $arr_1[3];
}
}
$freqArr[$i] = $freq; //各个文件的频率信息
//加上判断滤波还是峰值算法的判断
rewind($fp);
for($n=0;$n<16;$n++)
fgets($fp);
$str_arr=[];
if(!strcmp($processMethod[0],"PSD")){ //随机处理模块
while(!feof($fp)){ //循环读取各个数据
for($l=0;$l<2;$l++)
fgets($fp);
$str_1 = trim(fgets($fp));
$str_arr = preg_split('/\s+/',$str_1);
$nodename = $str_arr[2];
$message[$i]['nodename'][]=$nodename;
for($l=0;$l<10;$l++)
fgets($fp);
$amp=[];
for($m=0;$m < ceil($singlemessage[1]/6);$m++){ //读取一个点的数据；
$str1 = trim(fgets($fp));
$arr_1 = preg_split('/\s+/',$str1);
for($j= 0;$j<6;$j++)
$amp[] = $arr_1[$j];
} //读取一个点的所有数据
$message[$i]['data'][$nodename]=$amp;
fgets($fp);
} //循环读取各个点的数据。
}
elseif(!strcmp($processMethod[0],"Harmonic")){
while(!feof($fp)){ //循环读取各个数据
for($l=0;$l<2;$l++)
fgets($fp);
$str_1 = trim(fgets($fp));
$str_arr = preg_split('/\s+/',$str_1);
$nodename = $str_arr[3];
$message[$i]['nodename'][]=$nodename;
for($l=0;$l<10;$l++)
fgets($fp);
$amp=[];
for($m=0;$m < $lineNumer;$m++){ //读取一个点的数据；
$str1 = trim(fgets($fp));
$arr_1 = preg_split('/\s+/',$str1);
$first = sqrt(pow($arr_1[1],2)+pow($arr_1[2],2));
$second = sqrt(pow($arr_1[4],2)+pow($arr_1[5],2));
$amp[]= $first;
$amp[] = $second;
} //读取一个点的所有数据
$message[$i]['data'][$nodename]=$amp;
fgets($fp);
} //循环读取各个点的数据。
}
elseif(!strcmp($processMethod[0],"Time")){ //Time domain data process
while(!feof($fp)){ //循环读取各个数据
for($l=0;$l<2;$l++)
fgets($fp);
$str_1 = trim(fgets($fp));
$str_arr = preg_split('/\s+/',$str_1);
$nodename = $str_arr[2];
$message[$i]['nodename'][]=$nodename;
for($l=0;$l<10;$l++)
fgets($fp);
$amp=[];
for($m=0;$m < ceil($singlemessage[1]/6);$m++){ //读取一个点的数据；
$str1 = trim(fgets($fp));
$arr_1 = preg_split('/\s+/',$str1);
for($j= 0;$j<6;$j++)
$amp[] = $arr_1[$j];
} //读取一个点的所有数据
$message[$i]['data'][$nodename]=$amp;
fgets($fp);
} //循环读取各个点的数据。
}
else{
while(!feof($fp)){ //循环读取各个数据
for($l=0;$l<2;$l++)
fgets($fp);
$str_1 = trim(fgets($fp));
$str_arr = preg_split('/\s+/',$str_1);
$nodename = $str_arr[3];
$message[$i]['nodename'][]=$nodename;
for($l=0;$l<10;$l++)
fgets($fp);
$amp=[];
for($m=0;$m < $lineNumer;$m++){ //读取一个点的数据；
$str1 = trim(fgets($fp));
$arr_1 = preg_split('/\s+/',$str1);
$amp[]= $arr_1[1];
$amp[] = $arr_1[4];
} //读取一个点的所有数据
$message[$i]['data'][$nodename]=$amp;
fgets($fp);
} //循环读取各个点的数据。
} //else
} //将所有打开的文件信息读完
//以下将显示文件信息
for($i=0;$i<count($file);$i++){
echo "<p>读取的文件为: <i>$file[$i]</i></p>";
}
$messageJson = json_encode($message);
$fileJson = json_encode($file);
$freqJson = json_encode($freqArr);
$processMethodJson = json_encode($processMethod_1);
$freqFenJson = json_encode($freqFen);
echo <<<xinxi
<script type="text/javascript">
var message=$messageJson;
var file = $fileJson;
var freq = $freqJson;
var processMethod = $processMethodJson; //数据类型: 随机、正弦等
var freqFen = $freqFenJson;//随机频率分辨率
</script>
xinxi;
?>
<h3>选择要显示的点</h3>
<form method="POST" action="">
<input type="button" value="PRE" id="pre">
<?php
for($i=1;$i <= count($file);$i++){
echo "<select id=\""."mySelect".$i."\">";
for($j=0;$j<count($message[$i-1]['nodename']);$j++){
?>
<option value="<?=$message[$i-1]['nodename'][$j]?>"><?=$message[$i-1]['nodename'][$j]?></option>
<?php
}
echo "</select>";
}
?>
<input type="button" value="NEXT" id="next">
<input type="button" value="RESET" id="reset">
</form>
<br/>
<div id="chartContainer" style="min-height: 400px;max-width: 1200px; margin: 0px auto;border: 1px solid lightgrey"></div>
<br/>
<script type="text/javascript">
//javascript 里的变量名称不能重合；
var filelength = file.length; // 打开文件的个数
var dataMessage = [];
var nodeName = [];
function draw(dataMessage){
var chart = new CanvasJS.Chart("chartContainer", {
//animationEnabled: true, //实现图像的动态生成;
exportEnabled:true,
zoomEnabled:true, //可以放大局部图像;
theme: "light2",
legend:{
horizontalAlign: "center", // "center" , "right"
verticalAlign: "top", // "top" , "bottom"
fontSize: 15,
fontColor:"red",
dockInsidePlotArea: true,
itemclick:toogleDataSeries
},
axisX:{
title: "频率(F)",
logarithmic: true, //如果数据中有零点，无法显示
crosshair:{
enabled:"true",
valueFormatString: "###.00"
},
alueFormatString: "###.000"
},
axisY:{
title: " 响应值(g)",
logarithmic: true //如果数据中有零点，如法显示
},
data: dataMessage
});
chart.render();
}
//上述为draw函数
function drawtime(dataMessage){
var chart = new CanvasJS.Chart("chartContainer", {
//animationEnabled: true, //实现图像的动态生成;
exportEnabled:true,
zoomEnabled:true, //可以放大局部图像;
theme: "light2",
title: {
text: "时域响应曲线",
fontSize:15
},
legend:{
horizontalAlign: "right", // "center" , "right"
verticalAlign: "top", // "top" , "bottom"
fontSize: 15,
fontColor:"red",
dockInsidePlotArea: true,
itemclick:toogleDataSeries
},
axisX:{
title: "时间",
crosshair:{
enabled:"true",
valueFormatString: "###.00"
},
alueFormatString: "###.000"
},
axisY:{
title: "响应值(g)"
},
data:dataMessage
});
chart.render();
}//以上为drawtime函数
//画PSD曲线
function drawpsd(freq,amp,fileName,name,fre){
var sum = 0;
var y = 0;
for(var k=0;k < freqLength;k++){ // 每个通道的个数
dataPointsTemp.push({x: parseFloat(freq[k]), y: parseFloat(amp[k])});
//计算总均方根值
y = parseFloat(amp[k]);
sum += parseInt(fre)*y;
} //k循环
sum = Math.sqrt(sum).toFixed(3);
dataMessage.push({type:"line",showInLegend:true,legendText:fileName+" "+name+" Grms:"+sum,dataPoints:dataPointsTemp});
}
//画正弦曲线
function drawsine(freq,amp,fileName,name){
var max = 0.0;
var amplitude = 0.0;
for(var k=0;k < freqLength;k++){ // 每个通道的个数
amplitude = parseFloat(amp[k]);
dataPointsTemp.push({x: parseFloat(freq[k]), y: amplitude});
max = amplitude > max ?amplitude:max;
} //k循环
max = max.toFixed(2);
dataMessage.push({type:"line",showInLegend:true,legendText:fileName+" "+name+"\n\r"+"Max is "+max+" g",dataPoints:dataPointsTemp});
}
function drawtime2(freq,amp,fileName,name){
var max = 0.0;
var amplitude = 0.0;
for(var k=0;k < freqLength;k++){ // 每个通道的个数
amplitude = parseFloat(amp[k]);
dataPointsTemp.push({x: parseFloat(freq[k]), y: amplitude});
max = amplitude > max ?amplitude:max;
} //k循环
max = max.toFixed(2);
dataMessage.push({type:"line",showInLegend:true,legendText:fileName+" "+name+"\n\r"+"Max is "+max+" g",dataPoints:dataPointsTemp});
}
//以下语句画出第一个点曲线。
for(var i=0 ; i < filelength;i++){ //文件的个数
var dataPointsTemp = []; //define the global varible
nodeName[i] = message[i]["nodename"];
var firstName = nodeName[i][0];
var freqLength= freq[i].length - 1; //所选中点的采样个数。
if(processMethod[i] == "PSD"){ //这个应该放在file里，一起显示
drawpsd(freq[i],message[i]["data"][firstName],file[i],firstName,freqFen[i]);
draw(dataMessage);
}
else if(processMethod[i] == "Time"){
drawtime2(freq[i],message[i]["data"][firstName],file[i],firstName);
drawtime(dataMessage);
}
else{
drawsine(freq[i],message[i]["data"][firstName],file[i],firstName);
draw(dataMessage);
}
} //i 循环
var index = []; //标记点号在每个select中的位置
var name1 = $('select').map(function(){
return $(this).val();
}).toArray(); //获取选择框中的option内容
for(var i = 0;i < filelength; i++){
index[i] = nodeName[i].indexOf(name1[i]);//获取option中的内容在当前select中的序列号，从0开始。
}
$('select').change(function(event){ //点号选择框改变后，显示不同的曲线
var name = $('select').map(function(){
return $(this).val()
}).toArray(); //获取选择框中的option内容
dataMessage = [];
var number = $(event.target).index(); //获取select在form中的次序,以便于知道那个select改变了,从 1 开始；
var selectNumber = number-1;
for(var i = 0;i< filelength; i++){
dataPointsTemp = [];
index[i] = nodeName[i].indexOf(name[i]);//获取option中的内容在当前select中的序列号，从0开始。
var freqLength = freq[i].length - 1; //所选中点的采样个数。
if(processMethod[i] == "PSD"){
drawpsd(freq[i],message[i]["data"][name[i]],file[i],name[i],freqFen[i]);
draw(dataMessage);
}
else if(processMethod[i] == "Time"){
drawtime2(freq[i],message[i]["data"][name[i]],file[i],name[i]);
drawtime(dataMessage);
}
else{
drawsine(freq[i],message[i]["data"][name[i]],file[i],name[i]);
draw(dataMessage);
}
}
});
$('#pre').click(function(event){
index = $.map(index,function(value){
return value>0?value-1:value;
});
$('select').each(function(i){
$(this).val(nodeName[i][index[i]]);
});
//copy change function
var name2 = $('select').map(function(){
return $(this).val()
}).toArray(); //获取选择框中的option内容
dataMessage = [];
for(var i = 0;i< filelength; i++){
dataPointsTemp = [];
var freqLength = freq[i].length - 1; //所选中点的采样个数。
if(processMethod[i] == "PSD"){
drawpsd(freq[i],message[i]["data"][name2[i]],file[i],name2[i],freqFen[i]);
draw(dataMessage);
}
else if(processMethod[i] == "Time"){
drawtime2(freq[i],message[i]["data"][name2[i]],file[i],name2[i]);
drawtime(dataMessage);
}
else{
drawsine(freq[i],message[i]["data"][name2[i]],file[i],name2[i]);
draw(dataMessage);
}
}
//copy change function
});
// pre click 函数
//next 函数
$('#next').click(function(event){
index = $.map(index,function(value,i){ //
return value < nodeName[i].length-1?value+1:nodeName[i].length-1;//必须小于length-1
});
$('select').each(function(i){
$(this).val(nodeName[i][index[i]]);
});
//复制 change function
var name3 = $('select').map(function(){
return $(this).val()
}).toArray(); //获取选择框中的option内容
dataMessage = [];
for(var i = 0;i< filelength; i++){
dataPointsTemp = [];
var freqLength = freq[i].length - 1; //所选中点的采样个数。
if(processMethod[i] == "PSD"){
drawpsd(freq[i],message[i]["data"][name3[i]],file[i],name3[i],freqFen[i]);
draw(dataMessage);
}
else if(processMethod[i] == "Time"){
drawtime2(freq[i],message[i]["data"][name3[i]],file[i],name3[i]);
drawtime(dataMessage);
}
else{
drawsine(freq[i],message[i]["data"][name3[i]],file[i],name3[i]);
draw(dataMessage);
}
}
});
//next click函数
//reset 按钮将所有的文件置于开始
$('#reset').click(function(event){
dataMessage = []; //白颜色表示全局变量，紫颜色表示局部变量
$('select').each(function(i){
$(this).val(nodeName[i][0]);
});
for(var i=0 ; i < filelength;i++){ //文件的个数
dataPointsTemp = []; //define the global varible
nodeName[i] = message[i]["nodename"];
var firstName2 = nodeName[i][0];
var freqLength2 = freq[i].length - 1; //所选中点的采样个数。
var sum_3 = 0;
var y1_1 = 0;
if(processMethod[i] == "PSD"){ //这个应该放在file里，一起显示
drawpsd(freq[i],message[i]["data"][firstName2],file[i],firstName2,freqFen[i]);
draw(dataMessage);
}
else if(processMethod[i] == "Time"){
drawtime2(freq[i],message[i]["data"][firstName2],file[i],firstName2);
drawtime(dataMessage);
}
else{
drawsine(freq[i],message[i]["data"][firstName2],file[i],firstName2);
draw(dataMessage);
}
name1 = $('select').map(function(){
return $(this).val();
}).toArray(); //获取选择框中的option内容
for(var n = 0;n < filelength; n++){
index[n] = nodeName[n].indexOf(name1[n]);//获取option中的内容在当前select中的序列号，从0开始。
}
} //i 循环
}); // click the button of th reset.
function toogleDataSeries(e){
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else{
e.dataSeries.visible = true;
}
e.chart.render(); //if the data has changed ,chen you should call this funcition;
}
</script>
</body>
</html>
扫一扫
2428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
