首页 > 网页设计 > html5 拖放上传

html5 拖放上传

html5 拖放上传

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

html5 拖放上传
演示

 

 

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

post_file.php

 

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

本文固定链接: http://www.devba.com/index.php/archives/3557.html | 开发吧

报歉!评论已关闭.