脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → AJAX相关 → tp5 通过ajax插入图片

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

 更新时间：2019年12月29日 10:20:28   作者：༊྄ཻ ㎕࿐ 久  
这篇文章主要介绍了ThinkPHP5 通过ajax插入图片并实时显示功能，本文给大家分享网站代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下

单张图片上传

展示图：

完整代码：

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

您可能感兴趣的文章:

相关文章

  • jquery与php结合实现AJAX长轮询(LongPoll)

    jquery与php结合实现AJAX长轮询(LongPoll)

    传统的AJAX轮询方式，客服端以用户定义的时间间隔去服务器上查询最新的数据。种这种拉取数据的方式需要很短的时间间隔才能保证数据的精确度，但太短的时间间隔客服端会对服务器在短时间内发送出多个请求。
    2015-10-10
  • 一款经典的ajax登录页面 后台asp.net

    一款经典的ajax登录页面 后台asp.net

    众所周知，用服务器控件做页面的登录窗体时很简单的，但是页面的多次回传让我们感觉到头痛，一直刷新页面的感觉非常之不好，其实用ajax的局部刷新功能可以完全解决这个问题，制作出来的页面有很好的交互性，而且是局部刷新，节省网络资源。
    2009-10-10
  • Ajax标签导航效果(仿网易首页)

    Ajax标签导航效果(仿网易首页)

    Ajax标签导航效果(仿网易首页)...
    2006-10-10
  • jQuery Ajax的readyState和status的区别和使用详解

    jQuery Ajax的readyState和status的区别和使用详解

    在前几篇分析了jquery的ajax异步和同步，以及异常的一些处理，感觉还没有把ajax的readyState和status说清楚.今天就来说说ajax状态的那点事,非常不错，对ajax readystate和status区别和使用感兴趣的朋友一起学习吧
    2017-03-03
  • AJAX 常用函数

    AJAX 常用函数

    AJAX 常用函数...
    2007-01-01
  • pushState实现Ajax无刷新页面切换

    pushState实现Ajax无刷新页面切换

    这篇文章主要介绍了pushState实现Ajax无刷新页面切换的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11
  • Ajax读取数据到表格的实现代码

    Ajax读取数据到表格的实现代码

    前两篇我们讲了 ajax开始的准备 与及如何使用ajax技术进行简单的数据读取．
    2010-10-10
  • 使用ajax操作 JavaScript 对象

    使用ajax操作 JavaScript 对象

    这篇文章主要介绍了使用ajax操作 JavaScript 对象方法的相关资料,需要的朋友可以参考下
    2015-01-01
  • ajax实现简单登录页面

    ajax实现简单登录页面

    这篇文章主要为大家详细介绍了ajax实现简单登录页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 在layer弹出层中通过ajax返回html拼接字符串填充数据的方法

    在layer弹出层中通过ajax返回html拼接字符串填充数据的方法

    这篇文章主要介绍了在layer弹出层中通过ajax返回html拼接字符串填充数据的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11

最新评论