首页-教程-开发语言

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

 4693

这篇文章主要介绍了ThinkPHP5 通过ajax插入图片并实时显示功能，本文给大家分享网站代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下

单张图片上传

展示图：


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


完整代码：

  1. <!DOCTYPE html>
  2. <html>    
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>ajax上传图片练习</title>
  6.     <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  7.     <style type="text/css"></style>
  8. </head>
  9. <body>
  10. <form id="form">
  11.     <label for="exampleInputEmail1">身份证正面</label>
  12.     <input type="file" id="drawing" name="drawing" onchange="picture(this);" />
  13.     <!-- 上传图片的路径 -->
  14.     <input type="hidden" name="" id="front" value="" />
  15.     <div id="result"></div>
  16. </form>
  17. <script>//正面身份证
  18. function picture() {
  19.     var data = new FormData($('#form')[0]);
  20.     /* new FormData 的意思 
  21.      * 获取我们for表单中的所有input的name和value为了更方便传值
  22.      * https://segmentfault.com/a/1190000012327982?utm_source=tag-newest
  23.      */
  24.     console.log(data);
  25.     $.ajax({
  26.         url: "http://demo.zztuku.com/index.php?s=/api/Mi/measurement",
  27.         type: 'POST',
  28.         data: data,
  29.         dataType: 'JSON',
  30.         cache: false,
  31.         processData: false,
  32.         contentType: false,
  33.         success: function(data) {
  34.             // console.log(data);
  35.             if (data['whether']) {
  36.                 var result = '';
  37.                 var result1 = '';
  38.                 result += '<img src="' + 'http://tp5-shopxo.likeball.top/' + data['site'] + '" width="100">';
  39.                 result1 += 'http://tp5-shopxo.likeball.top/' + data['site'];
  40.                 $('#results').html(result);
  41.                 $('#fronts').val(result1);
  42.             }
  43.         },
  44.         error: function(data) {
  45.             alert('错误');
  46.         }
  47.     });
  48. }
  49. </script>
  50. </body>
  51. </html>

tp控制器代码

  1. public function measurement()
  2. { 
  3.     $response = array(); 
  4.     //这是身份证正面
  5.     if ( isset( $_FILES['drawing'] ) && $_FILES['drawing']['error'] == 0 ) {
  6.         $drawing = request()->file('drawing'); 
  7.         $picture = $drawing->validate( ['ext'=>'jpg,png,gif'] )->move( ROOT_PATH . 'static' . DS . 'upload/mi/img' );
  8.     }
  9.     if ( isset( $picture ) ) {
  10.         $filePaths = '/static' . DS . 'upload/mi/img/'. $picture->getSaveName();
  11.         $response['whether'] = true;
  12.         $response['site'] = $filePaths;
  13.         echo json_encode($response); 
  14.     }
  15.     // 正面结束
  16. }

多个上传

展示：


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


完整代码：

  1. <html>    
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>文件上传</title>
  5.     <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>
  6.     <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  7. </head>
  8. <body>
  9. <form id="uploadForm">
  10.     <!-- 1 -->
  11.     <p>身份证正面:<input type="file" name="drawing" id="drawing" onchange="identity(this)" autocomplete="off" /></p>
  12.     <input type="text" name="" id="fronts" value="" />
  13.     <div id="front"></div>
  14.     <!-- 1 -->
  15.     <!-- 2 -->
  16.     <p>身份证反面：<input type="file" name="reverse" id="reverse" onchange="card(this)" autocomplete="off" /></p>
  17.     <input type="text" name="" id="frontages" value="" />
  18.     <div id="frontage"></div>
  19.     <!-- 2 -->
  20.     <!-- 3 -->
  21.     <p>银行卡正面：<input type="file" name="transaction" id="transaction" onchange="obverse(this)" autocomplete="off" /></p>
  22.     <input type="text" name="" id="bankings" value="" />
  23.     <div id="banking"></div>
  24.     <!-- 3 -->
  25.     <!-- 4 -->
  26.     <p>银行卡反面：<input type="file" name="redlining" id="redlining" onchange="versa(this)" autocomplete="off" /></p>
  27.     <input type="text" name="" id="houses" value="" />
  28.     <div id="house"></div>
  29.     <!-- 4 -->
  30. </form>
  31. <!-- 身份证正面 -->
  32. <script type="text/javascript">
  33. function identity() {
  34.     var formData = new FormData();
  35.     formData.append("drawing", $('#drawing')[0].files[0]);
  36.     // console.log(formData);
  37.     $.ajax({
  38.         url: "http://demo.zztuku.com/index.php?s=/api/Mi/measurement",
  39.         type: 'POST',
  40.         data: formData,
  41.         dataType: 'JSON',
  42.         cache: false,
  43.         processData: false,
  44.         contentType: false,
  45.         success: function(data) {
  46.             console.log(data);
  47.             if (data['whether'] == true) {
  48.                 var result = '';
  49.                 var result1 = '';
  50.                 result += '<img src="' + 'http://demo.zztuku.com/' + data['site'] + '" width="100">';
  51.                 result1 += 'http://demo.zztuku.com/' + data['site'];
  52.                 $('#front').html(result);
  53.                 $('#fronts').val(result1);
  54.             }
  55.         },
  56.         error: function(data) {
  57.             console.log("错误");
  58.         }
  59.     });
  60. }
  61. </script>
  62. <!-- 身份证反面 -->
  63. <script type="text/javascript">
  64. function card() {
  65.     var formData = new FormData();
  66.     formData.append("reverse", $('#reverse')[0].files[0]);
  67.     // console.log(formData);
  68.     $.ajax({
  69.         url: "http://demo.zztuku.com/index.php?s=/api/Mi/measurement",
  70.         type: 'POST',
  71.         data: formData,
  72.         dataType: 'JSON',
  73.         cache: false,
  74.         processData: false,
  75.         contentType: false,
  76.         success: function(data) {
  77.             console.log(data);
  78.             if (data['whether'] == true) {
  79.                 var result = '';
  80.                 var result1 = '';
  81.                 result += '<img src="' + 'http://demo.zztuku.com/' + data['site'] + '" width="100">';
  82.                 result1 += 'http://demo.zztuku.com/' + data['site'];
  83.                 $('#frontage').html(result);
  84.                 $('#frontages').val(result1);
  85.             }
  86.         },
  87.         error: function(data) {
  88.             console.log("错误");
  89.         }
  90.     });
  91. }
  92. </script>
  93. <!-- 银行卡正面 -->
  94. <script type="text/javascript">
  95. function obverse() {
  96.     var formData = new FormData();
  97.     formData.append("transaction", $('#transaction')[0].files[0]);
  98.     // console.log(formData);
  99.     $.ajax({
  100.         url: "http://demo.zztuku.com/index.php?s=/api/Mi/measurement",
  101.         type: 'POST',
  102.         data: formData,
  103.         dataType: 'JSON',
  104.         cache: false,
  105.         processData: false,
  106.         contentType: false,
  107.         success: function(data) {
  108.             console.log(data);
  109.             if (data['whether'] == true) {
  110.                 var result = '';
  111.                 var result1 = '';
  112.                 result += '<img src="' + 'http://demo.zztuku.com/' + data['site'] + '" width="100">';
  113.                 result1 += 'http://demo.zztuku.com/' + data['site'];
  114.                 $('#banking').html(result);
  115.                 $('#bankings').val(result1);
  116.             }
  117.         },
  118.         error: function(data) {
  119.             console.log("错误");
  120.         }
  121.     });
  122. }
  123. </script>
  124. <!-- 银行卡反面 -->
  125. <script type="text/javascript">
  126. function versa() {
  127.     var formData = new FormData();
  128.     formData.append("redlining", $('#redlining')[0].files[0]);
  129.     // console.log(formData);
  130.     $.ajax({
  131.         url: "http://demo.zztuku.com/index.php?s=/api/Mi/measurement",
  132.         type: 'POST',
  133.         data: formData,
  134.         dataType: 'JSON',
  135.         cache: false,
  136.         processData: false,
  137.         contentType: false,
  138.         success: function(data) {
  139.             console.log(data);
  140.             if (data['whether'] == true) {
  141.                 var result = '';
  142.                 var result1 = '';
  143.                 result += '<img src="' + 'http://demo.zztuku.com/' + data['site'] + '" width="100">';
  144.                 result1 += 'http://demo.zztuku.com/' + data['site'];
  145.                 $('#house').html(result);
  146.                 $('#houses').val(result1);
  147.             }
  148.         },
  149.         error: function(data) {
  150.             console.log("错误");
  151.         }
  152.     });
  153. }
  154. </script>
  155. </body>
  156. </html>

tp控制器中

  1. public function measurement()
  2. { 
  3.     $response = array(); 
  4.     //这是身份证正面
  5.     if ( isset( $_FILES['drawing'] ) && $_FILES['drawing']['error'] == 0 ) {
  6.         $drawing = request()->file('drawing'); 
  7.         $picture = $drawing->validate( ['ext'=>'jpg,png,gif'] )->move( ROOT_PATH . 'static' . DS . 'upload/mi/img' );
  8.     }
  9.     if ( isset( $picture ) ) {
  10.         $filePaths = '/static' . DS . 'upload/mi/img/'. $picture->getSaveName();
  11.         $response['whether'] = true;
  12.         $response['site'] = $filePaths;
  13.         echo json_encode($response); 
  14.     }
  15.     // 正面结束
  16.     // 这是反面
  17.     if ( isset( $_FILES['reverse'] ) && $_FILES['reverse']['error'] == 0 ) {
  18.         $reverse = request()->file('reverse'); 
  19.         $reverse = $reverse->validate( ['ext'=>'jpg,png,gif'] )->move( ROOT_PATH . 'static' . DS . 'upload/mi/img' );
  20.     }
  21.     if ( isset( $reverse ) ) {
  22.         $contrary = '/static' . DS . 'upload/mi/img/'. $reverse->getSaveName();
  23.         $response['whether'] = true;
  24.         $response['site'] = $contrary;
  25.         echo json_encode($response); 
  26.     }
  27.     //银行卡正面
  28.     if ( isset( $_FILES['transaction'] ) && $_FILES['transaction']['error'] == 0 ) {
  29.         $transaction = request()->file('transaction'); 
  30.         $transaction = $transaction->validate( ['ext'=>'jpg,png,gif'] )->move( ROOT_PATH . 'static' . DS . 'upload/mi/img' );
  31.     }
  32.     if ( isset( $transaction ) ) {
  33.         $stuck = '/static' . DS . 'upload/mi/img/'. $transaction->getSaveName();
  34.         $response['whether'] = true;
  35.         $response['site'] = $stuck;
  36.         echo json_encode($response); 
  37.     }
  38.     //银行卡反面
  39.     if ( isset( $_FILES['redlining'] ) && $_FILES['redlining']['error'] == 0 ) {
  40.         $redlining = request()->file('redlining'); 
  41.         $redlining = $redlining->validate( ['ext'=>'jpg,png,gif'] )->move( ROOT_PATH . 'static' . DS . 'upload/mi/img' );
  42.     }
  43.     if ( isset( $redlining ) ) {
  44.         $other = '/static' . DS . 'upload/mi/img/'. $redlining->getSaveName();
  45.         $response['whether'] = true;
  46.         $response['site'] = $other;
  47.         echo json_encode($response); 
  48.     }
  49. }

总结

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


TAG标签：
本文网址：https://www.zztuku.com/index.php/detail-8659.html
站长图库 - ThinkPHP5通过ajax插入图片并实时显示(完整代码)
申明：如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐