上传图片AJAX(DemoText)

最新推荐文章于 2022-11-25 18:56:53 发布

鶉諷

最新推荐文章于 2022-11-25 18:56:53 发布

阅读量210

点赞数

分类专栏：知识整理文章标签： ajax

本文链接：https://blog.csdn.net/qq_36514705/article/details/81413562

版权

知识整理专栏收录该内容

16 篇文章 1 订阅

订阅专栏

网页：

 <!--头像-->
            <div class="rs_content_headPortrait">
	                <span class="same">我的头像：</span>
	                
	                <c:if test="${useri.image==null}">
	               	 	<img src="../images/personage/touxiang.png" alt="" id="icon" width="50px" height="50px"/>
	                </c:if>
	                
	                <c:if test="${useri.image!=null }">
		                <img src="..${useri.image}" alt="" id="icon" width="50px" height="50px"/>
	                </c:if>
	    
	                <input type="file" name="file" id="iconPic" onchange="getImage(this)"/>
	                <!-- 
	                <span class="change_headPortrait same_click" data-toggle="modal" data-target="#avatar-modal" >更改头像</span>
	                 -->
	            </div>

js：

        //创建一个设置表单数据的对象
		var formData = new FormData();
		
		//获取上传文件的文件对象
		var file = document.getElementById("iconPic").files[0];//js 读取文件对象
        //formData.append('file', $('#input_file')[0].files[0]);  /*添加图片信息的参数*/		
		
		formData.append("file",file);//加入文件对象
		
		var param=formData;

$.ajax({
			url:'../user/upload.shop',
			type:'POST',
			cache:false,//不缓存上传文件
			data:param,
            //不处理数据：processData、contentType
			processData:false,
			contentType:false,
			
            success:function(obj){
				alert(obj.message);
				console.log(obj);
				//创建url对象
				var url = window.URL.createObjectURL(file);
				icon.src=url;
				
			},
			error:function(){
				alert("上传失败");
			}
			
			
		});