当前位置: 萬仟网 > IT编程>脚本编程>Ajax > ThinkPHP5 通过ajax插入图片并实时显示(完整代码)

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

2020年06月23日  | 萬仟网IT编程  | 我要评论

单张图片上传

展示图:

完整代码:

<!doctype html>
<html>
 <head>
 <meta charset="utf-8">
 <title>ajax上传图片练习</title>
 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
 <style type="text/css">
 </style>
 </head>
 <body>
 <form id="form">
 <label for="exampleinputemail1">身份证正面</label>
 <input type="file" id="drawing" name="drawing" onchange="picture(this);" />
 <!-- 上传图片的路径 --><input type="hidden" name="" id="front" value="" />
 <div id="result"></div>
 </form>
 </body>
</html>
<script>
 //正面身份证
 function picture() {
 var data = new formdata($('#form')[0]);
 /* new formdata 的意思 
 * 获取我们for表单中的所有input的name和value为了更方便传值
 * https://segmentfault.com/a/1190000012327982?utm_source=tag-newest
 */
 console.log(data);
 $.ajax({
 url: "http://tp5-shopxo.likeball.top/index.php?s=/api/mi/measurement",
 type: 'post',
 data: data,
 datatype: 'json',
 cache: false,
 processdata: false,
 contenttype: false,
 success: function(data) {
 // console.log(data);
 if (data['whether']) {
  var result = '';
  var result1 = '';
  result += '<img src="' + 'http://tp5-shopxo.likeball.top/' + data['site'] + '" width="100">';
  result1 += 'http://tp5-shopxo.likeball.top/' + data['site'];
  $('#results').html(result);
  $('#fronts').val(result1);
 }
 },
 error: function(data) {
 alert('错误');
 }
 });
 }
</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); 
  }
  // 正面结束
 }

多个上传

展示:

完整代码:

<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="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
 </head>
 <body>
 <form id="uploadform">
 <!-- 1 -->
 <p>身份证正面:<input type="file" name="drawing" id="drawing" onchange="identity(this)" autocomplete="off" /></p>
 <input type="text" name="" id="fronts" value="" />
 <div id="front"></div>
 <!-- 1 -->
 <!-- 2 -->
 <p>身份证反面:<input type="file" name="reverse" id="reverse" onchange="card(this)" autocomplete="off" /></p>
 <input type="text" name="" id="frontages" value="" />
 <div id="frontage"></div>
 <!-- 2 -->
 <!-- 3 -->
 <p>银行卡正面: <input type="file" name="transaction" id="transaction" onchange="obverse(this)" autocomplete="off" /></p>
 <input type="text" name="" id="bankings" value="" />
 <div id="banking"></div>
 <!-- 3 -->
 <!-- 4 -->
 <p>银行卡反面: <input type="file" name="redlining" id="redlining" onchange="versa(this)" autocomplete="off" /></p>
 <input type="text" name="" id="houses" value="" />
 <div id="house"></div>
 <!-- 4 -->
 </form>
 </body>
</html>
<!-- 身份证正面 -->
<script type="text/javascript">
 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 += '<img src="' + 'http://tp5-shopxo.likeball.top/' + data['site'] + '" width="100">';
  result1 += 'http://tp5-shopxo.likeball.top/' + data['site'];
  $('#front').html(result);
  $('#fronts').val(result1);
 }
 },
 error: function(data) {
 console.log("错误");
 }
 });
 }
</script>
<!-- 身份证反面 -->
<script type="text/javascript">
 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 += '<img src="' + 'http://tp5-shopxo.likeball.top/' + data['site'] + '" width="100">';
  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'] + '" width="100">';
  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'] + '" width="100">';
  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插入图片并实时显示,希望对大家有所帮助

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
Copyright © 2020  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com