189 8069 5689

ThinkPHP5中怎么利用ajax插入图片并实时显示

这篇文章给大家介绍ThinkPHP5中怎么利用ajax插入图片并实时显示,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

目前创新互联建站已为上千的企业提供了网站建设、域名、雅安服务器托管网站托管运营、企业网站设计、鄂城网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

完整代码:



 
 
 ajax上传图片练习
 
 
 
 
 
 
 身份证正面
 
 
 
   

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插入图片并实时显示

完整代码:


 
 
 文件上传
 
 #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;
 }
 
 
 
 
 
 
 

身份证正面:

   
     

身份证反面:

   
     

银行卡正面: 

         

银行卡反面: 

           function identity() {  var formData = new FormData();  formData.append("drawing", $('#drawing')[0].files[0]);  // console.log(formData);  $.ajax({  url: "http://tp5-shopxo.likeball.top/index.php?s=/api/Mi/measurement",  type: 'POST',  data: formData,  dataType: 'JSON',  cache: false,  processData: false,  contentType: false,  success: function(data) {  console.log(data);  if (data['whether'] == true) {   var result = '';   var result1 = '';   result += '';   result1 += 'http://tp5-shopxo.likeball.top/' + data['site'];   $('#front').html(result);   $('#fronts').val(result1);  }  },  error: function(data) {  console.log("错误");  }  });  }  function card() {  var formData = new FormData();  formData.append("reverse", $('#reverse')[0].files[0]);  // console.log(formData);  $.ajax({  url: "http://tp5-shopxo.likeball.top/index.php?s=/api/Mi/measurement",  type: 'POST',  data: formData,  dataType: 'JSON',  cache: false,  processData: false,  contentType: false,  success: function(data) {  console.log(data);  if (data['whether'] == true) {   var result = '';   var result1 = '';   result += '';   result1 += 'http://tp5-shopxo.likeball.top/' + data['site'];   $('#frontage').html(result);   $('#frontages').val(result1);  }  },  error: function(data) {  console.log("错误");  }  });  }  function obverse() {  var formData = new FormData();  formData.append("transaction", $('#transaction')[0].files[0]);  // console.log(formData);  $.ajax({  url: "http://tp5-shopxo.likeball.top/index.php?s=/api/Mi/measurement",  type: 'POST',  data: formData,  dataType: 'JSON',  cache: false,  processData: false,  contentType: false,  success: function(data) {  console.log(data);  if (data['whether'] == true) {   var result = '';   var result1 = '';   result += '';   result1 += 'http://tp5-shopxo.likeball.top/' + data['site'];   $('#banking').html(result);   $('#bankings').val(result1);  }  },  error: function(data) {  console.log("错误");  }  });  }  function versa() {  var formData = new FormData();  formData.append("redlining", $('#redlining')[0].files[0]);  // console.log(formData);  $.ajax({  url: "http://tp5-shopxo.likeball.top/index.php?s=/api/Mi/measurement",  type: 'POST',  data: formData,  dataType: 'JSON',  cache: false,  processData: false,  contentType: false,  success: function(data) {  console.log(data);  if (data['whether'] == true) {   var result = '';   var result1 = '';   result += '';   result1 += 'http://tp5-shopxo.likeball.top/' + data['site'];   $('#house').html(result);   $('#houses').val(result1);  }  },  error: function(data) {  console.log("错误");  }  });  }

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插入图片并实时显示就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


标题名称:ThinkPHP5中怎么利用ajax插入图片并实时显示
URL地址:http://cdxtjz.cn/article/jjhpch.html

联系我们

您好HELLO!
感谢您来到成都网站建设公司,若您有合作意向,请您为我们留言或使用以下方式联系我们, 我们将尽快给你回复,并为您提供真诚的设计服务,谢谢。
  • 电话:028- 86922220 18980695689
  • 商务合作邮箱:631063699@qq.com
  • 合作QQ: 532337155
  • 成都网站设计地址:成都市青羊区锣锅巷31号五金站写字楼6楼

小谭建站工作室

成都小谭网站建设公司拥有多年以上互联网从业经验的团队,始终保持务实的风格,以"帮助客户成功"为已任,专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司;我们对营销、技术、管理都有自己独特见解,小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务!

小谭观点

相对传统的成都网站建设公司而言,小谭是互联网中的网站品牌策划,我们精于企业品牌与互联网相结合的整体战略服务。
我们始终认为,网站必须注入企业基因,真正使网站成为企业vi的一部分,让整个网站品牌策划体系变的深入而持久。