大家好！今天是2020年2月18日，星期二，绵阳动力网络公司已经上班一周(2月11日开始上班)了，如果你有域名注册、服务器租用、网站建设、网页设计、微信公众号开发及应用的需求可随时拨打0816-2318288咨询了解，疫情当前，我们会为你提供全方位的线上服务！
今天我们为大家来介绍ThinkPHP5+ajax预览并上传单张图片的实现方法。常用ThinkPHP5框架只能实现图片上传，并不能预览图片，今天我们为大家来介绍单张图片预览并上传的方法，下期为大家介绍多张图片预览并上传的方法。
首先我们来看效果：
其次是具体的代码内容：
<!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>
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预览并上传单张图片的实现方法及代码的全部内容，下期我们将为大家接着介绍ThinkPHP5+ajax预览并上传多张图片的实现方法及代码的内容。希望今天的内容对你的网站建设有所帮助。
网站