jquery解决file上传图片+图片预览
js解决file上传图片+图片预览
demo案例中代码为js原生控制，可以根据项目的需求修改为jquery操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="file" ;
document.getElementById('click').innerHTML = '';
document.getElementById('click').appendChild(img);
}
});
</script>
</body>
</html>
前段时间修改bug 再次找到一个不错的方法：
<img alt="" src="${notice.url}" style="80px;" />
//下面用于图片上传预览功能
function setImagePreview(objc) {
var docObj=document.getElementById(objc.file);
var imgObjPreview=document.getElementById(objc.pic);
if(docObj.files &&docObj.files[0]){
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = objc.width;
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
return true;
} else {
return false;
};
};
$("#file_pic").on("change",function(){
// 使用图片预览控件, opts 配置对象
var opts = {
file : 'file_pic',
pic : 'file_view',
width : '80px'
}
setImagePreview(opts);
})