php+html+css+js开发图片/视频/文件上传工具

zhoji

如图：

                               
登录/注册后可看大图

上传工具的控件经过美化的，显示文件类型和文件大小，上传之后，显示文件链接，并且支持一键复制。

动图演示：

                               
登录/注册后可看大图

1. <p style="text-align: center;color: #34538B;font-size: 20px;font-family: '微软雅黑';margin:30px 0 10px;">里客云图片/视频上传系统</p>
   
2. <div style="width: 400px;background: #fff;margin:30px auto 0;box-shadow: 0 0 10px #ccc;padding:15px 15px;border-radius: 3px;">
   
3. 
   
4. <form action="" enctype="multipart/form-data" method="post" name="upload">  
   
5. <input type="file" name="file" /><br /><br />  
   
6.              <input type="submit" value="立即上传" class="btn" />  
   
7. </form>
   
8. 
   
9. <style type="text/css">
   
10. *{margin: 0px;padding:0px;font-family:"微软雅黑"; }
    
11. 
    
12. ::-ms-browse, [type='file'] {
    
13.     padding: .4em;
    
14.     line-height: 24px;
    
15.     border: 1px solid #a0b3d6;
    
16.     background: #f0f3f9;
    
17.     color: #34538b;
    
18. }
    
19. ::-webkit-file-upload-button {
    
20.     width: 150px;
    
21.     height: 35px;
    
22.     line-height: 35px;
    
23.     border: 1px solid #a0b3d6;
    
24.     background: #f0f3f9;
    
25.     color: #34538b;
    
26.     border-radius: 3px;
    
27.     outline: none;
    
28.     cursor: pointer;
    
29. }
    
30. 
    
31. .btn{
    
32.     width: 150px;
    
33.     height: 35px;
    
34.     line-height: 35px;
    
35.     border: 1px solid #a0b3d6;
    
36.     background: #f0f3f9;
    
37.     color: #34538b;
    
38.     border-radius: 3px;
    
39.     outline: none;
    
40. }
    
41. 
    
42. .btn:hover{
    
43.     width: 150px;
    
44.     height: 35px;
    
45.     line-height: 35px;
    
46.     border: 1px solid #a0b3d6;
    
47.     background: #A0B3D6;
    
48.     color: #fff;
    
49.     border-radius: 3px;
    
50.     outline: none;
    
51.     cursor: pointer;
    
52. }
    
53. 
    
54. </style>
    
55. 
    
56. <?php  
    
57.     header("Content-Type:text/html; charset=utf-8");  
    
58.     function count_size($bit)  
    
59.     {  
    
60.         $type = array('Bytes','KB','MB','GB','TB');  
    
61.         for($i = 0; $bit >= 1024; $i++)  
    
62.         {  
    
63.             $bit/=1024;  
    
64.         }  
    
65.         return (floor($bit*100)/100).$type[$i];  
    
66.     }//文件单位转换  
    
67.   
    
68.     $name = @$_FILES['file']['name'];  
    
69.     $type = @$_FILES['file']['type'];  
    
70.     $tmp_name = @$_FILES['file']['tmp_name'];  
    
71.     $size = @$_FILES['file']['size'];  
    
72.     $temp = count_size($size);
    
73. 
    
74.    
    
75.     $wenjianjia = "res";//储存上传后的文件的文件夹名称
    
76.     $date=date('Ymdhis');//得到当前时间
    
77.     $fileName=$_FIFLES['file']['name'];//得到上传文件的名字
    
78.     $name=explode('.',$name);//将文件名以'.'分割得到后缀名,得到一个数组
    
79.     $newPath=$wenjianjia.'/'.$date.'.'.$name[1];//得到一个新的文件新的路径
    
80.     $oldPath=$_FILES['file']['tmp_name'];//临时文件夹,即以前的路径
    
81.     rename($oldPath,$newPath); //就可以重命名了
    
82. 
    
83.     if($name)  
    
84.     {  
    
85.         //echo '文件信息:'.'<br />';  
    
86.         //echo '--------------------------------'.'<br />';  
    
87.         //echo "文件名：".$newPath.'<br />';  
    
88.         echo "<br/>";
    
89.         echo '<p style="font-size:15px;color:#666;">文件类型：'.$type.'<br /></p>';  
    
90.         //echo '临时文件名字:'.$tmp_name.'<br />';  
    
91.         echo '<p style="font-size:15px;color:#666;">文件大小：'.$temp.'<br /></p>';  
    
92.         $path = 'res/';  
    
93.         echo '<br /><p style="color:#34538B;font-size:15px;margin-bottom:-13px;">'.'文件链接'.'</p><br />';  
    
94.         //echo '--------------------------------'.'<br />';
    
95.         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'>";
    
96.         echo "<input type='submit' onClick='copyUrl2()' style='width:75px;height:35px;border: 1px solid #a0b3d6;
    
97.     background: #f0f3f9;margin-left:-3px; border-top-right-radius:3px;border-bottom-right-radius:3px;outline:none;cursor:pointer;'value='复制连接'>";
    
98.     }
    
99. ?>  
    
100. 
     
101. <script type="text/javascript">
     
102.   function copyUrl2()
     
103.   {
     
104.   var Url2=document.getElementById("biao1");
     
105.   Url2.select(); // 选择对象
     
106.   document.execCommand("Copy"); // 执行浏览器复制命令
     
107.   //alert("已复制好，可贴粘。");
     
108.   }
     
109.   </script>
     
110. </div>

复制代码

新建file.php，和一个空白文件夹，命名res

把上面代码拷贝到file.php即可
然后上传到服务器就可以用了

demo:http://www.likeyunba.com/tool/file/