Ajax实现图片上传并预览功能
前端  /  管理员 发布于 4年前   277
先给大家展示下效果图,大家感觉不错,请参考实现代码。
最近在使用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="//article/' + '__ROAD__' + ret['f'] + '" width="100">'; result1 += '<input value="' + ret['f'] + '" name="user_headimg" style="display:none;">'; $('#result').html(result); $('#show').html(result1); layer.msg('上传成功'); }else{ layer.msg('上传失败'); } }); return false; } } </script>
这里我们采用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实现图片上传并预览功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对站的支持!
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号