本文实例为大家分享了jquery实现上传图片功能的具体代码，供大家参考，具体内容如下

代码：

点击头像上传图片

*{

margin:0;

padding: 0;

}

div,#avarimgs,#xdaTanFileImg{

width: 100px;

height: 100px;

}

div{

margin:50px auto;

position: relative;

}

#xdaTanFileImg{

position: absolute;

top: 0;

left: 0;

opacity: 0;

}

if (typeof FileReader == 'undefined') {

document.getElementById("xmTanDiv").InnerHTML = "

当前浏览器不支持FileReader接口

";

document.getElementById("xdaTanFileImg").setAttribute("disabled", "disabled");

}

//选择图片，马上预览

function xmTanUploadImg(obj) {

console.log(obj)

var file = obj.files[0];

console.log(obj);console.log(file);

console.log("file.size = " + file.size);

var reader = new FileReader();

reader.onloadstart = function (e) {

console.log("开始读取....");

}

reader.onprogress = function (e) {

console.log("正在读取中....");

}

reader.onabort = function (e) {

console.log("中断读取....");

}

reader.onerror = function (e) {

console.log("读取异常....");

}

reader.onload = function (e) {

console.log("成功读取....");

var img = document.getElementById("avarimgs");

img.src = e.target.result;

//或者 img.src = this.result; //e.target == this

}

reader.readAsDataURL(file)

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。