html 图片预览 自动旋转,浏览器图片选择预览、旋转、批量上传的JS代码实现

// 上传回调

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

// 两个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);

// 旋转度数

var ang = rotateAng[index] || 0;

if(ang % 360 != 0){

var tplInput = '';

uploadIframe.$('#uploadForm').append(tplInput);

}

}

uploadIframe.doUpload();

return false;

});

});