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

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 += '<img src="' + 'http://tp5-shopxo.likeball.top/' + data['site'] + '">';
  result1 += 'http://tp5-shopxo.likeball.top/' + data['site'];
  $('#frontage').html(result);
  $('#frontages').val(result1);
 }
 },
 error: function(data) {
 console.log("错误");
 }
 });
 }
</script>
<!-- 银行卡正面 -->
<script type="text/javascript">
 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 += '<img src="' + 'http://tp5-shopxo.likeball.top/' + data['site'] + '">';
  result1 += 'http://tp5-shopxo.likeball.top/' + data['site'];
  $('#banking').html(result);
  $('#bankings').val(result1);
 }
 },
 error: function(data) {
 console.log("错误");
 }
 });
 }
</script>
<!-- 银行卡反面 -->
<script type="text/javascript">
 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 += '<img src="' + 'http://tp5-shopxo.likeball.top/' + data['site'] + '">';
  result1 += 'http://tp5-shopxo.likeball.top/' + data['site'];
  $('#house').html(result);
  $('#houses').val(result1);
 }
 },
 error: function(data) {
 console.log("错误");
 }
 });
 }
</script>

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插入图片并实时显示，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!