先上个福利图 :)
首先说一下,写这篇博客的原因。大致可为以下几点:
- 新买的android手机掉在了地上,摄像头摔得不能聚焦了,卖家还不给维修 :(
- 手头有一个老旧的Iphone,然而不会IOS开发,所以决定使用网页形式来替代
写博客需要一些手绘的流程图或者示意图,而电脑上的作图工具用起来不是很顺手。
综合上面的原因,就为自己写了一个解决没有高清照片问题的php网页,用来转储Iphone拍摄的照片,用于博客的书写。
上传代码
正好博主本人电脑上配置好了PHP+Apache+MySQL的环境,当然了。使用Java或者Python或者其他的语言也是可以的,配置好相关的环境就可以了。
为了尽可能使这次的工作量最少,最简单,这里使用了PHP作为了我的开发语言。另本次试验的核心是图片的转储,于是也没有添加数据库的上传记录,这些东西也就是自己用,实际的开发中,各方面都得做的完善一点,谨慎一点的。
<?php
header("Content-Type:text/html;charset=utf-8");
$path = "F:/phpimage/";
$imgtype=$_REQUEST['imgtype'];
$rand_number = rand(1,100000);
$server_name = $imgtype=="notgif"?$path."$rand_number".".png":$path."$rand_number.".$imgtype;
if($_FILES['photo']['error']>0){
die("上传文件出错了!".$_FILES['photo']['error']);
}
if(move_uploaded_file($_FILES['photo']['tmp_name'],$server_name)){
echo '<br><br><span class="label label-success">上传成功</span>';
//header("location:./upimg.php");
}else{
echo '<br><br><span class="label label-danger">上传失败</span>';
//header("location:./upimg.php");
}
?>
这里就简单的让用户决定自己上传的文件,博主有时候写博客经常会用到gif图,所以单纯的将文件转储为png,那是不够的。于是我就添加了一个gif图上传的选项。至于其他类型的图片,全部一棍子“打死”,转成png图片类型即可。
适配
由于博主是为了自己图片转储的需要,所以该网页工作的主要是在手机上。那么问题就自然的来了,那就是PC版的网页在手机上显示的话会很丑。
为了让博主自己使用起来也稍微的愉悦一点,做点手机端的适配也是很有必要的啦。
同样的,为了简便。博主使用了Bootstrap来制作前端界面了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<title>上传图片</title>
<style>
div {
width:88%;
height:auto;
background:silver;
}
input label{
width:100%;
height:auto;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1><marquee behavior="alternate" class="label label-info">上传图片吧</marquee> </h1>
<form role="form" action="./upimg.php" method="post" enctype="multipart/form-data">
<input class="btn btn-default" type="file" name="photo" /><br/><br />
<div class="form-group">
<label class="label label-warning">图片类型</label>
<input type="radio" name="imgtype" value="notgif" checked="checked">非gif图
<input type="radio" name="imgtype" value="gif" />gif图<br />
<br/>
</div>
<br />
<input class="btn btn-default" style="background:#C6C" type="submit" value="上传图片"/>
</form>
</div>
</body>
</html>
其实html代码和php代码是写在一个文件中的,待会博主还会贴出全部的代码。
自动化
刚才博主已经提到了,网页主要是工作在手机端的,那么自然的我们就不能采用单纯的PC端使用的localhost了。那么怎么实现呢?
答案就是使用IP进行连接。形如:
在进行手机端测试的时候,博主每次都需要到电脑的命令行下手动的输入 ipconfig /all
然后用鼠标往上翻,找到无线适配那一块,如下:
无线局域网适配器 无线网络连接:
连接特定的 DNS 后缀 . . . . . . . : dlut.edu.cn
本地链接 IPv6 地址. . . . . . . . : fe80::1d9f:d97b:fd16:1f6f%12
IPv4 地址 . . . . . . . . . . . . : 192.168.56.245
子网掩码 . . . . . . . . . . . . : 255.255.252.0
默认网关. . . . . . . . . . . . . : 192.168.56.1
唉,每次都要这么麻烦,博主也是忒懒,于是就想写个程序来一键获取本机的IP地址,然后就会方便很多了。
说到这里,博主想了不少方法,Java啊,C语言,C++, Python,甚至C#写个界面什么的,但是为了保持博主一贯的优雅,简洁(其实是懒惰)的风格,博主还是采用了最为基础的方式,那就是写一个批命令的脚本,来一键获取本机的IP地址。
代码也比较简单,就是对命令中的返回结果的过滤。
@echo off
for /f "tokens=4" %%a in ('route print^|findstr 0.0.0.0.*0.0.0.0') do (
set IP=%%a
)
echo %IP%
pause
完整代码
首先是upimg.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<title>上传图片</title>
<style>
div {
width:88%;
height:auto;
background:silver;
}
input label{
width:100%;
height:auto;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1><marquee behavior="alternate" class="label label-info">上传图片吧</marquee> </h1>
<form role="form" action="./upimg.php" method="post" enctype="multipart/form-data">
<input class="btn btn-default" type="file" name="photo" /><br/><br />
<div class="form-group">
<label class="label label-warning">图片类型</label>
<input type="radio" name="imgtype" value="notgif" checked="checked">非gif图
<input type="radio" name="imgtype" value="gif" />gif图<br />
<br/>
</div>
<br />
<input class="btn btn-default" style="background:#C6C" type="submit" value="上传图片"/>
</form>
</div>
<?php
header("Content-Type:text/html;charset=utf-8");
$path = "F:/phpimage/";
$imgtype=$_REQUEST['imgtype'];
$rand_number = rand(1,100000);
$server_name = $imgtype=="notgif"?$path."$rand_number".".png":$path."$rand_number.".$imgtype;
if($_FILES['photo']['error']>0){
die("上传文件出错了!".$_FILES['photo']['error']);
}
if(move_uploaded_file($_FILES['photo']['tmp_name'],$server_name)){
echo '<br><br><span class="label label-success">上传成功</span>';
//header("location:./upimg.php");
}else{
echo '<br><br><span class="label label-danger">上传失败</span>';
//header("location:./upimg.php");
}
?>
</body>
</html>
然后是一键获取本机IP的代码:
@echo off
echo "当前,您的电脑所在的局域网内的IP地址为:"
for /f "tokens=4" %%a in ('route print^|findstr 0.0.0.0.*0.0.0.0') do (
set IP=%%a
)
echo %IP%
pause
最后一个pause不能少,除非你想看到一个黑色的框框一闪而逝 :-)
测试
Android端
上传
- 选择好一张图片,待上传。
上传结果
- 上传完毕
Iphone
Iphone端的适配就比较简单了,毕竟种类有限嘛。
上传
上传结果
服务器端情况
最后,来查看一下。服务器端有没有上传完成的图片信息。可以看到本次试验上传的所有的图片,而且如果上传的图片为gif图的话,也是可以直接可以满足的,图片的质量并没有被损坏。 :-)
总结
经过了本次试验,博主也明白了一个道理,那就是“工具都是被懒逼着创造出来的”。 不管怎样,也算是复习了一些基础性的知识,外加一点点的应用吧。
基础知识是今后进步的源动力,不该忽视的干粮。