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

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><input type="checkbox" value="' + index + '" checked="true" /></span>' +
                    '<span><img src="https://www.jb51.net/img/rightBtn.png" /></span>' +
                    '</div>';
                $('#imgDiv').append(tpl);

readImgFromInput(_input, index);
            };
            var addAnother = function(){
                $('#uploadBtn').before('<input type="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;
                }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdwjxy.html