纯js实现浏览器图片选择预览、旋转、批量上传
工作中遇到的业务场景，和同事一起研究了下，主要是为了兼容IE版本
其实就是一些琐碎的知识点在网上搜集下解决方式，然后集成了下，主要有以下点：
?
1. IE input type=file的图片预览要用IE的filter css
? ??progid:DXImageTransform.Microsoft.AlphaImageLoader
?
? ?chrome/firefox则用File api的file reader
?
2. 图片旋转，IE用progid:DXImageTransform.Microsoft.Matrix的filter（filter可以组合用，用空格隔开）
? ?chrome/firefox用canvas
?
3. 上传图片，我用的都是不可见的iframe 里的form动态的添加input[type=file]去实现。chrome/firefox可以用xhr，但我懒得去修改了
?
4. 其中为了实现上传图片不刷新本页面，又能反复选择文件，所以还用一个iframe专门维护一个input[type=file]的列表，比较偷巧
?
截个图
?
?
可以参考下代码，主要是一个主html，然后两个iframe的html，上传的服务端返回的数据为上传成功的file name，用于删除预览图。
?
// 上传回调// resultList -> ['file1', 'file2'] 为上传成功的file namevar 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去生成imgvar genImgTpl = function(input, index){return '<img src="/webx/public/1.png" id="img' + index + '" />';};var readImgFromInput = function(_input, index){var inputDom = _input[0];// chrome/ffif(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 = '<div>' + genImgTpl(_input, index) + '<span value="' + index + '" checked="true" /></span>' + '<span /></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(){// 上次旋转的角度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 uploadvar 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 = '<input type="hide" name="ang' + index + '" value="' + ang + '" />';uploadIframe.$('#uploadForm').append(tplInput);}}uploadIframe.doUpload();return false;});});?
?
更详细代码请参考附件，希望对需要的童鞋有帮助。