工作中遇到的业务场景，和同事一起研究过，主要是为了和IE版本兼容，其实一些琐碎的知识点都是在网上收集解决，然后整合。主要内容如下：1 .ie输入类型=file的图片prevIEw应该使用ie的滤镜CSS progid : ximagetransform . Microsoft . alpha image loader chrome/Firefox，并使用File api的filereader2 .来旋转图片。使用filter(filter of ieprogid : maximagetransform . Microsoft . matrix(filter可以合并，也可以用空格分隔)。chrome/firefox使用canvas 3.0上传图片。我在不可见的iframe中使用表单来动态添加输入[type=file]。Chrome/firefox可以用xhr，但是我懒得修改。4.为了上传图片不刷新这个页面，不重复选择文件，我还用一个iframe维护了一个输入列表[type=file]，相当巧妙。

可以参考下代码，主要是一个主html，然后两个内联框架的html，上传的服务端返回的数据为上传成功的文件名，用于删除预览图。复制代码代码如下：//上传回调//结果列表- ['文件1 ','文件2']为上传成功的文件名var uploadCallback=function(resultList){ console。日志(JSON。stringify(result list))；var I=0；for(；我结果列表。长度；i ){ var index=resultList[i].substr('文件')。长度);$(' :复选框[值='索引']').父项()。父项()。移除();} };$(function(){ //保存图片旋转的角度，以便提交给服务端处理var Rotateang={ }；//用于命名后缀的序号var cc=0；//如果是镀铬/ff，需要用文件美国石油学会(American Petroleum Institute)去生成img var genImgTpl=function(input，index){ return ' img src=' http :/webx/public/1。png ' class=' main ' id=' img ' index ' '/'；};var readmgfrom input=function(_ input，index){ var input DOM=_ input[0]；//chrome/ff if(InputDom[' files ']){ var reader=new FileReader()；读者。onload=function(e){ $(' img。main : last ').attr({ src : e . target。结果})；}读者。readasdataurl(InputDom[' files '][0])；}else{ var src=_input[0].价值；var imgDom=$(' # img ' index)；imgDom.attr('src-old '，src)；imgDom.css({ float: '左侧，位置： '相对'飞越： '隐藏，宽度： '195px '，高度： ' 195 px ' })；imgdom。CSS({ ' filter ' : ' progid : maximagettransform .微软。alpha imageloader(enabled=' true '，sizingMethod='scale '，src= ' ' src ' ')' })；} };var showImg=function(_ input){ var index=cc；_输入。add CLaSS(' hide ')；_input.attr('name '，' file ' index)；_input.attr('data-index '，index)；var iframeWin=$('#choose')[0].contentWindowiframewin。addinput(_ input)；var TPL=' div ' genigmggtpl(_ input，index)' span class=' choose ' input type=' checkbox ' value=' index ' ' checked=' true '/span ' ' span class=' opts-right ' img src=' http : img/right BTN。png '/span ' '/div '；$('#imgDiv ').追加(第三方物流)；readmgfromInput(_ Input，index)；};var addAnother=function(){ $(' # uploadBtn ').在('输入类型='文件'名称='文件'/'之前);};//输入[类型=文件]的绑定事件$('#uploadDiv输入')。live('change '，function(){ var path=this。价值；if(！path){ return；} show img($(this))；addAnalYSiS()；});//可以在检验盒时候删除input/$(' # IMgdiv input :复选框').live('change '，function(){//var isChecked=$(this).是(“:已检查”)；//控制台。日志(isChecked)；//});$('#imgDiv span。右转')。live('click '，function(){ //上次旋转的角度定义变量索引=$(这个).兄弟姐妹(“span.choose”).查找('输入')。val()；var oldAng=rotateAng[index]| | 0；定义变量王讷=oldAng 90王讷；$("# img "索引)。旋转(90 );});//表单提交时候根据复选框，删除未选择的输入[type=file] $('#uploadBtn ').单击(function(){ var choosedNum=$(' # imgDiv input : checkbox ').过滤器(' :checked ').长度；if(！choosedNum){ alert('请选择上传文件！');返回false} //选中的序号数组var choosedIndexList=$(' # imgDiv input : checkbox ').过滤器(' :checked ').map(function(){返回这个。价值；}).get()；//两个iframe，一个用于保存选择的输入[类型=文件] //一个用于表单上传var uploadIframe=$(' # upload ')[0].contentWindowvar choose iframe=$(' # choose ')[0].contentWindowvar I=0；for(；我选择了choosedIndexList . lengthi){ var index=choosedIndexList[I]；var inputFile=chooseIframe .$('#uploadDiv输入')。筛选器('[数据-索引='索引']');uploadIframe .$('#uploadForm ').追加(InputFile)；//旋转度数var ang=Rotateang[index]| | 0；if(ang % 360！=0){ var tplInput=' input type=' hide ' name=' ang ' index ' ' value=' ang ' '/'；uploadIframe .$('#uploadForm ').追加(TPLinput)；} } uploadiframe。doupload()；返回false })；});IE7、8、9和铬中测试没有问题