首页>>Jquery图片>>html5 拖放上传(2013-10-29)

html5 拖放上传

 css和js文件到演示页面可以查看源码下载

html5 拖放上传
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <title>html5 拖放上传</title>  
  6.   
  7.         <link rel="stylesheet" href="assets/css/styles.css" />  
  8.           
  9.         <!--[if lt IE 9]>  
  10.           <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  
  11.         <![endif]-->  
  12.     </head>  
  13.       
  14.     <body>  
  15.   
  16.         <div id="dropbox">  
  17.             <span class="message">拖动图片到这里. <br /><i>(上传的图片仅仅自己可以看到)</i></span>  
  18.         </div>  
  19.   
  20.   
  21.           
  22.         <script src="../../js/jquery-1.9.1.min.js"></script>  
  23.           
  24.         <!-- Including the HTML5 Uploader plugin -->  
  25.         <script src="assets/js/jquery.filedrop.js"></script>  
  26.           
  27.         <!-- The main script file -->  
  28.         <script src="assets/js/script.js"></script>  
  29.       
  30.     </body>  
  31. </html>  

 post_file.php

 

PHP Code
  1. <?php  
  2.   
  3. // If you want to ignore the uploaded files,   
  4. // set $demo_mode to true;  
  5.   
  6. $demo_mode = false;  
  7. $upload_dir = '../upload/';  
  8. $allowed_ext = array('jpg','jpeg','png','gif');  
  9.   
  10.   
  11. if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){  
  12.     exit_status('Error! Wrong HTTP method!');  
  13. }  
  14.   
  15.   
  16. if(array_key_exists('pic',$_FILES) && $_FILES['pic']['error'] == 0 ){  
  17.       
  18.     $pic = $_FILES['pic'];  
  19.   
  20.     if(!in_array(get_extension($pic['name']),$allowed_ext)){  
  21.         exit_status('Only '.implode(',',$allowed_ext).' files are allowed!');  
  22.     }     
  23.   
  24.     if($demo_mode){  
  25.           
  26.         // File uploads are ignored. We only log them.  
  27.           
  28.         $line = implode('       ', array( date('r'), $_SERVER['REMOTE_ADDR'], $pic['size'], $pic['name']));  
  29.         file_put_contents('log.txt', $line.PHP_EOL, FILE_APPEND);  
  30.           
  31.         exit_status('Uploads are ignored in demo mode.');  
  32.     }  
  33.       
  34.       
  35.     // Move the uploaded file from the temporary   
  36.     // directory to the uploads folder:  
  37.       
  38.     if(move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name'])){  
  39.         exit_status('File was uploaded successfuly!');  
  40.     }  
  41.       
  42. }  
  43.   
  44. exit_status('Something went wrong with your upload!');  
  45.   
  46.   
  47. // Helper functions  
  48.   
  49. function exit_status($str){  
  50.     echo json_encode(array('status'=>$str));  
  51.     exit;  
  52. }  
  53.   
  54. function get_extension($file_name){  
  55.     $ext = explode('.', $file_name);  
  56.     $ext = array_pop($ext);  
  57.     return strtolower($ext);  
  58. }  
  59. ?>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_90.html