关闭

浏览器图片选择预览、旋转、批量上传的JS代码实现

625人阅读 评论(0) 收藏 举报
分类:
工作中遇到的业务场景,和同事一起研究了下,主要是为了兼容IE版本

其实就是一些琐碎的知识点在网上搜集下解决方式,然后集成了下,主要有以下点:

1. IE input type=file的图片预览要用IE的filter css

    progid:DXImageTransform.Microsoft.AlphaImageLoader

   chrome/firefox则用File api的file reader

2. 图片旋转,IE用progid:DXImageTransform.Microsoft.Matrix的filter(filter可以组合用,用空格隔开)

   chrome/firefox用canvas

3. 上传图片,我用的都是不可见的iframe 里的form动态的添加input[type=file]去实现。chrome/firefox可以用xhr,但我懒得去修改了

4. 其中为了实现上传图片不刷新本页面,又能反复选择文件,所以还用一个iframe专门维护一个input[type=file]的列表,比较偷巧。

[在新窗口打开图片]

可以参考下代码,主要是一个主html,然后两个iframe的html,上传的服务端返回的数据为上传成功的file name,用于删除预览图。
 代码如下:

// 上传回调
        // resultList -> ['file1', 'file2'] 为上传成功的file name
        var uploadCallback = function(resultList){
            console.log(JSON.stringify(resultList));

            var i = 0;
            for(; i < resultList.length; i++){
                var index = resultList[i].substr('file'.length);
                $(':checkbox[value=' + index + ']').parent().parent().remove();
            }
        };

        $(function(){
            // 保存图片旋转的角度,以便提交给服务端处理
            var rotateAng = {};
            // 用于命名后缀的序号
            var cc = 0;

            // 如果是chrome/ff,需要用file api去生成img
            var genImgTpl = function(input, index){
                return '<img src="/webx/public/1.png" class="main" id="img' + index + '" />';
            };

            var readImgFromInput = function(_input, index){
                var inputDom = _input[0];
                // chrome/ff
                if(inputDom['files']){
                    var reader = new FileReader();
                    reader.onload = function(e){
                        $('img.main:last').attr({src : e.target.result});
                    }
                    reader.readAsDataURL(inputDom['files'][0]);
                }else{
                    var src = _input[0].value;

                    var imgDom = $('#img' + index);
                    imgDom.attr('src-old', src);
                    imgDom.css({
                        float: 'left',
                        position: 'relative',
                        overflow: 'hidden',
                        width: '195px',
                        height: '195px'
                    });

                    imgDom.css({'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + src + "\")"});
                }
            };

            var showImg = function(_input){
                var index = ++cc;

                _input.addClass('hide');
                _input.attr('name', 'file' + index);
                _input.attr('data-index', index);

                var iframeWin = $('#choose')[0].contentWindow;
                iframeWin.addInput(_input);

                var tpl = '<div>' + genImgTpl(_input, index) +
                    '<span class="choose"><input type="checkbox" value="' + index + '" checked="true" /></span>' +
                    '<span class="opts turn-right"><img src="img/rightBtn.png" /></span>' +
                    '</div>';
                $('#imgDiv').append(tpl);

                readImgFromInput(_input, index);
            };
            var addAnother = function(){
                $('#uploadBtn').before('<input type="file" name="file" />');
            };

            // input[type=file]的绑定事件
            $('#uploadDiv input').live('change', function(){
                var path = this.value;
                if(!path){
                    return;
                }

                showImg($(this));
                addAnother();
            });

            // 可以在checkbox时候remove input
//            $('#imgDiv input:checkbox').live('change', function(){
//                var isChecked = $(this).is(':checked');
//                console.log(isChecked);
//            });

            $('#imgDiv span.turn-right').live('click', function(){
                // 上次旋转的角度
                var index = $(this).siblings('span.choose').find('input').val();
                var oldAng = rotateAng[index] || 0;
                var newAng = oldAng + 90;
                rotateAng[index] = newAng;

                $('#img' + index).rotate(90);
            });

            // 表单提交时候根据checkbox,删除未choose的input[type=file]
            $('#uploadBtn').click(function(){
                var choosedNum = $('#imgDiv input:checkbox').filter(':checked').length;
                if(!choosedNum){
                    alert('请选择上传文件!');
                    return false;
                }

                // 选中的序号数组
                var choosedIndexList = $('#imgDiv input:checkbox').filter(':checked').map(function(){
                    return this.value;
                }).get();

                // 两个iframe,一个用于保存选择的input[type=file]
                // 一个用于form upload
                var uploadIframe = $('#upload')[0].contentWindow;
                var chooseIframe = $('#choose')[0].contentWindow;

                var i = 0;
                for(; i < choosedIndexList.length; i++){
                    var index = choosedIndexList[i];
                    var inputFile = chooseIframe.$('#uploadDiv input').filter('[data-index=' + index + ']');
                    uploadIframe.$('#uploadForm').append(inputFile);

                    // 旋转度数
                    var ang = rotateAng[index] || 0;
                    if(ang % 360 != 0){
                        var tplInput = '<input type="hide" name="ang' + index + '" value="' + ang + '" />';
                        uploadIframe.$('#uploadForm').append(tplInput);
                    }
                }

                uploadIframe.doUpload();

                return false;
            });
        });

IE7、8、9和chrome中测试没有问题
0
0
查看评论

jquery.fileupload.js插件使用--多视频或音频上传预览

一、前台代码: jquery.fileupload.js使用测试 .bar { margin-top:10px; height:10px; ...
  • smm188
  • smm188
  • 2016-02-26 16:02
  • 2485

Android高仿微信照片选择器+预览+显示照片

转载请说明出处:  前阵子写过一片博客,是关于选择多图上传的一个小demo,那个demo是从网上找的然后自己修改了一下,那个demo是仿照QQ的选择照片的形式,那么现在用的比较多的是仿照微信选择照片的形式,所以自己就鼓捣了一个高仿微信照片选择的demo,这里跟大家分享一下,建议大家再看这篇...
  • lyhhj
  • lyhhj
  • 2015-10-11 11:09
  • 4057

JS实现浏览器打印、打印预览

目前正在做浏览器端采用JS方式实现打印这么一个功能,JS打印实现的方法很多,但是兼容各个浏览器实现打印预览的功能有些棘手,现将实现的内容及遇到的问题记录下来,希望有大牛看到所提的问题后可以给予解答,在此感谢啦。 1.JS实现打印的方式 方式一:window.print() window.pri...
  • fengshuiyue
  • fengshuiyue
  • 2017-02-26 23:49
  • 11787

WEB版一次选择多个文件进行批量上传(Plupload)的解决方案

原文链接 说明:Plupload支持多种浏览器,多种上传方式!       一般的WEB方式文件上传只能使用FileUpload控件进行一个文件一个文件的进行上传,就算是批量上传,也要把文件一个一个的添加到页面,无法如...
  • xiakepan
  • xiakepan
  • 2015-05-12 09:02
  • 3063

JS 实现浏览器打印、打印预览

目前正在做浏览器端采用JS方式实现打印这么一个功能,JS打印实现的方法很多,但是兼容各个浏览器实现打印预览的功能有些棘手,现将实现的内容及遇到的问题记录下来,希望有大牛看到所提的问题后可以给予解答,在此感谢啦。 1.JS实现打印的方式 方式一:window.print() window.print(...
  • qq_19707521
  • qq_19707521
  • 2017-02-28 10:18
  • 914

SpringMVC批量上传图片,实现上传前图片预览

最近有个功能需要实现批量上传图片,然后实现图片预览,因为项目比较老,同时对界面和用户操作体验也要求不太高,就没去找网上的开源插件,直接写了个简单的功能,这里做个记录备份因为这个是实验性的小代码,就没做太多的验证和界面调整可以实现乱序删除这就是简单的功能界面,下面就是代码首先是SpringMVC的xm...
  • Harry_ZH_Wang
  • Harry_ZH_Wang
  • 2017-07-16 23:32
  • 719

适用于各浏览器支持图片预览,无刷新异步批量上传js插件

大家都知道上传的时候会造成页面刷新,如果在不使用像flash或html5的情况下能够异步上传文件吗? 答案是肯定的,以下是自己写的一个无刷新异步上传插件兼容各浏览器,请大家多多指教. 首先应该有一个思路,js如何才能无刷新异步上传文件,我们知道在没有html5和flash的帮助下,传统的js...
  • sq111433
  • sq111433
  • 2013-10-16 20:32
  • 33292

【技巧】input选择图片预览

预览效果见下图:HTML代码如下:<html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta charset=...
  • zuncle
  • zuncle
  • 2017-03-15 17:55
  • 1817

IE中js调用脚本实现打印预览(按钮本身不打印)

print demo .noprint { display: none; } function doPrintSetup() { //打印设置 printWB.ExecWB(8, 1) } function doPr...
  • qq_30100043
  • qq_30100043
  • 2016-12-08 16:24
  • 2633

JS兼容各个浏览器的本地图片上传即时预览效果

在看代码之前,先让我们来了解以下知识点: HTML5中的FileReader对象: FileReader对象主要是把文件读入内存中,并且读取文件中数据。目前为止,firefox3.6+ chrome6+ Safari5.2+ Opera11+及IE10浏览器支持FileReader对...
  • mmd1234520
  • mmd1234520
  • 2017-03-30 15:35
  • 526
    个人资料
    • 访问:260773次
    • 积分:4934
    • 等级:
    • 排名:第6824名
    • 原创:244篇
    • 转载:44篇
    • 译文:0篇
    • 评论:24条
    博客专栏
    友情链接
    www.80hack.com