브라우저 이미지 선택, 미리보기, 회전 및 일괄 업로드_javascript 기술을 위한 JS 코드 구현

직장에서 접한 비즈니스 시나리오를 주로 IE 버전과의 호환성을 위해 동료들과 함께 연구했습니다

실제로 인터넷에서 소소한 지식 포인트와 해결방법을 모아서 정리한 내용은 다음과 같습니다.

1. IE 입력 유형=파일 이미지 미리보기에는 IE의 필터 CSS가 필요합니다

progid:DXImageTransform.Microsoft.AlphaImageLoader

Chrome/firefox는 File api의 파일 리더를 사용합니다

2. 이미지 회전을 위해 IE는 progid:DXImageTransform.Microsoft.Matrix 필터를 사용합니다(필터는 공백으로 결합 및 구분 가능)

크롬/파이어폭스에는 캔버스를 사용하세요

3. 이미지를 업로드하려면 보이지 않는 iframe의 양식을 사용하여 입력[유형=파일]을 동적으로 추가합니다. Chrome/firefox는 xhr을 사용할 수 있지만 수정하기에는 너무 게으르다

4. 이 페이지를 새로 고치지 않고 이미지를 업로드하고 파일을 반복적으로 선택할 수 있도록 iframe을 사용하여 입력[유형=파일] 목록을 유지하는데 이는 매우 영리합니다.

아래 코드를 참고하시면 됩니다. 주로 메인 html이고 그 다음에는 2개의 iframe html입니다. 업로드된 서버에서 반환되는 데이터는 성공적으로 업로드된 파일의 파일명으로, 미리보기 이미지를 삭제하는 데 사용됩니다.

코드 복사 코드는 다음과 같습니다.

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

            var i = 0;
            for(; 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 '';
            };

            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 = '

' + genImgTpl(_input, index) +
                    '' +
                    '' +
                    '

';
                $('#imgDiv').append(tpl);

                readImgFromInput(_input, index);
            };
            var addAnother = function(){
                $('#uploadBtn').before('');
            };

            // 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();

                                                                                                             
var chooseIframe = $('#choose')[0].contentWindow. ;

var i = 0;

for(; i var index = selectedIndexList[i];
      var inputFile = chooseIframe.$('#uploadDiv 입력' ).filter('[data-index=' index ']');
           uploadIframe.$('#uploadForm').append(inputFile);

                                                                                                                                   var tplInput = '';                                                            }

uploadIframe.doUpload();

              false 반환;
           });