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

2024-08-13 20:46:09

单张图片上传

展示图：

完整代码：

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

TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例

本文实例讲述了TP5(thinkPHP5)框架基于ajax与后台数据交互操作.分享给大家供大家参考,具体如下: Ajax最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好.可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本.并且减轻服务器的负担,ajax的原则是"按需取数据",可以最大程度的减少冗余请求,和响应对服务器造成的负担. 最近在用tp5开发企业微应用,很有收获,觉得最需要注意的是thinkphp
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="
vue中使用axios post上传头像/图片并实时显示到页面的方法

在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮完成图片的上传成功代码部分有参考他人的写法. html代码: <div id="myPhoto" v-show="personalPhoto"> <div class="viewPhoto"> <img src="" alt="" id="portrait"style=&q
PHP 获取目录下的图片并随机显示的代码

当时想做一个随机更换背景图片的功能,用JavaScript写的话,程序流程应该是:建立一个图片数组->随机选择数组里其中一个值->生成样式并写入body标签. 可是用JS做的话,有以下缺点: 1.万一浏览器禁用了JS的话就失效了,而且写代码是需要考虑兼容性. 2.维护比较麻烦,图片的位置都存放在数组里. 于是我提议用PHP处理,可是我和她对PHP都是半桶水的,一时之间也想不出怎么做.今天时运高,看到一个PHP随机显示目录下图片的源码,学习一下,并分享之. 先看看原理:从一个目录里获取某类型文件
通过JS获取用户本地图片路径并显示的代码

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
jQuery选择头像并实时显示的代码

js: 复制代码代码如下: //头像选择 function GetFace() { var faceid = $("#SelFace").val(); if (faceid.length == 1) { faceid = "0" + faceid; } $("#imgface").attr("src", "/WebUI/template/images/public/tutu"+faceid+".
Java GUI插入图片不显示问题解决方法

问题描述: 在学习使用Java的GUI时,插入图片但是不显示代码如下所示: public abstract class AbstractMainFrame extends JFrame { private JLabel titleLabel = new JLabel(new ImageIcon("fruit.jpg")); private JButton btn = new JButton("进入系统"); private void init(){ this.set
datatable生成excel和excel插入图片示例详解

Excel知识点一.添加引用和命名空间添加Microsoft.Office.Interop.Excel引用,它的默认路径是C:\Program Files\Microsoft Visual Studio 9.0\Visual Studio Tools for Office\PIA\Office12\Microsoft.Office.Interop.Excel.dll 代码中添加引用using Microsoft.Office.Interop.Excel; 二.Excel类的简单介绍此命名空
让ajax更加友好的实现方法(实时显示后台处理进度。)

ajax应用越来越多,大部分ajax处理都是在前台显示1个"loading...",然后把数据提交给服务器进行处理,处理完毕后显示"处理完毕".我们能否让ajax更加友好点,实时显示服务器处理的进度了?这在一些长时间的请求中尤其重要,比如上传文件.发送邮件.批量处理数据.答案当然是可以的,不然就不会写这个了,对吧,^_^. 存在的问题: 要解决实现上面的功能,需要解决下面几个问题: 1. 服务器如何在处理一部分数据后传递部分response到浏览器. 2.浏览器如何
jQuery Ajax 实现在html页面实时显示用户登录状态

当网站是全静态的html页面时,而又希望网站会员在登录之后并在所有页面头部显示登录状态,如用户名等,如果未登录就是未登录状态,下面给大家来分享实现的方法. 一.在html静态页面中加入div,并指定ID 如: <div id="ajaxlogin"></div> 二.新建一个动态的ajaxlogin.php文件,用来判断用户是否登录了代码如下: <? session_start(); if( $_SESSION['u_login']=='turelogi
Ajax实现图片上传并预览功能

先给大家展示下效果图,大家感觉不错,请参考实现代码. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 <input type='file' name='pic'> 当我们点击表单的时候提示选择需要上传的图片.但是此需求我们分析一下,可以在点击图片的时候使用JS实现预览功能,并且楼主也是这样做的.代码如下: function getFileUrl(source

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

相关推荐

随机推荐