Ajax实现图片上传并预览功能

来源：懂视网责编：小采时间：2020-11-27 22:51:30

Ajax实现图片上传并预览功能

Ajax实现图片上传并预览功能:先给大家展示下效果图，大家感觉不错，请参考实现代码。最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能。虽然现在有很多的插件能实现，但是还是觉得自己写比较好。我们知道，图片上传需要一个input:file表单 <inpu

推荐度：

点击下载本文 文档为doc格式

导读Ajax实现图片上传并预览功能:先给大家展示下效果图，大家感觉不错，请参考实现代码。最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能。虽然现在有很多的插件能实现，但是还是觉得自己写比较好。我们知道，图片上传需要一个input:file表单 <inpu

先给大家展示下效果图，大家感觉不错，请参考实现代码。

最近在使用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="' + '__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实现图片上传并预览功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Ajax实现图片上传并预览功能

推荐度：

点击下载本文 文档为doc格式

标签：上传实现效果图

热门焦点

Ajax实现图片上传并预览功能

Ajax实现图片上传并预览功能

Ajax实现图片上传并预览功能

最新推荐

猜你喜欢

热门推荐