jquery 上传图片（头像）

最新推荐文章于 2024-08-15 10:14:54 发布

Mr.冬冬

最新推荐文章于 2024-08-15 10:14:54 发布

阅读量4k

点赞数 1

分类专栏： JavaScript Jquery

本文链接：https://blog.csdn.net/weixin_42307129/article/details/90515268

版权

本文介绍了如何利用jQuery实现简单的图片上传操作，包括选择图片、预览和提交等步骤，适用于用户头像或其他图片上传场景。

摘要由CSDN通过智能技术生成

<form id="head-img" enctype="multipart/form-data" >
	<input type="file"  name="imgfile"  style="display: none!important;"  onchange="uploadPic()" id="imgfile" accept="image/*" value="" />					
</form>
<img  class="head-img" id="user-head" src="/img/head.png"/>

js代码
$("body").on("click",".head-img",function(){
	$("#imgfile").trigger("click");  //通过点击图片执行input file事件
})
//上传到服务器
function uploadPic() {
    var formData = new FormData($('#head-img')[0]);
    //上传到服务器
	$.ajax({
        url: p_path+"/App/uploadFile", //上传图片服务器地址
        type: 'POST',
        data: formData, //form对象
        cache: false,
        contentType: false,
        processData: false,
        success: function (d) {
        	var i