js图片上传获取本地地址预览
分类专栏: Javascript&
简介 图片上传,获取本地地址进行预览。
<p><span class="ql-size-huge">移动Web</span></p><p><br></p><pre class="ql-syntax" spellcheck="false">
<body>
<form enctype="multipart/form-data" name="form1">
上传文件:<input id="f" type="file" name="f" onchange="change()" />
预览:<img id="preview" alt="" name="pic" width="300" height="150" />
</form>
<script>
function change() {
var pic = document.getElementById("preview");
var file = document.getElementById("f");
var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();//js获取文件名的后缀
html5Reader(file);
}
function html5Reader(file){
var file = file.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
var pic = document.getElementById("preview");
pic.src=this.result;
}
}
</script>
</body>
</html>
</pre><p><br></p><p><br></p><p><strong class="ql-size-huge">兼容IE版本</strong></p><p><br></p><pre class="ql-syntax" spellcheck="false">function change() {
var pic = document.getElementById("preview");
var file = document.getElementById("f");
var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
// gif在IE浏览器暂时无法显示
if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){
alert("文件必须为图片!"); return;
}
// IE浏览器
if (document.all) {
file.select();
var reallocalpath = document.selection.createRange().text;
var ie6 = /msie 6/i.test(navigator.userAgent);
// IE6浏览器设置img的src为本地路径可以直接显示图片
if (ie6) pic.src = reallocalpath;
else {
// 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片,但是可以通过滤镜来实现
pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
// 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
}
}else{
html5Reader(file);
}
}
function html5Reader(file){
var file = file.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
var pic = document.getElementById("preview");
pic.src=this.result;
}
}
</pre><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p>
分享到:
转载:
https://www.jb51.net/article/173894.htm
作者:yo胡yo
喜欢 2
收藏
暂无评论信息
- 相关文章
- 文章推荐
-
半导体短缺即将结束?分析师:如果没有 1 美元芯片会影响更多
德勤咨询(Deloitte Consulting)的芯片分析师认为,随着芯片行业资本支出的增加,需求度较高的工厂已经开工,预示着短缺情况即将结束。
-
HTML 面试知识点总结
本部分主要是笔者在复习 HTML 相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出!
-
群辉nas docker容器 配置svn仓库,并实现外网访问
2022-08-11的这一天, 群辉nas到手了, 实现svn仓库外网的访问,折腾了好久。记录一下。
-
娱美德旗下MMORPG手游《传奇4》将推出新PVP玩法"比奇掠夺"&
《传奇4》推出新门派PVP玩法!韩国首尔2022年6月29日 /美通社/ -- 《传奇4》(MIR4)的新PVP玩法比奇掠夺(Bicheon Heist)于2022年6月28日推出。
- 点击排行
- 站长推荐
- 猜你喜欢
- 全国计算机二级Python资料
- mediaDevices.getUserMedia提示DOMException:Permission denied by
- TikTok 推出“得克萨斯计划”,以更好地保护美国用户数据
- Counterpoint:台积电占据 Q1 智能手机 AP / SoC 和基带出货量 70% 份额
- flutter doctor -v 出现感叹号
- 国轩高科拟在欧洲投建年产18GWh生产基地
- Node 配置sequelize + mysql,根据模型自动创建数据库表
- 浪潮信息:新型自监督学习框架论文入选CVPR 2022
- javascript,通用tool,将会持续更新。
- jQuery 3.0正式发布
- 网站信息
- 站内问答:12篇
- 站内文章:213篇
- 建站时间:已运行1244天
- 备案号: 浙ICP备2022018799号
- 语言:
- English(USA)
- French(FR)
- Chinese(ZH)
无数据