ajax异步上传文件

前端之家收集整理的这篇文章主要介绍了ajax异步上传文件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
$(".upload-img").on("click",function(){
				$("#file-uploader").click().on("change",function(){
					$(".resp-result-span").html("");//清空上次右侧处理结果
					$(".resp-json-container").val("");
					$(".resp-result-span").html("<h3>图片处理中...</h3>");
					var file = this.files[0];
					//console.log(file);
			        if(!/image\/[(jpg)(png)]+/.test(file.type)){
			            alert("请确保文件为图像类型");
			            return false;
			        }
			        var reader = new FileReader();
			        reader.readAsDataURL(file);
			        
			        reader.onload = function(e){
						$("#face-img").attr("src",this.result);
			        }
			        
			        var formData = new FormData();
			        formData.append("file",$("#file-uploader")[0].files[0]);
					$.ajax({
						type:'POST',url:'<%=basePath%>/pic/file',data : formData,// 告诉jQuery不要去处理发送的数据
						processData : false,// 告诉jQuery不要去设置Content-Type请求头
						contentType : false,dataType:'json',success:function(data){
							$(".resp-result-span").html("");//清空数据
							$(".resp-json-container").val("");
							$(".resp-result-span").html("<img src='data:image/png;base64,"+data.img+"'>");//写入内容
							$(".resp-json-container").val(JSON.stringify(data,null,"\t"));//写入内容
						}
					});	
				});
			});
原文链接:https://www.f2er.com/ajax/160656.html

猜你在找的Ajax相关文章