ThinkPHP5中怎么利用ajax插入图片并实时显示
短信预约 -IT技能 免费直播动态提醒
这篇文章给大家介绍ThinkPHP5中怎么利用ajax插入图片并实时显示，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
完整代码：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>ajax上传图片练习</title> <script class="lazy" data-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]); 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 class="lazy" data-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 class="lazy" data-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 class="lazy" data-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 class="lazy" data-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 class="lazy" data-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 class="lazy" data-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插入图片并实时显示就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
