Ajax实现图像上传和预览功能

先给大家看看效果图。每个人都感觉很好。请参考实现代码。

最近在使用ThinkPHP5的开发项目中，有客户在上传图片时需要附加预览功能。虽然现在可以实现的插件很多，但我还是觉得还是自己写比较好。我们知道，图像上传需要一个输入：文件的形式

输入类型='file' name='pic '当我们点击表单时，系统会提示我们选择要上传的图片。但是分析了这个需求之后，我们可以在点击图片的时候使用JS实现预览功能，楼主也是这样做的。代码如下：

函数GetFileURL(SourceID){ var URL；url=窗口。URL . createobjecturl(document . getelementbyid(sourceId). files . item(0))；返回url}函数preImg(sourceId，TargetId){ var URL=getfileURl(source id)；var imgPre=document . getelementbyid(TargetId)；imgPre.src=url}效果如下：

但是，会有很多兼容性问题。于是我想到了Ajax。上传图片的时候，我用的是Ajax技术。将图片上传到服务器，然后服务器将图片的上传地址返回给我们，再添加到img标签中。虽然过程有点麻烦，但在亲测中不会出现兼容性问题。

如果你需要发送Ajax请求，当然input:file文件形式不能满足我们的需求。因此，我们需要将点击事件与表单相关联，以帮助我们发出Ajax请求并选择图片

Form id=' form1 '标签为=' exampleinputmail 1 ' avatar/labe input type=' button ' value='上传图片' onclick=' f . click()' class=' BTN _ mouseout '/br pinput type=' file ' id=' f ' name=' f ' Style=' display : none '/p/formdiv id=' result '/div当我们单击按钮上传图片时，它会触发input:file来选择图片进行Ajax上传

脚本函数sc(){ var animateimg=$('#f ')。val()；//用//var imgar=animatimg.split ('\ \ ')获取上传的图片名称；//split var myimg=imgar [imgar。长度-1]；//remove//获取图片名称var houzui=myimg.lastIndexOf(' . '));//获取位置。出现var ext=myimg.substring (houzui，myimg.length)。touppercase()；//剪切。获取文件后缀varfile=$ ('# f ')。获取(0)。文件[0]；//获取上传的文件var fileSize=file.size//获取上传的文件大小var maxSize=1048576//最大1MB if(ext！='.巴布亚新几内亚文字母！='.GIF' ext！='.jpg分机！='.JPEG' ext！='.BMP'){ parent.layer.msg('文件类型错误，请上传图片类型')；返回false} else if(par sent(file size)=par sent(maxsize)){ parent . layer . msg('上传的文件不能超过1MB ')；返回false} else { var data=new FormData($(“# form 1”)[0])；$.Ajax({ URL :“{ : URL(' User/uppic ')} '，type: 'POST '，data: data，dataType: 'JSON '，cache: false，processData: false，contentType: false })。done(function(ret){ if(ret[' issucess ']){ var result=' '；var result1=//$('#show ')。attr('value '，ret[' f '])；结果=' img src=' http : ' ' _ _ ROAD _ _ ' ret[' f ']' width=' 100 '；result 1=' input value=' ret[' f ']' name=' user _ head img ' style=' display : none；'';$('#result ')。html(结果)；$('#show ')。html(结果1)；Layer.msg('上传成功')；}else{ layer.msg('上传失败')；} });返回false}} /script在这里，我们提交表单数据对面的表单，然后在服务器端接收

public function uppic(){ $ file=request()-file(' f ')；$info=$file-move(ROOT_PATH。公众/上传/头像’)；$ a=$ info-getSaveName()；$imgp=str_replace('\\ '，'/'，$ a)；$imgpath='上传/头像/'。$ imgp$ banner _ img=$ imgpath$ response=array()；if($ info){ $ response[' issucess ']=true；$ response[' f ']=$ img path；} else { $ response[' issucess ']=false；} echo JSON _ encode($ response)；}此处将返回图像上传的url路径：$ response[' f]=$ img path；现在我们要做的是将这个url写入前景的HTML部分进行显示

div class='form-group '！-将Ajax上传的图像路径添加到数据库中-div id=' show'/div/div在JS中添加

$('#show ')。html(结果1)；摘要

以上是边肖介绍的上传预览图片的Ajax功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！