首页>>表单>>jQuery Ajax 文件异步上传，选择文件后直接上传图片 无上传按钮的一个上传(2019-05-03)

jQuery Ajax 文件异步上传，选择文件后直接上传图片 无上传按钮的一个上传

jQuery Ajax 文件异步上传，选择文件后直接上传图片 无上传按钮的一个上传
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="row">  
  2.   <div class="col-md-6 col-sm-12">  
  3.       
  4.     <!-- Our markup, the important part here! -->  
  5.     <div id="drag-and-drop-zone" class="dm-uploader p-5">  
  6.       <h3 class="mb-5 mt-5 text-muted">Drag & drop files here</h3>  
  7.   
  8.       <div class="btn btn-primary btn-block mb-5">  
  9.           <span>Open the file Browser</span>  
  10.           <input type="file" title='Click to add Files' />  
  11.       </div>  
  12.     </div><!-- /uploader -->  
  13.   
  14.   </div>  
  15.   <div class="col-md-6 col-sm-12">  
  16.     <div class="card h-100">  
  17.       <div class="card-header">  
  18.         File List  
  19.       </div>  
  20.   
  21.       <ul class="list-unstyled p-2 d-flex flex-column col" id="files">  
  22.         <li class="text-muted text-center empty">No files uploaded.</li>  
  23.       </ul>  
  24.     </div>  
  25.   </div>  
  26. </div><!-- /file list -->  
  27.   
  28.   
  29.   
  30. <div class="row">  
  31.   <div class="col-12">  
  32.      <div class="card h-100">  
  33.       <div class="card-header">  
  34.         Debug Messages  
  35.       </div>  
  36.   
  37.       <ul class="list-group list-group-flush" id="debug">  
  38.         <li class="list-group-item text-muted empty">Loading plugin....</li>  
  39.       </ul>  
  40.     </div>  
  41.   </div>  
  42. </div> <!-- /debug -->  

 

PHP Code
  1. <?php  
  2.   
  3. /* 
  4.   This is a ***DEMO*** , the backend / PHP provided is very basic. You can use it as a starting point maybe, but ***do not use this on production***. It doesn't preform any server-side validation, checks, authentication, etc. 
  5.  
  6.   For more read the README.md file on this folder. 
  7.  
  8.   Based on the examples provided on: 
  9.   - http://php.net/manual/en/features.file-upload.php 
  10. */  
  11.   
  12. header('Content-type:application/json;charset=utf-8'); 
  13.  
  14. try { 
  15.     if ( 
  16.         !isset($_FILES['file']['error']) || 
  17.         is_array($_FILES['file']['error']) 
  18.     ) { 
  19.         throw new RuntimeException('Invalid parameters.'); 
  20.     } 
  21.  
  22.     switch ($_FILES['file']['error']) { 
  23.         case UPLOAD_ERR_OK: 
  24.             break; 
  25.         case UPLOAD_ERR_NO_FILE: 
  26.             throw new RuntimeException('No file sent.'); 
  27.         case UPLOAD_ERR_INI_SIZE: 
  28.         case UPLOAD_ERR_FORM_SIZE: 
  29.             throw new RuntimeException('Exceeded filesize limit.'); 
  30.         default: 
  31.             throw new RuntimeException('Unknown errors.'); 
  32.     } 
  33.  
  34.     $filepath = sprintf('../../uploadpic/%s_%s', uniqid(), $_FILES['file']['name']); 
  35.  
  36.     if (!move_uploaded_file( 
  37.         $_FILES['file']['tmp_name'], 
  38.         $filepath 
  39.     )) { 
  40.         throw new RuntimeException('Failed to move uploaded file.'); 
  41.     } 
  42.  
  43.     // All good, send the response 
  44.     echo json_encode([ 
  45.         'status' => 'ok', 
  46.         'path' => $filepath 
  47.     ]); 
  48.  
  49. } catch (RuntimeException $e) { 
  50.     // Something went wrong, send the err message as JSON 
  51.     http_response_code(400); 
  52.  
  53.     echo json_encode([ 
  54.         'status' => 'error', 
  55.         'message' => $e->getMessage()  
  56.     ]);  
  57. }  

 


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