php+html+css+js开发图片/视频/文件上传工具
如图：http://www.henkuai.com/data/attachment/forum/201711/18/183823jt8kpk5mp00vvu0q.png
上传工具的控件经过美化的，显示文件类型和文件大小，上传之后，显示文件链接，并且支持一键复制。
动图演示：
http://www.henkuai.com/data/attachment/forum/201711/18/183942uhzn5nn459o9ed45.gif
<p style="text-align: center;color: #34538B;font-size: 20px;font-family: '微软雅黑';margin:30px 0 10px;">里客云图片/视频上传系统</p>
<div style="width: 400px;background: #fff;margin:30px auto 0;box-shadow: 0 0 10px #ccc;padding:15px 15px;border-radius: 3px;">
<form action="" enctype="multipart/form-data" method="post" name="upload">
<input type="file" name="file" /><br /><br />
<input type="submit" value="立即上传" class="btn" />
</form>
<style type="text/css">
*{margin: 0px;padding:0px;font-family:"微软雅黑"; }
::-ms-browse, {
padding: .4em;
line-height: 24px;
border: 1px solid #a0b3d6;
background: #f0f3f9;
color: #34538b;
}
::-webkit-file-upload-button {
width: 150px;
height: 35px;
line-height: 35px;
border: 1px solid #a0b3d6;
background: #f0f3f9;
color: #34538b;
border-radius: 3px;
outline: none;
cursor: pointer;
}
.btn{
width: 150px;
height: 35px;
line-height: 35px;
border: 1px solid #a0b3d6;
background: #f0f3f9;
color: #34538b;
border-radius: 3px;
outline: none;
}
.btn:hover{
width: 150px;
height: 35px;
line-height: 35px;
border: 1px solid #a0b3d6;
background: #A0B3D6;
color: #fff;
border-radius: 3px;
outline: none;
cursor: pointer;
}
</style>
<?php
header("Content-Type:text/html; charset=utf-8");
function count_size($bit)
{
$type = array('Bytes','KB','MB','GB','TB');
for($i = 0; $bit >= 1024; $i++)
{
$bit/=1024;
}
return (floor($bit*100)/100).$type[$i];
}//文件单位转换
$name = @$_FILES['file']['name'];
$type = @$_FILES['file']['type'];
$tmp_name = @$_FILES['file']['tmp_name'];
$size = @$_FILES['file']['size'];
$temp = count_size($size);
$wenjianjia = "res";//储存上传后的文件的文件夹名称
$date=date('Ymdhis');//得到当前时间
$fileName=$_FIFLES['file']['name'];//得到上传文件的名字
$name=explode('.',$name);//将文件名以'.'分割得到后缀名,得到一个数组
$newPath=$wenjianjia.'/'.$date.'.'.$name;//得到一个新的文件新的路径
$oldPath=$_FILES['file']['tmp_name'];//临时文件夹,即以前的路径
rename($oldPath,$newPath); //就可以重命名了
if($name)
{
//echo '文件信息:'.'<br />';
//echo '--------------------------------'.'<br />';
//echo "文件名：".$newPath.'<br />';
echo "<br/>";
echo '<p style="font-size:15px;color:#666;">文件类型：'.$type.'<br /></p>';
//echo '临时文件名字:'.$tmp_name.'<br />';
echo '<p style="font-size:15px;color:#666;">文件大小：'.$temp.'<br /></p>';
$path = 'res/';
echo '<br /><p style="color:#34538B;font-size:15px;margin-bottom:-13px;">'.'文件链接'.'</p><br />';
//echo '--------------------------------'.'<br />';
echo "<input type='text' value='http://www.likeyunba.com/tool/file/$newPath' style='width:320px;height:35px;border:1px solid #A0B3D6;outline:none;border-top-left-radius:3px;border-bottom-left-radius:3px;' id='biao1'>";
echo "<input type='submit' onClick='copyUrl2()' style='width:75px;height:35px;border: 1px solid #a0b3d6;
background: #f0f3f9;margin-left:-3px; border-top-right-radius:3px;border-bottom-right-radius:3px;outline:none;cursor:pointer;'value='复制连接'>";
}
?>
<script type="text/javascript">
function copyUrl2()
{
var Url2=document.getElementById("biao1");
Url2.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
//alert("已复制好，可贴粘。");
}
</script>
</div>新建file.php，和一个空白文件夹，命名res
把上面代码拷贝到file.php即可
然后上传到服务器就可以用了
demo:http://www.likeyunba.com/tool/file/
页:
[1]