先给大家展示下效果图，大家感觉不错，请参考实现代码。
最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能。虽然现在有很多的插件能实现，但是还是觉得自己写比较好。我们知道，图片上传需要一个input:file表单
<input type='file' name='pic'>
当我们点击表单的时候提示选择需要上传的图片。但是此需求我们分析一下，可以在点击图片的时候使用JS实现预览功能，并且楼主也是这样做的。代码如下：
function getFileUrl(sourceId) {
var url;
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
return url;
}
function preImg(sourceId, targetId) {
var url = getFileUrl(sourceId);
var imgPre = document.getElementById(targetId);
imgPre.src = url;
}
效果如下:
但是这样的话会涉及很多兼容问题。所以就想到了Ajax，在图片上传时，使用Ajax技术。将图片上传到服务器，再由服务器返回给我们图片的上传地址，然后添加到img标签中去。过程虽然麻烦了点，但是亲测不会有兼容问题。
需要发送Ajax请求的话，当然input:file表单是不能实现我们的需求的，因此，我们需要给表单关联一个单击事件去帮我们进行Ajax请求并选择图片
<form id="form1">
<label for="exampleInputEmail1">头像</label>
<input type="button" value="上传图片" onclick="f.click()" class="btn_mouseout"/><br>
<p><input type="file" id="f" name="f" onchange="sc(this);" style="display:none"/></p>
</form>
<div id="result"></div>
当我们点击上传图片这个button按钮时触发input:file选择图片实现Ajax上传
<script>
function sc(){
var animateimg = $("#f").val(); //获取上传的图片名 带//
var imgarr=animateimg.split('\\'); //分割
var myimg=imgarr[imgarr.length-1]; //去掉 // 获取图片名
var houzui = myimg.lastIndexOf('.'); //获取 . 出现的位置
var ext = myimg.substring(houzui, myimg.length).toUpperCase(); //切割 . 获取文件后缀
var file = $('#f').get(0).files[0]; //获取上传的文件
var fileSize = file.size; //获取上传的文件大小
var maxSize = 1048576; //最大1MB
if(ext !='.PNG' && ext !='.GIF' && ext !='.JPG' && ext !='.JPEG' && ext !='.BMP'){
parent.layer.msg('文件类型错误,请上传图片类型');
return false;
}else if(parseInt(fileSize) >= parseInt(maxSize)){
parent.layer.msg('上传的文件不能超过1MB');
return false;
}else{
var data = new FormData($('#form1')[0]);
$.ajax({
url: "{:url('User/uppic')}",
type: 'POST',
data: data,
dataType: 'JSON',
cache: false,
processData: false,
contentType: false
}).done(function(ret){
if(ret['isSuccess']){
var result = '';
var result1 = '';
// $("#show").attr('value',+ ret['f'] +);
result += '<img src="/UploadFiles/2021-04-02/' + '__ROAD__' + ret['f'] + '">
这里我们采用FormData对面进行表单提交，然后服务器端接收
public function uppic()
{
$file = request()->file('f');
$info = $file->move(ROOT_PATH . 'public/uploads/avatar');
$a=$info->getSaveName();
$imgp= str_replace("\\","/",$a);
$imgpath='uploads/avatar/'.$imgp;
$banner_img= $imgpath;
$response = array();
if($info){
$response['isSuccess'] = true;
$response['f'] = $imgpath;
}else{
$response['isSuccess'] = false;
}
echo json_encode($response);
}
这里会返回图片上传的url路径：$response['f] = $imgpath;现在我们要做的就是将这个url写进前台HTML部分进行一个显示
<div class="form-group">
<!-- 将Ajax上传的图片路径添加到数据库 -->
<div id="show"></div>
</div>
在JS中添加
$('#show').html(result1);
总结
以上所述是小编给大家介绍的Ajax实现图片上传并预览功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。