这篇文章主要介绍了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”> </style>
<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);
}
总结
以上所述是小编给大家介绍的ThinkPHP5 通过ajax插入图片并实时显示，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
