• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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插入图片并实时显示,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    您可能感兴趣的文章:
    • thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
    • TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
    • ThinkPHP5.1+Ajax实现的无刷新分页功能示例
    • Thinkphp5框架ajax接口实现方法分析
    • thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
    • ThinkPHP框架结合Ajax实现用户名校验功能示例
    • thinkPHP利用ajax异步上传图片并显示、删除的示例
    • TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
    • ThinkPHP 5 AJAX跨域请求头设置实现过程解析
    上一篇:使用ajax跨域调用springboot框架的api传输文件
    下一篇:Ajax实现文件上传功能(Spring MVC)
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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