先废话一小段，大家好，本人首篇处女作，为什么要实现一个上传控件呢，必然是公司需要嘛，
实现整个过程挺揪心的，因为要解决ie9这个兼容性问题，整体来说我前后用了五天的时间来实现。依赖了jquery，其实也可以使用原生编写，不过想偷偷懒，公司也推荐使用jquery。因为是第一次创作，没啥子经验，由于我个人代码注释的习惯比较良好，注释比较多。还是比较容易懂滴，下面由几个方向讲解上传控件。
1.技术知识点；2.整体思路简单讲解；3.关键点讲解；4.整体代码
先看看整体的效果吧；
正题：【技术知识点】
1. $.inArray 及阿里巴巴字体库 嘿嘿，其实这个也不算什么知识点，因为我用得少所以稍微列了出来；
2. input[type='file']的change事件，及对象自带的fileLIst数组 ie9不支持这个字段；
3. new FormData（）
4. jquery.form提交
5. ie的滤镜
6. ie的ActiveX控件 new ActiveXObject("Scripting.FileSystemObject");
正题：【简单思路讲解】
这个控件是属于对象的形式封装的，我以sz={}；这个对象实例化；由于需要兼容到ie9(ie11在调试模式下选择的ie9反映不出来ie9的兼容性问题)。所以分开两个思路去解决验证上传的问题，>ie9 不存在兼容性的问题，首先写一个方法sz.judgeIeVersions方法验证是否为<=ie9;然后非ie9采用简单的fileList自带对象完成验证；非ie采用ie滤镜，activeX来完成图片验证；这里上传接口也是采用两个方式，后台方面嘛，<=ie9采用jquery.form上传提交 非ie采用formData上传提交；接口返回值为图片的名称，成功则在图片上方显示勾勾 ；
正题：【关键点讲解】
1.控件入口
HTML
<td colspan="3"> <--这个其实不需要都行 <div id="fileUpload" class="fullSize"> id为关键 </div> </td>
JS
sz.upLoadFile({
renderTo :'fileUpload', //配置div的id
fileType:'multi', //配置是否多选
fileSize:'10000', //配置文件大小
fileFormat:['png','jpg'], //配置文件允许的格式
fileWidthHeight :{ //配置图片宽高（只有图片）
width:'700',
height:'800'
}
});
当然啦，还要引入我写的js文件 sz.ajaxfileupload.js 【下面就是文件的内容啦】
1.验证ie的版本号，<=ie9为true >ie9 || 非ie为false；
/* author: YangMingWei time ：2018/5/31
* describe: 判断是否为ie浏览器. <9则为true; >9且不是ie浏览器为fales;
**/
sz.judgeIeVersions = function () {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf ("compatible") > -1 && userAgent.indexOf ("MSIE") > -1; //判断是否IE<11浏览器
var isEdge = userAgent.indexOf ("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
var isIE11 = userAgent.indexOf ('Trident') > -1 && userAgent.indexOf ("rv:11.0") > -1;
if (isIE) {
var reIE = new RegExp ("MSIE (\\d+\\.\\d+);");
reIE.test (userAgent);
var fIEVersion = parseFloat (RegExp["$1"]);
if (fIEVersion == 7) {
return true;
} else if (fIEVersion == 8) {
return true;
} else if (fIEVersion == 9) {
return true;
} else if (fIEVersion == 10) {
return false;
} else {
return true;//IE版本<=7
}
} else if (isEdge) {
return false;//edge
} else if (isIE11) {
return false; //IE11
} else {
return false;//不是ie浏览器
}
};
2. 处理ie的兼容性问题，因为在ie9下的jquery.form不支持动态添加input[type='file']几马上click(); 所以采用的思路类似递归的感觉，页面加载时渲染一个input在dom上，用户触发file的change事件后，再次添加一个input到dom上，使用css覆盖在上一个input上
/* author: YangMingWei time ：2018/6/1
* describe: 回调ie处理函数
**/
sz.handleIEFileChange = function (fileMove, imgWrapper, filePar, defOpt,e) {
var $imgList = $ ('<div class="imgList" id="imgId_' + fileMove + '"></div>');
var $imgShow = $ ('<div class="imgShow"></div>');
var $name = $ ('<div class="name"></div>');
var $close = $ ('<div class="close sale sale-shanchu" data-delId="' + fileMove + '"></div>');
var isOk = $ ('<div class="sale sale-gou fileIsOk" data-delId="' + fileMove + '"></div>');
$close.bind ('click', function () { //删除图片
var id = $ (this).attr ('data-delId');
$ ('#fileId_' + id).remove ();
$ ('#imgId_' + id).remove ();
});
$imgList.append ($imgShow).append ($name).append ($close).append (isOk); //push元素
//获取图片id
var tempImgId = 'Img-' + fileMove;
var img = $ ('<img id="' + tempImgId + '">');
$imgShow.append (img);
imgWrapper.append ($imgList);
var docObj = document.getElementById ('fileId_' + fileMove);
//IE下，使用滤镜
docObj.select ();
window.parent.document.body.focus (); //关键 使用iframe要这样子, 普通使用dacObj.blur();
var imgSrc = document.selection.createRange ().text; //获取到图片路径
debugger;
var fileName = imgSrc.substring (imgSrc.lastIndexOf ('\\') + 1);
$name.html (fileName);//显示名称
$imgList.attr ('title', fileName);//显示title
$imgList.attr ('data-name', fileName);//显示title
$(e.currentTarget).attr('data-file',fileName);
var fso = null; //初始化
try { //尝试获取Active控件
fso = new ActiveXObject ("Scripting.FileSystemObject");
}
catch (exp) { //失败提示教程
alert ("您的浏览器未启用'ActiveX控件',按照如下设置启动功能;" +
"IE浏览器->工具->Internet选项->安全->自定义级别->设置\n" +
"->“对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本”设置为启用，确定即可。" +
"");
}
if (fso) { //如果能获取active控件
var tempFileFso = fso.GetFile (imgSrc); //通过activeX控件获取文件对象
var flag = true; //默认验证通过
//验证格式
if (defOpt.fileFormat) {
var Name = tempFileFso.name;
var fileEnd = Name.substring (Name.indexOf (".") + 1);
if ($.inArray (fileEnd, defOpt.fileFormat) == -1) {
flag = false;
alert ('格式不对');
}
}
//验证大小 (图片size)
if (defOpt.fileSize) {
var size = tempFileFso.size / 1024;
if (size > defOpt.fileSize) {
flag = false;
alert ('图片太大');
}
}
//正则验证图片格式
var test = /\w(\.gif|\.jpeg|\.png|\.jpg|\.bmp)/i;
if (test.test (imgSrc)) {//入口判断是否为图片
//验证图片大小(宽高)
if (defOpt.fileWidthHeight) {
var image = new Image ();
image.src = imgSrc;
image.id = 'tempImg';
imgWrapper.append (image);
var w = $ ('#tempImg').width ();
var h = $ ('#tempImg').height ();
var infoW = defOpt.fileWidthHeight.width;
var infoH = defOpt.fileWidthHeight.height;
if (infoW != w || infoH != h) {
flag = false;
alert ('图片尺寸不对请使用宽:' + infoW + '__高: ' + infoH);
}
$ ('#tempImg').remove ();
}
if (flag) { //如果通过,图片回显
document.getElementById (tempImgId).style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + imgSrc + "')";
} else { //否则删除input /图片
$ ('#fileId_' + fileMove).remove ();
$ ('#imgId_' + fileMove).remove ();
}
} else { //如果是文件
if (flag) {
img.remove ();//删除图片;添加另外的
var forMat = tempFileFso.name;
forMat = forMat.substring (forMat.indexOf (".") + 1);
var fileImg = $ ('<div class="fileType sale sale-Shapecopy"><span class="format">' + forMat + '</span></div>');
$imgShow.append (fileImg);
} else {//否则删除input /图片
$ ('#fileId_' + fileMove).remove ();
$ ('#imgId_' + fileMove).remove ();
}
}
}
fileMove++;
var nextFile2 = $ ('<input type="file" id="fileId_' + fileMove + '" name="upfile"/>');
nextFile2.on ('change', function (e) {
sz.handleIEFileChange (fileMove, imgWrapper, filePar, defOpt,e);
});
filePar.append (nextFile2);
};
3.上传按钮的两个接口 ie9的采用jquery.form的提交方式，非ie采用formData提交方式
/* author: YangMingWei time ：2018/5/31
* describe: 上传处理函数 ie/非ie两个方式,采用两个接口,
* 根据项目更换接口
**/
btn.on ('click', function () {
if (isIE) {
//采用jqueryform提交
if(!btn.hasClass('loading')){
btn.addClass('loading');
submit ({
url : ctx + '/act/test/uploadFiles',
form : '#' + formId,
dataType: 'text',
success : function (data) {
var Data = eval ('(' + data + ')');
if (Data && Data.picUrl.length > 0) {
//成功提示信息
var okArr = Data.picUrl;
for (var B = 0; B < okArr.length; B++) {
var tempB = okArr[B];
imgWrapper.find (".imgList[data-name='" + tempB + "']").find ('.fileIsOk').addClass ('yes');
filePar.find("input[data-file='" + tempB + "']").remove();
}
btn.removeClass('loading');
}
}
});
}else{
alert('正在上传');
}
} else {
//非ie采用formData方式
var formData = new FormData (form[0]);
//循环加入
for (var i = 0; i < fileListArr.length; i++) {
var temp = fileListArr[i];
if (temp != null) {
//append的名称要不一样
formData.append ('files_' + i, temp);
}
}
$.ajax ({
type : "post",
url : ctx + '/act/test/uploadFiles2',//地址
data : formData,
processData: false,
contentType: false,
success : function (data) {
if (data && data.picUrl.length > 0) {
var pic_nameArr = data.picUrl;
//成功提示
for (var A = 0; A < pic_nameArr.length; A++) {
var tempA = pic_nameArr[A];
imgWrapper.find (".imgList[data-name='" + tempA + "']").find ('.fileIsOk').addClass ('yes');
fileListArr.length = 0;
}
}
},
error : function (e) {
console.log (e);
console.log (a);
}
});
}
});
我认为的难点就在这些了咯，，本来我想上传文件上来的，但是不晓得怎么弄地，只能CV在这里咯
正题：【整体代码】 入口代码我就不重复了。上面有
CSS 我使用less来写所以权值比较高
.fullSize {
width: 750px;
border: 1px solid #c3d9e0;
}
.fullSize .par .wrapper {
float: left;
position: relative;
margin: 5px 10px;
width: 50%;
height: 70px;
line-height: 70px;
font-size: 50px;
text-align: center;
color: #aaa;
border: 1px dashed #aaa;
}
.fullSize .par .wrapper:hover {
color: #e43;
}
.fullSize .par .wrapper > input[type='file'] {
width: 100%;
height: 100%;
opacity: 1;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
.fullSize .par .uploadBtn {
float: left;
margin: 5px 10px;
width: 20%;
height: 70px;
text-align: center;
line-height: 70px;
font-size: 17px;
background: #3CBAFF;
color: #fff;
cursor: pointer;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.fullSize .par .uploadBtn:hover {
background: #6CAEF5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.fullSize .imgWrapper {
padding: 0 5px;
}
.fullSize .imgWrapper::after {
display: block;
content: '';
clear: both;
}
.fullSize .imgWrapper .imgList {
float: left;
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
margin: 5px;
}
.fullSize .imgWrapper .imgList .imgShow {
width: 100px;
height: 80px;
}
.fullSize .imgWrapper .imgList .imgShow img {
width: 100px;
height: 80px;
}
.fullSize .imgWrapper .imgList .imgShow .fileType {
font-size: 68px;
text-align: center;
line-height: 80px;
width: 100px;
height: 80px;
color: #F96948;
position: relative;
overflow: hidden;
}
.fullSize .imgWrapper .imgList .imgShow .fileType .format {
position: absolute;
top: 13px;
left: 31px;
display: inline-block;
font-size: 19px;
font-weight: 900;
color: #F96948;
}
.fullSize .imgWrapper .imgList .name {
width: 100px;
height: 20px;
line-height: 20px;
text-indent: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
color: #aaa;
}
.fullSize .imgWrapper .imgList .close {
position: absolute;
top: -100px;
left: 0;
background: rgba(0, 0, 0, 0.1);
-webkit-transition: all .4s;
-moz-transition: all .4s;
-ms-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
width: 100px;
height: 100px;
font-size: 60px;
text-align: center;
line-height: 100px;
color: #e43;
font-weight: bold;
cursor: pointer;
z-index: 100;
}
.fullSize .imgWrapper .imgList:hover .close {
top: 0;
}
.fullSize .imgWrapper .imgList .fileIsOk {
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100px;
height: 80px;
text-align: center;
line-height: 80px;
font-size: 62px;
color: #67C939;
display: none;
}
.fullSize .imgWrapper .imgList .fileIsOk.yes {
display: block;
}
#tempImg {
position: fixed;
top: 0;
left: 0;
z-index: -100;
opacity: 0;
}
JS 整个的JS文件
sz.upLoadFile = function (opts) {
var defOpt = {
renderTo : null,//渲染元素至某元素中,必须的
fileType : null, //上传类型,单选多选,默认单选
fileSize : 1024 * 100, //验证大小
fileFormat : null,//验证格式
fileWidthHeight: null, //验证宽高
};
defOpt = $.extend (defOpt, opts);
///判断是否IE<9浏览器
var isIE = sz.judgeIeVersions ();
var _id = opts.renderTo;//渲染元素至某元素中,必须的
var _type = opts.fileType; //上传类型,单选多选,默认单选
var _verifySize = opts.fileSize; //验证大小
var _verifyFormat = opts.fileFormat; //验证格式
var _verifyWidthHeight = opts.fileWidthHeight; //验证宽高
var fileMove = 0;
var par = $ ('<div class="par clear"></div>');//整体容器
var filePar = $ ('<div class="wrapper" id="filePar">+双击选择文件+</div>');//上传容器
var btn = $ ('<div class="uploadBtn"><i class="sale sale-daochu"></i>上传文件</div>'); //上传按钮
//如果是多选的话添加属性
var fileListArr = []; //非ie用来formData文件容器
var formId = _id + 'form'; //表单的id;
//form表单
var form = $ ('<form action="' + ctx + '\/act/test/uploadFiles" class="par clear" method="post" id="' + formId + '" enctype="multipart/form-data"></form>');
var inpWrapper = $ ('<div style="height:0; overflow: hidden"></div>');
form.append (inpWrapper);
//没啥用
var $ggForm = $ ('<form action="' + ctx + '\/act/test/uploadFiles" method="post" id="ggForm" enctype="multipart/form-data" style="display:none"></form>');
var imgWrapper = $ ('<div class="imgWrapper"></div>');//存回显图片容器
form.append (filePar).append (btn);//按顺序添加元素
var file = $ ('<input type="file" id="fileId_' + fileMove + '" name="upfile"/>');
filePar.append (file);
if (_type === 'multi') {
file.attr ('multiple', 'multiple');
}
if (isIE) {
file.attr ('data-ie', 'yes');
//ie的超级坑
file.on ('change', function (e) {
sz.handleIEFileChange (fileMove, imgWrapper, filePar, defOpt,e);
});
} else {
//非ie的change事件
file.on ('change', function (e) {
var _this = $ (e.currentTarget)[0];
var fileList = _this.files;
for (var A = 0; A < fileList.length; A++) {
var flag = true;
var tempA = fileList[A];
if (_verifyFormat) {
var fileEnd = tempA.name.substring (tempA.name.indexOf (".") + 1);
if ($.inArray (fileEnd, _verifyFormat) == -1) {
flag = false;
alert ('格式不对');
}
}
//验证图片大小
if (_verifySize) {
var fileSize = tempA.size / 1024;
if (fileSize > _verifySize) {
alert ('图片大小不对');
}
}
//验证图片宽高
if (_verifyWidthHeight) {
var _URL = window.URL || window.webkitURL;
var img = new Image ();
img.src = _URL.createObjectURL (tempA);
img.id = 'tempImg';
imgWrapper.append (img);
//因为是属于回调函数,假如不吻合要删除list及删除样式dom
img.onload = function () {
var w = $ ('#tempImg').width ();
var h = $ ('#tempImg').height ();
var infoW = _verifyWidthHeight.width;
var infoH = _verifyWidthHeight.height;
if (w != infoW || h != infoH) {
alert ('宽高不对');
for (var B = 0; B < fileListArr.length; B++) {
var tempB = fileListArr[B];
if (tempB.name == tempA.name) {
fileListArr.splice (B, 1);
imgWrapper.find ('.imgList[data-name="' + tempA.name + '"]').remove ();
}
}
}
img.remove ();
};
}
if (flag) {
fileListArr.push (tempA);
sz.getSetImg (imgWrapper, tempA, fileListArr);
}
}
debugger;
_this.value='';
})
}
// file.click ();
// });
/* author: YangMingWei time ：2018/5/31
* describe: 上传处理函数 ie/非ie两个方式,采用两个接口,
* 根据项目更换接口
**/
btn.on ('click', function () {
if (isIE) {
//采用jqueryform提交
if(!btn.hasClass('loading')){
btn.addClass('loading');
submit ({
url : ctx + '/act/test/uploadFiles',
form : '#' + formId,
dataType: 'text',
success : function (data) {
var Data = eval ('(' + data + ')');
if (Data && Data.picUrl.length > 0) {
//成功提示信息
var okArr = Data.picUrl;
for (var B = 0; B < okArr.length; B++) {
var tempB = okArr[B];
imgWrapper.find (".imgList[data-name='" + tempB + "']").find ('.fileIsOk').addClass ('yes');
filePar.find("input[data-file='" + tempB + "']").remove();
}
btn.removeClass('loading');
}
}
});
}else{
alert('正在上传');
}
} else {
//非ie采用formData方式
var formData = new FormData (form[0]);
//循环加入
for (var i = 0; i < fileListArr.length; i++) {
var temp = fileListArr[i];
if (temp != null) {
//append的名称要不一样
formData.append ('files_' + i, temp);
}
}
$.ajax ({
type : "post",
url : ctx + '/act/test/uploadFiles2',//地址
data : formData,
processData: false,
contentType: false,
success : function (data) {
if (data && data.picUrl.length > 0) {
var pic_nameArr = data.picUrl;
//成功提示
for (var A = 0; A < pic_nameArr.length; A++) {
var tempA = pic_nameArr[A];
imgWrapper.find (".imgList[data-name='" + tempA + "']").find ('.fileIsOk').addClass ('yes');
fileListArr.length = 0;
}
}
},
error : function (e) {
console.log (e);
console.log (a);
}
});
}
});
$ ('#' + _id).append (form).append (imgWrapper).append ($ggForm);
};
/* author: YangMingWei time ：2018/6/1
* describe: 回调ie处理函数
**/
sz.handleIEFileChange = function (fileMove, imgWrapper, filePar, defOpt,e) {
var $imgList = $ ('<div class="imgList" id="imgId_' + fileMove + '"></div>');
var $imgShow = $ ('<div class="imgShow"></div>');
var $name = $ ('<div class="name"></div>');
var $close = $ ('<div class="close sale sale-shanchu" data-delId="' + fileMove + '"></div>');
var isOk = $ ('<div class="sale sale-gou fileIsOk" data-delId="' + fileMove + '"></div>');
$close.bind ('click', function () { //删除图片
var id = $ (this).attr ('data-delId');
$ ('#fileId_' + id).remove ();
$ ('#imgId_' + id).remove ();
});
$imgList.append ($imgShow).append ($name).append ($close).append (isOk); //push元素
//获取图片id
var tempImgId = 'Img-' + fileMove;
var img = $ ('<img id="' + tempImgId + '">');
$imgShow.append (img);
imgWrapper.append ($imgList);
var docObj = document.getElementById ('fileId_' + fileMove);
//IE下，使用滤镜
docObj.select ();
window.parent.document.body.focus (); //关键 使用iframe要这样子, 普通使用dacObj.blur();
var imgSrc = document.selection.createRange ().text; //获取到图片路径
debugger;
var fileName = imgSrc.substring (imgSrc.lastIndexOf ('\\') + 1);
$name.html (fileName);//显示名称
$imgList.attr ('title', fileName);//显示title
$imgList.attr ('data-name', fileName);//显示title
$(e.currentTarget).attr('data-file',fileName);
var fso = null; //初始化
try { //尝试获取Active控件
fso = new ActiveXObject ("Scripting.FileSystemObject");
}
catch (exp) { //失败提示教程
alert ("您的浏览器未启用'ActiveX控件',按照如下设置启动功能;" +
"IE浏览器->工具->Internet选项->安全->自定义级别->设置\n" +
"->“对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本”设置为启用，确定即可。" +
"");
}
if (fso) { //如果能获取active控件
var tempFileFso = fso.GetFile (imgSrc); //通过activeX控件获取文件对象
var flag = true; //默认验证通过
//验证格式
if (defOpt.fileFormat) {
var Name = tempFileFso.name;
var fileEnd = Name.substring (Name.indexOf (".") + 1);
if ($.inArray (fileEnd, defOpt.fileFormat) == -1) {
flag = false;
alert ('格式不对');
}
}
//验证大小 (图片size)
if (defOpt.fileSize) {
var size = tempFileFso.size / 1024;
if (size > defOpt.fileSize) {
flag = false;
alert ('图片太大');
}
}
//正则验证图片格式
var test = /\w(\.gif|\.jpeg|\.png|\.jpg|\.bmp)/i;
if (test.test (imgSrc)) {//入口判断是否为图片
//验证图片大小(宽高)
if (defOpt.fileWidthHeight) {
var image = new Image ();
image.src = imgSrc;
image.id = 'tempImg';
imgWrapper.append (image);
var w = $ ('#tempImg').width ();
var h = $ ('#tempImg').height ();
var infoW = defOpt.fileWidthHeight.width;
var infoH = defOpt.fileWidthHeight.height;
if (infoW != w || infoH != h) {
flag = false;
alert ('图片尺寸不对请使用宽:' + infoW + '__高: ' + infoH);
}
$ ('#tempImg').remove ();
}
if (flag) { //如果通过,图片回显
document.getElementById (tempImgId).style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + imgSrc + "')";
} else { //否则删除input /图片
$ ('#fileId_' + fileMove).remove ();
$ ('#imgId_' + fileMove).remove ();
}
} else { //如果是文件
if (flag) {
img.remove ();//删除图片;添加另外的
var forMat = tempFileFso.name;
forMat = forMat.substring (forMat.indexOf (".") + 1);
var fileImg = $ ('<div class="fileType sale sale-Shapecopy"><span class="format">' + forMat + '</span></div>');
$imgShow.append (fileImg);
} else {//否则删除input /图片
$ ('#fileId_' + fileMove).remove ();
$ ('#imgId_' + fileMove).remove ();
}
}
}
fileMove++;
var nextFile2 = $ ('<input type="file" id="fileId_' + fileMove + '" name="upfile"/>');
nextFile2.on ('change', function (e) {
sz.handleIEFileChange (fileMove, imgWrapper, filePar, defOpt,e);
});
filePar.append (nextFile2);
};
/* author: YangMingWei time ：2018/5/31
* describe: 获取文件并渲染图片,非ie(>9)方法
**/
sz.getSetImg = function (renderTo, file, fileArr) {
var name = file.name;
var time = file.lastModified;
//图片列表的容器.data-name用于删除
var $imgList = $ ('<div class="imgList" data-name="' + name + '" title="' + name + '"></div>');
var $imgShow = $ ('<div class="imgShow"></div>');
//显示名称
var $name = $ ('<div class="name">' + name + '</div>');
//删除按钮
var $close = $ ('<div class="close sale sale-shanchu" data-name="' + name + '"></div>');
//上传成功的提示信息.采用阿里巴巴字体
var isOk = $ ('<div class="sale sale-gou fileIsOk"></div>');
//删除按钮处理函数
$close.bind ('click', function () {
var CloseName = $ (this).attr ('data-name');
for (var i = 0; i < fileArr.length; i++) {
var tempA = fileArr[i];
if (tempA.name == CloseName) {
fileArr.splice (i, 1);
}
}
//删除dom
renderTo.find ('.imgList[data-name="' + CloseName + '"]').remove ();
});
//按顺序添加到容器中
$imgList.append ($imgShow).append ($name).append ($close).append (isOk);
var imgtest = /image\/(\w)*/;//图片文件测试
var img = null;
//如果是图片渲染图片样式
if (imgtest.test (file.type)) {
var imgUrlStr = "";//获取文件路径
if (window.createObjectURL != undefined) { // basic
imgUrlStr = window.createObjectURL (file);
} else if (window.URL != undefined) { // mozilla(firefox)
imgUrlStr = window.URL.createObjectURL (file);
} else if (window.webkitURL != undefined) { // webkit or chrome
imgUrlStr = window.webkitURL.createObjectURL (file);
}
img = $ ('<img src="' + imgUrlStr + '" alt="' + name + '">');
//否则渲染文件+格式名图片样式
} else {
var format = name.slice (name.lastIndexOf ('.') + 1).toUpperCase ();
img = $ ('<div class="fileType sale sale-Shapecopy"><span class="format">' + format + '</span></div>');
}
$imgShow.append (img);
renderTo.append ($imgList);//性能优化,最后添加到dom
};
/* author: YangMingWei time ：2018/5/31
* describe: 判断是否为ie浏览器. <9则为true; >9且不是ie浏览器为fales;
**/
sz.judgeIeVersions = function () {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf ("compatible") > -1 && userAgent.indexOf ("MSIE") > -1; //判断是否IE<11浏览器
var isEdge = userAgent.indexOf ("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
var isIE11 = userAgent.indexOf ('Trident') > -1 && userAgent.indexOf ("rv:11.0") > -1;
if (isIE) {
var reIE = new RegExp ("MSIE (\\d+\\.\\d+);");
reIE.test (userAgent);
var fIEVersion = parseFloat (RegExp["$1"]);
if (fIEVersion == 7) {
return true;
} else if (fIEVersion == 8) {
return true;
} else if (fIEVersion == 9) {
return true;
} else if (fIEVersion == 10) {
return false;
} else {
return true;//IE版本<=7
}
} else if (isEdge) {
return false;//edge
} else if (isIE11) {
return false; //IE11
} else {
return false;//不是ie浏览器
}
};
/* author: YangMingWei time ：2018/5/31
* describe: form提交上传图片, 依赖jquery的jquery.form.js
* 所有方法可重写;
**/
function submit(_options) {
var defaults = {
uploadFile: true,//是否上传文件
submitForm: false,//是否提交表单方式，如果使用此方式则不使用ajax方式
form : '#editForm',
button : '#submit',//触发提交表单事件的按钮
async : true,//异步方式
url : '',
data : '',//默认$(form).serializeArray()
type : 'POST',
dataType : 'json',//返回的数据格式json,xml,text
timeout : 0,//超时
closeMe : true,//操作成功提示后是否关闭窗口
error : function (xhr, opt, exc) {
// alert ('异步请求发生异常，异常信息：' + xhr.statusText);
// // $ ('body').unmask ();
// $ (opts.button).attr ('disabled', false);
},
onSuccess : function (rs) {
debugger;
// window.returnValue = 'true';
// alert (rs.message);
// if (opts.closeMe) top.close ();
},
onFailure : function (rs) {
},
success : function (rs) {
debugger;
}//一般不要覆盖此方法
};
var opts = $.extend ({}, defaults, _options);
//上传文件
var $frm = $ (opts.form);
$frm.ajaxSubmit (opts);//采用jquery.form提交文件
}