[ajax预览并上传图片]

html代码

<img src="" width="100%" height="400px" id="img-change">
<input type="file" id="chooseImg" style="display:none;" >

JS代码

$(function () {
		$("#img-change").click(function () {
			$("#chooseImg").click();
		});
		$("#chooseImg").on('change',function (event) {



			var files = event.target.files, file;
			console.log(event.target.result);
			if (files && files.length > 0) {
				// 获取目前上传的文件
				file = files[0];// 文件大小校验的动作
				console.log(file);
				console.log(file.type);
				console.log(file.URL);
				var fileName = file.name;
				if (!fileName.endsWith(".jpg") && !fileName.endsWith(".jpeg") && !fileName.endsWith(".png")) {
					alert("图片格式不正确");
					return false;
				}
				if(file.size > 1024 * 1024 * 2) {
					alert('图片大小不能超过 2MB!');
					return false;
				}
				//本地预览
				/*var rd = new FileReader();//创建文件读取对象
				rd.readAsDataURL(file);//文件读取装换为base64类型
				rd.onloadend = function(e) {
					//加载完毕之后获取结果赋值给img
					$("#img-change").attr("src",data.data.src);
					console.log(this.result);
				}*/

				var formData = new FormData();
				formData.append('imgFile', $('#chooseImg')[0].files[0]);  //添加图片信息的参数
				formData.append('sizeid',123);
				$.ajax({
					url: '/admin/api/upload/img' ,  /*这是处理文件上传的servlet*/
					type: 'POST',
					data: formData,
					async: false,
					cache: false,
					contentType: false,
					processData: false,
					success: function (data) {
						$("#img-change").attr("src",data.data.src);
					},
				});
			}
		});
	})