IE8/9 本地预览上传图片
2023-02-18 15:32:27 时间
本地预览的意思是,在选择图片之后先不上传到服务器,而是由一个<img>
标签来预览本地的图片,非 IE8/9 浏览器可以从<input type=“file”/>
中获取到图片流,然后设置到<img src=“”>
进行显示,但 IE8/9 浏览器只能获取到本地图片的绝对路径,并且设置 src 是无效的。
解决上面问题的方式是采用 css 图片滤镜,示例代码:
<!-- 要设置图片预览区域的大小 -->
<p class="img-wrap">
<img name="prevPic" id="prevPic" src="" />
<input name="uploadImage" id="uploadImage" type="file" />
</p>
<script type="text/javascript">
$('#uploadImage').change(function (e) {
if (navigator.userAgent.indexOf('MSIE 8') >= 0 || navigator.userAgent.indexOf('MSIE 9') >= 0) {
$(this).select();
window.parent.document.body.focus();
var realpath = document.selection.createRange().text;
$(this).parent().css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src=\"" + realpath + "\",sizingMethod=scale)");
}
else {
var file = e.delegateTarget.files[0];
var reader = new FileReader();
var targetId = e.target.id;
reader.readAsDataURL(file);
reader.onload = function () {
var picString = reader.result;
$("#prevPic").attr({ "src": picString }).show();
};
}
});
</script>
获取realpath
是为了解决发布 IIS 之后,出现本地图片路径变成C:\fakepath\xxxx.jpg
的问题。
相关文章
- [PHP] socket客户端时的超时问题
- [nginx]配置nginx支持websocket解决返回400错误问题
- [nginx]配置nginx支持websocket解决返回400错误问题
- [PHP] php5.3之前-php5.3-php7垃圾回收机制的进化
- [PHP] include语句的注意事项
- [TCP] tcp连接SYN超时重传次数和超时时间
- [PHP] 编译安装swoole
- [PHP] swoole直接使用二进制包
- [PHP] php使用event扩展的io复用测试
- [PHP]正则表达式\w和\W区别
- [MySQL] 使用force index强制使用索引
- [HTTP]解决406 not acceptable 错误
- [PHP] 接口增加recaptcha行为验证
- [PHP] Workerman中的注册树模式
- [日常] 解决mysql localhost可以连接但是127.0.0.1不能连接
- [日常] ubuntu下安装php pdo扩展和导入数据库
- [Nginx] nginx配置域名反代后端端口
- [PHP] 使用适配器模式处理数据库对象
- [PHP]使用策略模式消除if else
- [日常] win10开启和安装ubuntu子系统