<input type='file' name='pic'> 

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

<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> 

<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="/UploadFiles/2021-04-02/' + '__ROAD__' + ret['f'] + '">

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