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


Posted in Javascript onDecember 04, 2013

工作中遇到的业务场景,和同事一起研究了下,主要是为了兼容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]的列表,比较偷巧。

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

可以参考下代码,主要是一个主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中测试没有问题
Javascript 相关文章推荐
Javascript 获取字符串字节数的多种方法
Jun 02 Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
jQuery获取单击节点对象的方法
Jun 02 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
最基础的vue.js双向绑定操作
Aug 23 Javascript
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
js+html实现周岁年龄计算器
Jun 25 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
Dec 04 #Javascript
两个数组去重的JS代码
Dec 04 #Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 #Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 #Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 #Javascript
js跑步算法的实现代码
Dec 04 #Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 #Javascript
You might like
PHP中动态显示签名和ip原理
2007/03/28 PHP
PHP与SQL注入攻击[一]
2007/04/17 PHP
php实现分页显示
2015/11/03 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
图片无缝滚动代码(向左/向下/向上)
2013/04/10 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
Vue router安装及使用方法解析
2020/12/02 Vue.js
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
Python是怎样处理json模块的
2020/07/16 Python
C#和SQL Server的面试题
2016/08/12 面试题
工作中的自我评价如何写好
2013/10/28 职场文书
超市端午节活动方案
2014/01/23 职场文书
学术诚信承诺书
2014/05/26 职场文书
中层干部培训方案
2014/06/16 职场文书
董事长开业致辞
2015/07/29 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python
Python实现日志实时监测的示例详解
2022/04/06 Python