当前位置： 移动技术网 > IT编程>网页制作>Html5 > html5 拖放上传

html5 拖放上传

2018年12月26日  | 移动技术网IT编程  | 我要评论
html5 拖放上传

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

html5 拖放上传

演示

 

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="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  
        <![endif]-->  
    </head>  
      
    <body>  
  
        <p id="dropbox">  
            <span class="message">拖动图片到这里. <br /><i>(上传的图片仅仅自己可以看到)</i></span>  
        </p>  
  
  
          
        <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);  
}  
?>

 


您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网