【ajax】文件上传，头像修改

html

<input type="file" id="avatar" name="avatar" hidden />

<a class="ico">
<img id="user_ico_img" src="" width="100" height="100" alt="" />
</a>
<a class="blue" href="javascript:void(0)" id="changeAvatar"> 修改头像</a>

脚本

<script>
	$(function () {
		$("#changeAvatar").click(function () {
			$("#avatar").click(); // 执行文件上传按钮点击事件
		})
	})
	$("#avatar").change(function (e) {
		var sc = $("#avatar").get(0).files[0];
		if (sc) {
			upload_img();
		}
	})
	function upload_img() {
		var formData = new FormData();
		formData.append("file", document.getElementById("avatar").files[0]);
		$.ajax({
			url: '/user?opr=update&type=2',
			data: formData,
			type: "post",
			dataType: "json",
			processData: false, //必须false才会避开jQuery对 formdata 的默认处理 XMLHttpRequest会对 formdata 进行正确的处理
			contentType: false, //必须false才会自动加上正确的Content-Type
			beforeSend: function (r) {
				//加载层-默认风格
				layer.load();
			},
			success: function (r, states, xh) {
				if (r.msg == 'ok') {
					layer.msg("头像修改成功", { icon: 1 });
					$("#user_ico_img").prop("src", "/" + r.img);

				} else {
					layer.msg("<em style='color:#ff0000'>" + r.msg + "</em>", { time: 1200, icon: 5 });
				}
			},
			complete: function (XMLHttpRequest, textStatus) {
				// alert('远程调用成功，状态文本值：'+textStatus);
				layer.closeAll('loading');
			},
			error: function () {
				layer.msg("系统繁忙，请稍后再试", { icon: 2 });
			}
		});
	}
</script>