欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-06 16:47:49
先给大家展示下效果图,大家感觉不错,请参考实现代码。 最近在使用thinkphp5开发项目中客户有一个需求是在图片上传时附带预览功能。虽然现在有很多的插件能实现,但是...

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

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,在图片上传时,使用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实现图片上传并预览功能,希望对大家有所帮助