> 웹 프론트엔드 > JS 튜토리얼 > 브라우저 이미지 선택, 미리보기, 회전 및 일괄 업로드_javascript 기술을 위한 JS 코드 구현

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

WBOY
풀어 주다: 2016-05-16 17:10:53
원래의
1253명이 탐색했습니다.

직장에서 접한 비즈니스 시나리오를 주로 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을 사용하여 입력[유형=파일] 목록을 유지하는데 이는 매우 영리합니다.

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

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

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

// 上传回调
        // 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 '';
            };

            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 < selectedIndexList.length; i ){

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

                                                                                                                                   var tplInput = '';                                                            }


uploadIframe.doUpload();

              false 반환;
           });

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿