Ajax实现图片上传并预览

图片上传并预览"/>

Ajax实现图片上传并预览

效果见尾部。

最近在使用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="上传图片" οnclick="f.click()" class="btn_mouseout"/><br><p><input type="file" id="f" name="f" οnchange="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;              //最大1MBif(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);

即可进行上传并预览啦。最终效果图如下