好资源导航 » 文章资讯 » ThinkPHP5 通过ajax插入图片并实时显示(完整代码)

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

2023-08-03 19:25:04 66

单张图片上传

展示图：

完整代码：





ajax上传图片练习






身份证正面

tp控制器代码

publicfunctionmeasurement()
{
$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;
echojson_encode($response);
}
//正面结束
}

多个上传

展示：

完整代码：




文件上传

#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;
}






身份证正面:

身份证反面：

银行卡正面：

银行卡反面：

functionidentity(){ varformData=newFormData(); 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){ varresult=''; varresult1=''; result+=''; result1+='http://tp5-shopxo.likeball.top/'+data['site']; $('#front').html(result); $('#fronts').val(result1); } }, error:function(data){ console.log("错误"); } }); } functioncard(){ varformData=newFormData(); 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){ varresult=''; varresult1=''; result+=''; result1+='http://tp5-shopxo.likeball.top/'+data['site']; $('#frontage').html(result); $('#frontages').val(result1); } }, error:function(data){ console.log("错误"); } }); } functionobverse(){ varformData=newFormData(); 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){ varresult=''; varresult1=''; result+=''; result1+='http://tp5-shopxo.likeball.top/'+data['site']; $('#banking').html(result); $('#bankings').val(result1); } }, error:function(data){ console.log("错误"); } }); } functionversa(){ varformData=newFormData(); 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){ varresult=''; varresult1=''; result+=''; result1+='http://tp5-shopxo.likeball.top/'+data['site']; $('#house').html(result); $('#houses').val(result1); } }, error:function(data){ console.log("错误"); } }); }

tp控制器中

publicfunctionmeasurement()
{
$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;
echojson_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;
echojson_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;
echojson_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;
echojson_encode($response);
}
}

总结

以上所述是小编给大家介绍的ThinkPHP5通过ajax插入图片并实时显示，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐