1. 首页
  2. 文章中心
  3. AJAX

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

162 阅读 0 评论
我是靠谱客的博主 合适香氛，这篇文章主要介绍ThinkPHP5 通过ajax插入图片并实时显示(完整代码)，现在分享给大家，希望可以做个参考。

单张图片上传

展示图：

完整代码：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!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控制器代码

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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); 
  }
  // 正面结束
 }

多个上传

展示：

完整代码：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<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控制器中

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
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插入图片并实时显示(完整代码)的全部内容，更多相关ThinkPHP5内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(107)

相关文章

Ajax对xml信息的接收和处理操作实例分析
Ajax对xml信息的接收和处理操作实例分析
使用ajax跨域调用springboot框架的api传输文件
使用ajax跨域调用springboot框架的api传输文件
Ajax请求跨域问题解决方案分析
Ajax请求跨域问题解决方案分析
Ajax对缓存的处理方法实例分析
Ajax对缓存的处理方法实例分析
ThinkPHP5 通过ajax插入图片并实时显示(完整代码)
ThinkPHP5 通过ajax插入图片并实时显示(完整代码)
Ajax实现搜索功能的分页
Ajax实现搜索功能的分页
ajax post下载flask文件流以及中文文件名问题
ajax post下载flask文件流以及中文文件名问题
Ajax实现文件上传功能(Spring MVC)
Ajax实现文件上传功能(Spring MVC)

评论列表共有 0 条评论

立即
投稿
返回
顶部