分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

js 上传图片预览

发布时间:2023-09-06 02:24责任编辑:傅花花关键词:js上传图片
<head> ???<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> <body><div id="localImag"> ???<img id="preview" style="display:block; border:1px solid red; width: 150px; height: 180px;"></div><input id="doc" type="file" name="file" onchange="javascript:setImagePreview();"><script type="text/javascript"> ???//下面用于图片上传预览功能 ???function setImagePreview(avalue) { ???????var docObj=document.getElementById("doc"); ????????var imgObjPreview=document.getElementById("preview"); ???????if(docObj.files && docObj.files[0]){ ???????????imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]); ???????}else{ ???????????????//IE低版本下,使用滤镜 ???????????docObj.select(); ???????????var imgSrc = document.selection.createRange().text; ???????????var localImagId = document.getElementById("localImag"); ???????????//必须设置初始大小 ???????????localImagId.style.width = "150px"; ???????????localImagId.style.height = "180px"; ???????????//图片异常的捕捉,防止用户修改后缀来伪造图片 ???????????try{ ???????????????localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; ???????????????localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; ???????????}catch(e){ ???????????????alert("您上传的图片格式不正确,请重新选择!"); ???????????????return false; ???????????} ???????????imgObjPreview.style.display = ‘none‘; ???????????document.selection.empty(); ???????} ???} </script></body>

js 上传图片预览

原文地址:https://www.cnblogs.com/justSmile2/p/10034055.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved