How to implement image upload and preview functions with Ajax

本篇文章给大家分享的内容是Ajax如何实现图片上传并预览功能，有着一定的参考价值，有需要的朋友可以参考一下

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

<input type=&#39;file&#39; name=&#39;pic&#39;>

当我们点击表单的时候提示选择需要上传的图片。但是此需求我们分析一下，可以在点击图片的时候使用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="上传图片" onclick="f.click()" class="btn_mouseout"/><br>
       <p><input type="file" id="f" name="f" onchange="sc(this);" style="display:none"/></p>
 </form>
<p id="result"></p>

当我们点击上传图片这个button按钮时触发input:file选择图片实现Ajax上传

<script>
function sc(){
    var animateimg = $("#f").val(); //获取上传的图片名 带//
    var imgarr=animateimg.split(&#39;\\&#39;); //分割
    var myimg=imgarr[imgarr.length-1]; //去掉 // 获取图片名
    var houzui = myimg.lastIndexOf(&#39;.&#39;); //获取 . 出现的位置
    var ext = myimg.substring(houzui, myimg.length).toUpperCase();  //切割 . 获取文件后缀
    
    var file = $(&#39;#f&#39;).get(0).files[0]; //获取上传的文件
    var fileSize = file.size;           //获取上传的文件大小
    var maxSize = 1048576;              //最大1MB
    if(ext !=&#39;.PNG&#39; && ext !=&#39;.GIF&#39; && ext !=&#39;.JPG&#39; && ext !=&#39;.JPEG&#39; && ext !=&#39;.BMP&#39;){
        parent.layer.msg(&#39;文件类型错误,请上传图片类型&#39;);
        return false;
    }else if(parseInt(fileSize) >= parseInt(maxSize)){
        parent.layer.msg(&#39;上传的文件不能超过1MB&#39;);
        return false;
    }else{  
        var data = new FormData($(&#39;#form1&#39;)[0]); 
        $.ajax({  
            url: "{:url(&#39;User/uppic&#39;)}", 
            type: &#39;POST&#39;,  
            data: data,  
            dataType: &#39;JSON&#39;,  
            cache: false,  
            processData: false,  
            contentType: false  
        }).done(function(ret){  
            if(ret[&#39;isSuccess&#39;]){
                var result = &#39;&#39;;
                var result1 = &#39;&#39;;
                // $("#show").attr(&#39;value&#39;,+ ret[&#39;f&#39;] +);
                result += &#39;<img src="&#39; + &#39;__ROAD__&#39; + ret[&#39;f&#39;]  + &#39;" width="100">&#39;;
                result1 += &#39;<input value="&#39; + ret[&#39;f&#39;]  + &#39;" name="user_headimg" style="display:none;">&#39;;
                $(&#39;#result&#39;).html(result);
                $(&#39;#show&#39;).html(result1);
                layer.msg(&#39;上传成功&#39;);
            }else{  
                layer.msg(&#39;上传失败&#39;);
            }  
        });  
        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部分进行一个显示

<p class="form-group">
    <!-- 将Ajax上传的图片路径添加到数据库 -->
   <p id="show"></p>
</p>

在JS中添加

$('#show').html(result1);

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

The above is the detailed content of How to implement image upload and preview functions with Ajax. For more information, please follow other related articles on the PHP Chinese website!