當(dāng)前位置：首頁 >  站長(zhǎng) >  編程技術(shù) >  正文

ThinkPHP5通過ajax插入圖片并實(shí)時(shí)顯示完整代碼

 2020-11-25 14:34  來源： 腳本之家   我來投稿 撤稿糾錯(cuò)

　 域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過

這篇文章主要介紹了ThinkPHP5 通過ajax插入圖片并實(shí)時(shí)顯示功能，本文給大家分享網(wǎng)站代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

單張圖片上傳

展示圖：

完整代碼：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>ajax上傳圖片練習(xí)</title>
 <script src=“http://libs.baidu.com/jquery/1.9.0/jquery.js”> </style>

 <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('錯(cuò)誤');
 }
 });
 }
</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);
  }
  // 正面結(jié)束
 }

多個(gè)上傳

展示：

完整代碼：

<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="

 </style>http://libs.baidu.com/jquery/1.9.0/jquery.js”> </style>

</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("錯(cuò)誤");
 }
 });
 }
</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("錯(cuò)誤");
 }
 });
 }
</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("錯(cuò)誤");
 }
 });
 }
</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("錯(cuò)誤");
 }
 });
 }
</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);
  }
  // 正面結(jié)束
  // 這是反面
  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);
  }
 }

總結(jié)

以上所述是小編給大家介紹的ThinkPHP5 通過ajax插入圖片并實(shí)時(shí)顯示，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

來源：腳本之家

鏈接：https://www.jb51.net/article/177448.htm

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！

相關(guān)標(biāo)簽
代碼設(shè)計(jì)

相關(guān)文章

加載更多

熱門排行

信息推薦