ブラウザー画像の選択、プレビュー、回転、バッチアップロード用の JS コード実装_javascript スキル

主に IE バージョンとの互換性について、職場で遭遇したビジネス シナリオを同僚と勉強しました

実際、インターネット上で豆知識や解決策を集めて統合しました。主なポイントは次のとおりです。

1. IE 入力タイプ=ファイル画像プレビューには IE のフィルター CSS が必要です

progid:DXImageTransform.Microsoft.AlphaImageLoader

Chrome/Firefox は File API のファイルリーダーを使用します

2. 画像の回転には、IE は progid:DXImageTransform.Microsoft.Matrix のフィルターを使用します (フィルターはスペースで区切って結合できます)

Chrome/Firefox 用のキャンバスを使用します

3. 画像をアップロードするには、非表示の iframe のフォームを使用して input[type=file] を動的に追加します。 Chrome/Firefox では xhr を使用できますが、修正するのが面倒です

4. このページを更新せずに画像をアップロードし、ファイルを繰り返し選択できるようにするために、iframe を使用して input[type=file] のリストを維持します。これは非常に賢明です。

以下のコードを参照してください。これは主にメイン 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();

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

var i = 0;

for(; i varindex = selectedIndexList[i];
var inputFile =chooseIframe.$('#uploadDiv input' ).filter('[data-index=' インデックス ']');
uploadIframe.$('#uploadForm').append(inputFile);

var tplInput = ''; }

UploadIframe.doUpload();

return false;
});