ajax异步上传文件

最新推荐文章于 2019-10-28 18:10:16 发布

原创最新推荐文章于 2019-10-28 18:10:16 发布 · 380 阅读

0 ·

CC 4.0 BY-SA版权

13k 同时被 2 个专栏收录

53 篇文章

订阅专栏

13 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的图片上传功能，包括文件类型检查、预览及通过Ajax发送到服务器进行处理的过程。文章详细展示了如何利用FileReader API读取图片文件，并将其显示在页面上，同时实现了将文件数据打包并通过POST请求发送给服务器的功能。

$(".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"));//写入内容
						}
					});	
				});
			});