浏览器图片选择预览，旋转，批量上传js代码实现
工作中遇到的业务场景是与同事一起研究的，主要是与IE版本兼容。事实上，一些琐碎的知识点在互联网上收集解决方案，然后集成，主要有以下几点：
1的图片预览。IE输入类型=文件是使用IE的过滤器CSS
dximagetransform.microsoft.alphaimageloader ProgID：
Chrome浏览器使用文件API的文件阅读器
2。图片旋转，即是：dximagetransform ProgID。微软。矩阵的滤波器（滤波相结合，用空格分隔）
Chrome浏览器使用画布
三.上传图片，我用所有的形式动态添加输入{类型=文件}在看不见的iframe实现。铬/火狐浏览器可以使用XHR，但我不想改变它
4。为了实现上传图片不刷新本页，并多次选择文件，所以它是一个iframe致力于维护清单输入{类型=文件}，比较我们的。
你可以参考下面的代码，这主要是一个主要的HTML，然后两个iframe HTML。上传的数据来自服务器端，成功上传文件名，用于删除预览。
复制代码代码如下所示：
上传/回调
/ / resultlist -> { 'file1 ''file2}，文件上传成功
无功uploadcallback =功能（resultlist）{
console.log（JSON.stringify（resultlist））；
var I＝0；
为（；；i < resultlist.length；i++）{
VaR指标= resultlist {我}，substr（文件的长度）；
（$：复选框{值+ +索引+ }）。父（父）（删除）（）；
}
}；
$（函数（）{（））
保存图像的旋转角度，以便提交给服务器处理。
无功rotateang = { }；
指定的后缀的数目
var = 0；
/ / /如果Chrome FF，需要使用API生成IMG文件
无功genimgtpl =功能（输入、指数）{
返回' '；
}；
无功readimgfrominput =功能（_input，指数）{
无功inputdom = _input { 0 }；
如果（inputdom { 'files ' }）{
VaR的读者= FileReader（）；
reader.onload =功能（e）{
（'img美元。主营：去年）。Attr（{ SRC：e.target。结果}）；
}
reader.readasdataurl（inputdom { 'files} { 0 }）；
其他{ }
VaR src= _input { 0 }的价值；
imgdom = $（var的# IMG +指数）；
ImgDom.attr（'src-old，SRC）；
ImgDom.css（{
浮：右，
位置：'relative，
溢出：隐藏的，
宽度：'195px，
身高：'195px
}）；
ImgDom.css（{ 'filter：ProgID：DXImageTransform.Microsoft.AlphaImageLoader（启用=真实，sizingmethod =规模，SRC = SRC + }）}））
}
}；
var ShowImg =功能（_input）{
var索引；
_input.addclass（'hide）；
_input.attr（'name'，文件+指数）；
_input.attr（'data-index指数）；
iframewin = $（var的#选择'）{ 0 }。contentwindow；
IframeWin.addInput（_input）；
VaR TPL =+ genimgtpl（_input，指数）+
+
+
'；
$（# imgdiv）。追加（TPL）；
readimgfrominput（_input，指数）；
}；
添加=函数（）{ var（）
$（# uploadbtn）。在（）；
}；
输入/输入文件绑定事件
$（# uploaddiv输入）。活（‘变'，函数（）{（）{
路径= this.value VaR；
如果（！路径）{
返回；
}
ShowImg（$（this））；
AddAnother（）；
}）；
在复选框中，删除输入
（# imgdiv输入：复选框）/美元。活（‘变'，函数（）{
无功 / /系统=美元（这）是（检查）；
/ / console.log（校核）；
}；
$（# imgdiv跨度。右转）。活（听到咔哒声，函数（）{（）{
最后一个时间/旋转角度
VaR指标= $（这），兄弟姐妹（'span。选择）。找到（输入的）瓦迩（）；
无功oldang = rotateang { } | |指数0；
无功newang = oldang + 90；
rotateang { } = newang指数；
$（# IMG +指标），旋转（90）；
}）；
当表单提交给复选框选择时，删除输入{文件}
$（# uploadbtn）。Click（function（）{）
choosednum = $（var的# imgdiv输入：复选框）。滤波器（'：检查'）。长度；
如果（！choosednum）{
警报（请选择要上传的文件！）；
返回false；
}
选定数组的数目
choosedindexlist = $（var的# imgdiv输入：复选框）。滤波器（'：检查'）。图（函数（）{（）{（）
返回this.value；
}）；
两 / / iframe，一个用于输入{类型=文件}保存选择
一个用于表单/上传
uploadiframe = $（var的#上传）{ 0 }。contentwindow；
chooseiframe = $（var的#选择'）{ 0 }。contentwindow；
var i = 0；
为（；；i < choosedindexlist.length；i++）{
VaR指标= choosedindexlist {我}；
VaR inputfile = chooseiframe。$（' # uploaddiv输入）。滤波器（{数据指数= +指数+}）；
uploadiframe。$（' # uploadform）添加（输入）；
旋转度
VaR昂= rotateang { } | |指数0；
如果（% 360）！= 0）{
无功tplinput =；
uploadiframe。$（' # uploadform追加（tplinput））；
}
}
UploadIframe.doUpload（）；
返回false；
}）；
}）；
在IE7中，8, 9没有问题，和铬