先废话一小段,大家好,本人首篇处女作,为什么要实现一个上传控件呢,必然是公司需要嘛,
实现整个过程挺揪心的,因为要解决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>
<--这个其实不需要都行
<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);
};
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);
}
});
}
});
//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提交文件
}