jquery 上传图片并浏览

最新推荐文章于 2022-09-20 16:13:06 发布

原创最新推荐文章于 2022-09-20 16:13:06 发布 · 483 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用JavaScript实现的方法，用于实时预览用户上传的图片，并验证所选文件是否为支持的图片格式（如jpg、jpeg、png、gif或bmp）。此功能对于网页表单特别有用，可以提升用户体验并确保数据的有效性。

var sImg = document.getElementById("s_img"); //file的Id

var showImg = document.getElementById("show_img"); //显示图片

sImg.onchange = function(){

fileText.value = sImg.value;
showImg.innerHTML ='';
var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;
var path;
if (!pattern.test(this.value))
{
alert("仅支持jpg/jpeg/png/gif/bmp格式的照片！");
imgFile.focus();
}
else {
if (/msie/.test(navigator.userAgent.toLowerCase())) {
this.select();
path = document.selection.createRange().text;
showImg.innerHTML ='';
showImg.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";
} else {
path = URL.createObjectURL(this.files[0]);
showImg.innerHTML="<img src='" + path + "' style='width:100px; height: 100px'/>";
}
}

}

</script>