网络编程 
首页 > 网络编程 > 浏览文章

ThinkPHP5 通过ajax插入图片并实时显示(完整代码)

(编辑：jimmy 日期: 2024/11/17 浏览：3 次 )

单张图片上传

展示图：

ThinkPHP5 通过ajax插入图片并实时显示(完整代码)

完整代码：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>ajax上传图片练习</title>
 <script src="/UploadFiles/2021-04-02/jquery.js">


tp控制器代码





public function measurement()
 { 
  $response = array(); 
  //这是身份证正面
  if ( isset( $_FILES['drawing'] ) && $_FILES['drawing']['error'] == 0 ) {
   $drawing = request()->file('drawing'); 
   $picture = $drawing->validate( ['ext'=>'jpg,png,gif'] )->move( ROOT_PATH . 'static' . DS . 'upload/mi/img' );
  }
  if ( isset( $picture ) ) {
   $filePaths = '/static' . DS . 'upload/mi/img/'. $picture->getSaveName();
   $response['whether'] = true;
   $response['site'] = $filePaths;
   echo json_encode($response); 
  }
  // 正面结束
 }





多个上传


展示：


ThinkPHP5 通过ajax插入图片并实时显示(完整代码)


完整代码：







<html>
 <head>
 <meta charset="UTF-8">
 <title>文件上传</title>
 <style type="text/css">
 #front {
 width: 120px;
 height: 120px;
 background-color: #8A6DE9;
 }
 #frontage {
 width: 120px;
 height: 120px;
 background-color: #8A6DE9;
 }
 #banking {
 width: 120px;
 height: 120px;
 background-color: #8A6DE9;
 }
 #house {
 width: 120px;
 height: 120px;
 background-color: #8A6DE9;
 }
 </style>
 <script src="/UploadFiles/2021-04-02/jquery.js">


tp控制器中





public function measurement()
 { 
  $response = array(); 
  //这是身份证正面
  if ( isset( $_FILES['drawing'] ) && $_FILES['drawing']['error'] == 0 ) {
   $drawing = request()->file('drawing'); 
   $picture = $drawing->validate( ['ext'=>'jpg,png,gif'] )->move( ROOT_PATH . 'static' . DS . 'upload/mi/img' );
  }
  if ( isset( $picture ) ) {
   $filePaths = '/static' . DS . 'upload/mi/img/'. $picture->getSaveName();
   $response['whether'] = true;
   $response['site'] = $filePaths;
   echo json_encode($response); 
  }
  // 正面结束
  // 这是反面
  if ( isset( $_FILES['reverse'] ) && $_FILES['reverse']['error'] == 0 ) {
   $reverse = request()->file('reverse'); 
   $reverse = $reverse->validate( ['ext'=>'jpg,png,gif'] )->move( ROOT_PATH . 'static' . DS . 'upload/mi/img' );
  }
  if ( isset( $reverse ) ) {
   $contrary = '/static' . DS . 'upload/mi/img/'. $reverse->getSaveName();
   $response['whether'] = true;
   $response['site'] = $contrary;
   echo json_encode($response); 
  }
  //银行卡正面
  if ( isset( $_FILES['transaction'] ) && $_FILES['transaction']['error'] == 0 ) {
   $transaction = request()->file('transaction'); 
   $transaction = $transaction->validate( ['ext'=>'jpg,png,gif'] )->move( ROOT_PATH . 'static' . DS . 'upload/mi/img' );
  }
  if ( isset( $transaction ) ) {
   $stuck = '/static' . DS . 'upload/mi/img/'. $transaction->getSaveName();
   $response['whether'] = true;
   $response['site'] = $stuck;
   echo json_encode($response); 
  }
  //银行卡反面
  if ( isset( $_FILES['redlining'] ) && $_FILES['redlining']['error'] == 0 ) {
   $redlining = request()->file('redlining'); 
   $redlining = $redlining->validate( ['ext'=>'jpg,png,gif'] )->move( ROOT_PATH . 'static' . DS . 'upload/mi/img' );
  }
  if ( isset( $redlining ) ) {
   $other = '/static' . DS . 'upload/mi/img/'. $redlining->getSaveName();
   $response['whether'] = true;
   $response['site'] = $other;
   echo json_encode($response); 
  }
 }





总结


以上所述是小编给大家介绍的ThinkPHP5 通过ajax插入图片并实时显示，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
上一篇：Ajax实现文件上传功能(Spring MVC)
下一篇：使用ajax跨域调用springboot框架的api传输文件
一句话新闻
Windows上运行安卓你用过了吗
在去年的5月23日，借助Intel Bridge Technology以及Intel Celadon两项技术的驱动，Intel为PC用户带来了Android On Windows（AOW）平台，并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版，将Windows与安卓两大生态进行了融合，PC的使用体验随即被带入到了一个全新的阶段。