瀏覽器圖片選擇預(yù)覽、旋轉(zhuǎn)、批量上傳的JS代碼實現(xiàn)

更新時間：2013年12月04日 16:46:56 作者：

這篇文章主要介紹了瀏覽器圖片選擇預(yù)覽、旋轉(zhuǎn)、批量上傳的JS代碼實現(xiàn)，有需要的朋友可以參考一下

工作中遇到的業(yè)務(wù)場景，和同事一起研究了下，主要是為了兼容IE版本

其實就是一些瑣碎的知識點在網(wǎng)上搜集下解決方式，然后集成了下，主要有以下點：

1. IE input type=file的圖片預(yù)覽要用IE的filter css

progid:DXImageTransform.Microsoft.AlphaImageLoader

chrome/firefox則用File api的file reader

2. 圖片旋轉(zhuǎn)，IE用progid:DXImageTransform.Microsoft.Matrix的filter（filter可以組合用，用空格隔開）

chrome/firefox用canvas

3. 上傳圖片，我用的都是不可見的iframe 里的form動態(tài)的添加input[type=file]去實現(xiàn)。chrome/firefox可以用xhr，但我懶得去修改了

4. 其中為了實現(xiàn)上傳圖片不刷新本頁面，又能反復(fù)選擇文件，所以還用一個iframe專門維護一個input[type=file]的列表，比較偷巧。

可以參考下代碼，主要是一個主html，然后兩個iframe的html，上傳的服務(wù)端返回的數(shù)據(jù)為上傳成功的file name，用于刪除預(yù)覽圖。

復(fù)制代碼代碼如下:

// 上傳回調(diào)
        // 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(){
            // 保存圖片旋轉(zhuǎn)的角度，以便提交給服務(wù)端處理
            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 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(){
                // 上次旋轉(zhuǎn)的角度
                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);
});

            // 表單提交時候根據(jù)checkbox，刪除未choose的input[type=file]
            $('#uploadBtn').click(function(){
                var choosedNum = $('#imgDiv input:checkbox').filter(':checked').length;
                if(!choosedNum){
                    alert('請選擇上傳文件！');
                    return false;
                }

                // 選中的序號數(shù)組
                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);

                    // 旋轉(zhuǎn)度數(shù)
                    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中測試沒有問題

您可能感興趣的文章: