html5 拖放上传

CoreyJia

2013-11-18

html5 拖放上传

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

XML/HTML Code
<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
        <title>html5 拖放上传</title>  
  
        <link rel="stylesheet" href="assets/css/styles.css" />  
          
        <!--[if lt IE 9]>  
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  
        <![endif]-->  
    </head>  
      
    <body>  
  
        <div id="dropbox">  
            <span class="message">拖动图片到这里. <br /><i>(上传的图片仅仅自己可以看到)</i></span>  
        </div>  
  
  
          
        <script src="../../js/jquery-1.9.1.min.js"></script>  
          
        <!-- Including the HTML5 Uploader plugin -->  
        <script src="assets/js/jquery.filedrop.js"></script>  
          
        <!-- The main script file -->  
        <script src="assets/js/script.js"></script>  
      
    </body>  
</html>  

post_file.php

PHP Code
<?php  
  
// If you want to ignore the uploaded files,   
// set $demo_mode to true;  
  
$demo_mode = false;  
$upload_dir = '../upload/';  
$allowed_ext = array('jpg','jpeg','png','gif');  
  
  
if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){  
    exit_status('Error! Wrong HTTP method!');  
}  
  
  
if(array_key_exists('pic',$_FILES) && $_FILES['pic']['error'] == 0 ){  
      
    $pic = $_FILES['pic'];  
  
    if(!in_array(get_extension($pic['name']),$allowed_ext)){  
        exit_status('Only '.implode(',',$allowed_ext).' files are allowed!');  
    }     
  
    if($demo_mode){  
          
        // File uploads are ignored. We only log them.  
          
        $line = implode('       ', array( date('r'), $_SERVER['REMOTE_ADDR'], $pic['size'], $pic['name']));  
        file_put_contents('log.txt', $line.PHP_EOL, FILE_APPEND);  
          
        exit_status('Uploads are ignored in demo mode.');  
    }  
      
      
    // Move the uploaded file from the temporary   
    // directory to the uploads folder:  
      
    if(move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name'])){  
        exit_status('File was uploaded successfuly!');  
    }  
      
}  
  
exit_status('Something went wrong with your upload!');  
  
  
// Helper functions  
  
function exit_status($str){  
    echo json_encode(array('status'=>$str));  
    exit;  
}  
  
function get_extension($file_name){  
    $ext = explode('.', $file_name);  
    $ext = array_pop($ext);  
    return strtolower($ext);  
}  
?>  