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

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

以上是Ajax如何實現圖片上傳並預覽功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！