JS使用H5实现上传图片预览的功能,以下是代码的实现:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>文件上传预览& lt;/title>
& lt;脚本type=" text/javascript祝辞//预览图片,参数说明:第一个参数:要预览的文件对象,第二个参数:预览的img标签的id名称
函数yl (obj, id) {//FileReader
如果(window.FileReader){//验证当前的浏览器是否支持图片预览
var=new FileReader读者();
var文件=obj.files [0];
var regexImage=/^ \//形象;//js正则表达式,匹配是否拥有形象
如果(regexImage.test (file.type)) {//设置读取结束的回调函数
reader.οnlοad=function(数据){
var img=. getelementbyid (id);
img.src=https://www.yisu.com/zixun/data.target.result;//将结果数据显示到img标签上
}；//开始读取上传的文件内容
reader.readAsDataURL(文件);
其他}{
警报(“亲,看清楚是图片预览”);
返回;
}
其他}{
警报(“亲,浏览器该升级了");
返回;
}
}
& lt;/script>
& lt;/head>
& lt; body>
& lt;形式行动=" fileup " method=" post " enctype=岸嗖糠?格式”比;
& lt;输入类型="文件" name=" f1/比;
& lt; img alt="图片预览" id=" ylimg宽度=" 400 px高度=?00 px”/比;
& lt;输入类型="提交" value=" https://www.yisu.com/zixun/上传图片”/比;
& lt;/form>
& lt;/body>
& lt;/html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
