图片上传兼容 IE8

2019-12-02 admin

<html> <head> <meta charset=“UTF-8”> <title></title> <style> .uploadImage{ display: inline-block; vertical-align: top; position: relative; width: 90px; height: 90px; background: url("…/点击上传.png") no-repeat; background-size: cover; text-align: center; cursor: pointer; } .uploadImage p{ position: absolute; left:0;right:0; bottom: 10px; font-size: 14px; color: #999999; } .uploadImage input#file{ width: 100%; height: 100%; opacity: 0; cursor: pointer; } .preview{ position: relative; display: inline-block; vertical-align: top; margin-left: 10px; width: 90px; height: 90px; background: #E1E6ED; text-align: center; } .preview img{ position: relative; z-index: 1; width: 100%; height: 100%; } .preview img[src=""]{ opacity:0; filter: Alpha(0); /* 兼容IE8-9 / } .preview img:not([src]){ opacity:0; filter: Alpha(0); / 兼容IE8-9 */ } .preview .word{ position: absolute; left: 0; right: 0; top: 0; line-height: 90px; font-size: 14px; color: #999999; z-index: 0; } </style> </head> <body> <div class=“pic”> <div class=“uploadImage”> <input type=“file” value=“上传文件” id=“file” accept=“image/png, image/jpeg, image/gif, image/jpg” multiple/> <p>点击上传</p> </div> <div class=“preview”> <img src="" id=“look1”> <p class=“word”>图片1</p> </div> <div class=“preview”> <img src="" id=“look2”> <p class=“word”>图片2</p> </div> </div> </body> <script src=“https://code.jquery.com/jquery-3.4.1.min.js” integrity=“sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=” crossorigin=“anonymous”></script> <script type=“text/javascript”> var hasUploadedOne = false;// 已上传过1张图片 var hasUploadedTwo = false;// 已上传过2张图片

//获取到预览框 var imgObjPreview1 = document.getElementById(“look1”); var imgObjPreview2 = document.getElementById(“look2”);

document.getElementById(‘file’).onchange = function() { // 若还没完成2张图片的上传 if(!hasUploadedTwo){ //获取到file的文件 var docObj = this;

    //获取到文件名和类型(非IE,可一次上传1张或多张)
    if(docObj.files && docObj.files[0]) {
        // 一次上传了>=2张图片(只有前两张会真的上传上去)
        if(docObj.files.length >= 2){
            imgObjPreview1.src = window.URL.createObjectURL(docObj.files[0]);
            imgObjPreview2.src = window.URL.createObjectURL(docObj.files[1]);
            hasUploadedTwo = true;
        }
        //一次只上传了1张照片
        else{
            // 这是上传的第一张照片
            if(!hasUploadedOne){
                imgObjPreview1.src = window.URL.createObjectURL(docObj.files[0]);
                hasUploadedOne = true;
            }
            // 这是上传的第二张照片
            else{
                imgObjPreview2.src = window.URL.createObjectURL(docObj.files[0]);
                hasUploadedTwo = true;
            }
        }

    }
    //IE(只能一次上传1张)
    else {
        //使用滤镜
        docObj.select();
        var imgSrc = document.selection.createRange().text;
        // 这是上传的第一张照片
        if(!hasUploadedOne){
            imgObjPreview1.src = imgSrc;
            hasUploadedOne = true;
        }
        // 这是上传的第二张照片
        else{
            imgObjPreview2.src = imgSrc;
            hasUploadedTwo = true;
        }
        document.selection.empty();
    }
    return true;
}

} </script>

[转载]原文链接:https://segmentfault.com/a/1190000021173375

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-80279.html

文章标题:图片上传兼容 IE8

相关文章
js实现鼠标左右移动,图片也跟着移动效果
效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动。图片距离越远偏移距离越大。 思路:首先获取图片原先的距离。设置一个变化值,图片的最终距离等于原先的距离加上变化值 布局:大盒子里面是图片,大盒子position:relative;图...
2017-02-17
AngularJS 文件上传控件 ng-file-upload详解
网上可以找到的 AngularJS 的文件上传控件有两个: angular-file-upload:https://github.com/nervgh/angular-file-upload ng-file-upload:https://g...
2017-03-10
图片优化的那些工具
图片作为页面的一个主要因素,它的大小直接影响了页面的加载速度,这一点在移动端尤显突出。 怎么让图片的大小更小?除了选择合适的格式(jpeg、gif、png),我们还可以利用网上的应用(如smushit、tinypng、imagemin、im...
2016-01-13
Element el-upload上传组件详解
upload上传是前端开发很常用的一个功能,在Vue开发中常用的Element组件库也提供了非常好用的upload组件。 基本用法 代码: &lt;el-upload :action=&quot;uploadActionUrl&quot;&...
2018-03-18
JS动态修改图片的URL(src)的方法
本文实例讲述了JS动态修改图片的URL(src)的方法。分享给大家供大家参考。具体如下: 下面的JS代码可以动态修改图片地址,以显示一张新的图片,实际上是通过修改图片的src属性来实现的 &lt;!DOCTYPE html&gt; &lt;...
2017-03-22
微信JSSDK上传图片
前不久微信公开了一些接口,其中有一个uploadImage接口用于上传图片,一般和chooseImage接口配合使用。先调用chooseImage接口让用户选择一张或者多张图片,用户选择完毕后微信会返回被选中图片的id,再把图片id传给up...
2017-03-29
最简单的JavaScript图片轮播代码(两种方法)
通过改变每个图片的opacity属性: 素材图片: 代码一: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta cha...
2017-03-21
javascript异步文件上传(兼容IE8+)
在非html5的情况下是无法用ajax把文件推送到后端的,只能通过form表单提交。但是form表单提交后浏览器会根据响应头与状态码对当前页面进行渲染、下载或跳转等行为,返回text、html、json等类型的内容时浏览器会对当前页面进行渲...
2017-04-05
使用iview的组件 Table 表格,有固定列,设置其中一个列适应屏幕大小
描述 在使用iview的组件Table表格时,有固定列,表格列宽不等。 在表格平铺时,不能自适应宽度。 问题 每个列有需要设置的宽度,有固定的列,很难调整某一列的宽度为刚刚好的。此时需要某一列自适应宽度。 解决 &lt;template...
2018-09-28
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
本文主要通过代码示例给大家介绍IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题;分步介绍,先给大家介绍IE7浏览器窗口大小改变事件执行多次bug,具体问题分析及解决方案请看下文。 var resizeTi...
2017-03-29
回到顶部