使用Ajax怎么上传图片并预览-创新互联

使用Ajax怎么上传图片并预览？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

创新互联致力于互联网品牌建设与网络营销，包括网站设计、成都网站设计、SEO优化、网络推广、整站优化营销策划推广、电子商务、移动互联网营销等。创新互联为不同类型的客户提供良好的互联网应用定制及解决方案，创新互联核心团队10年专注互联网开发，积累了丰富的网站经验，为广大企业客户提供一站式企业网站建设服务，在网站建设行业内树立了良好口碑。

最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能。虽然现在有很多的插件能实现，但是还是觉得自己写比较好。我们知道，图片上传需要一个input:file表单

当我们点击表单的时候提示选择需要上传的图片。但是此需求我们分析一下，可以在点击图片的时候使用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请求并选择图片

 
   头像 
   
 
    
 
  

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); 
  }