替换上传文件的js插件
This commit is contained in:
季圣华
66
erp_web/js/Huploadify/Huploadify.css
Normal file
66
erp_web/js/Huploadify/Huploadify.css
Normal file
@@ -0,0 +1,66 @@
|
||||
@charset "utf-8";
|
||||
/* CSS Document */
|
||||
.uploadify-button{
|
||||
float: left;
|
||||
display:inline-block;
|
||||
border:1px solid #808080;
|
||||
background-color: #707070;
|
||||
line-height:24px;
|
||||
border-radius:12px;
|
||||
padding:0 18px;
|
||||
font-size:12px;
|
||||
font-weight: 600;
|
||||
font-family: '微软雅黑';
|
||||
color:#FFF;
|
||||
cursor:pointer;
|
||||
text-decoration:none;
|
||||
}
|
||||
.uploadify-button:hover{
|
||||
background-color: #888;
|
||||
}
|
||||
.uploadfile{
|
||||
width:0;
|
||||
}
|
||||
.uploadify-queue .uploadify-queue-item{
|
||||
list-style-type:none;
|
||||
}
|
||||
.uploadbtn,.delfilebtn,.showfilebtn{
|
||||
display:inline-block;
|
||||
border:1px solid #999;
|
||||
line-height:24px;
|
||||
border-radius:4px;
|
||||
padding:0 18px;
|
||||
font-size:12px;
|
||||
color:#666;
|
||||
cursor:pointer;
|
||||
background:url(images/btnbg.png) repeat-x 0 0;
|
||||
text-decoration:none;
|
||||
}
|
||||
.up_filename,.progressnum,.delfilebtn,.uploadbtn,.up_percent{
|
||||
font-size:12px;
|
||||
color:#666;
|
||||
margin-left:10px;
|
||||
}
|
||||
.showfilebtn{
|
||||
font-size:12px;
|
||||
color: blue;
|
||||
margin-left:10px;
|
||||
border: 1px blue solid;
|
||||
}
|
||||
.uploadify-progress{
|
||||
display:inline-block;
|
||||
width:200px;
|
||||
height:10px;
|
||||
background-color:white;
|
||||
border-radius:20px;
|
||||
border:2px groove #666;
|
||||
vertical-align:middle;
|
||||
padding:0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.uploadify-progress-bar{
|
||||
width:0;
|
||||
height:100%;
|
||||
border-radius:20px;
|
||||
background-color: #0099FF;
|
||||
}
|
||||
282
erp_web/js/Huploadify/jquery.Huploadify.js
Normal file
282
erp_web/js/Huploadify/jquery.Huploadify.js
Normal file
@@ -0,0 +1,282 @@
|
||||
(function($){
|
||||
$.fn.Huploadify = function(opts){
|
||||
var itemTemp = '<div id="${fileID}" class="uploadify-queue-item"><div class="uploadify-progress"><div class="uploadify-progress-bar"></div></div><span class="up_filename">${fileName}</span><span class="uploadbtn">上传</span><span class="delfilebtn">删除</span></div>';
|
||||
var defaults = {
|
||||
fileTypeExts:'',//允许上传的文件类型，格式'*.jpg;*.doc'
|
||||
uploader:'',//文件提交的地址
|
||||
auto:false,//是否开启自动上传
|
||||
method:'post',//发送请求的方式，get或post
|
||||
multi:false,//是否允许选择多个文件
|
||||
maxFileNumber:10, //最多能上传的文件数量
|
||||
formData:null,//发送给服务端的参数，格式：{key1:value1,key2:value2}
|
||||
fileObj:'jarFile',//在后端接受文件的参数:文件
|
||||
fileObjName:'fileName',//在后端接受文件的参数:文件名称
|
||||
fileSizeLimit:2048,//允许上传的文件大小，单位KB
|
||||
showUploadedPercent:true,//是否实时显示上传的百分比，如20%
|
||||
showUploadedSize:false,//是否实时显示已上传的文件大小，如1M/2M
|
||||
buttonText:'选择文件',//上传按钮上的文字
|
||||
removeTimeout: 1000,//上传完成后进度条的消失时间
|
||||
itemTemplate:itemTemp,//上传队列显示的模板
|
||||
onUploadStart:null,//上传开始时的动作
|
||||
onUploadSuccess:null,//上传成功的动作
|
||||
onUploadComplete:null,//上传完成的动作
|
||||
onUploadError:null, //上传失败的动作
|
||||
onInit:null,//初始化时的动作
|
||||
onCancel:null//删除掉某个文件后的回调函数，可传入参数file
|
||||
}
|
||||
|
||||
var option = $.extend(defaults,opts);
|
||||
|
||||
//将文件的单位由bytes转换为KB或MB，若第二个参数指定为true，则永远转换为KB
|
||||
var formatFileSize = function(size,byKB){
|
||||
if (size> 1024 * 1024&&!byKB){
|
||||
size = (Math.round(size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
|
||||
}
|
||||
else{
|
||||
size = (Math.round(size * 100 / 1024) / 100).toString() + 'KB';
|
||||
}
|
||||
return size;
|
||||
}
|
||||
//根据文件序号获取文件
|
||||
var getFile = function(index,files){
|
||||
for(var i=0;i<files.length;i++){
|
||||
if(files[i].index == index){
|
||||
return files[i];
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
//将输入的文件类型字符串转化为数组,原格式为*.jpg;*.png
|
||||
var getFileTypes = function(str){
|
||||
var result = [];
|
||||
var arr1 = str.split(";");
|
||||
for(var i=0,len=arr1.length;i<len;i++){
|
||||
result.push(arr1[i].split(".").pop());
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
this.each(function(){
|
||||
var _this = $(this);
|
||||
//先添加上file按钮和上传列表
|
||||
var instanceNumber = $('.uploadify').length+1;
|
||||
var inputStr = '<input id="select_btn_'+instanceNumber+'" class="selectbtn" style="display:none;" type="file" name="fileselect[]"';
|
||||
inputStr += option.multi ? ' multiple' : '';
|
||||
inputStr += ' accept="';
|
||||
inputStr += getFileTypes(option.fileTypeExts).join(",");
|
||||
inputStr += '"/>';
|
||||
inputStr += '<a id="file_upload_'+instanceNumber+'-button" href="javascript:void(0)" class="uploadify-button">';
|
||||
inputStr += option.buttonText;
|
||||
inputStr += '</a>';
|
||||
var uploadFileListStr = '<div id="file_upload_'+instanceNumber+'-queue" class="uploadify-queue"></div>';
|
||||
_this.append(inputStr+uploadFileListStr);
|
||||
|
||||
|
||||
//创建文件对象
|
||||
var fileObj = {
|
||||
fileInput: _this.find('.selectbtn'), //html file控件
|
||||
uploadFileList : _this.find('.uploadify-queue'),
|
||||
url: option.uploader, //ajax地址
|
||||
fileFilter: [], //过滤后的文件数组
|
||||
filter: function(files) { //选择文件组的过滤方法
|
||||
var arr = [];
|
||||
if(this.uploadFileList.find('.uploadify-queue-item:visible').length>=option.maxFileNumber) {
|
||||
alert('只能上传' + option.maxFileNumber + '个文件！');
|
||||
} else {
|
||||
var typeArray = getFileTypes(option.fileTypeExts);
|
||||
if(typeArray.length>0){
|
||||
for(var i=0,len=files.length;i<len;i++){
|
||||
var thisFile = files[i];
|
||||
if(parseInt(formatFileSize(thisFile.size,true))>option.fileSizeLimit){
|
||||
alert('文件'+thisFile.name+'大小超出限制！');
|
||||
continue;
|
||||
}
|
||||
if($.inArray(thisFile.name.split('.').pop(),typeArray)>=0){
|
||||
arr.push(thisFile);
|
||||
}
|
||||
else{
|
||||
alert('文件'+thisFile.name+'类型不允许！');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return arr;
|
||||
},
|
||||
//文件选择后
|
||||
onSelect: function(files){
|
||||
for(var i=0,len=files.length;i<len;i++){
|
||||
var file = files[i];
|
||||
//处理模板中使用的变量
|
||||
var $html = $(option.itemTemplate.replace(/\${fileID}/g,'fileupload_'+instanceNumber+'_'+file.index).replace(/\${fileName}/g,file.name).replace(/\${fileSize}/g,formatFileSize(file.size)).replace(/\${instanceID}/g,_this.attr('id')));
|
||||
//如果是自动上传，去掉上传按钮
|
||||
if(option.auto){
|
||||
$html.find('.uploadbtn').remove();
|
||||
}
|
||||
this.uploadFileList.append($html);
|
||||
|
||||
//判断是否显示已上传文件大小
|
||||
if(option.showUploadedSize){
|
||||
var num = '<span class="progressnum"><span class="uploadedsize">0KB</span>/<span class="totalsize">${fileSize}</span></span>'.replace(/\${fileSize}/g,formatFileSize(file.size));
|
||||
$html.find('.uploadify-progress').after(num);
|
||||
}
|
||||
|
||||
//判断是否显示上传百分比
|
||||
if(option.showUploadedPercent){
|
||||
var percentText = '<span class="up_percent">0%</span>';
|
||||
$html.find('.uploadify-progress').after(percentText);
|
||||
}
|
||||
//判断是否是自动上传
|
||||
if(option.auto){
|
||||
this.funUploadFile(file);
|
||||
}
|
||||
else{
|
||||
//如果配置非自动上传，绑定上传事件
|
||||
$html.find('.uploadbtn').on('click',(function(file){
|
||||
return function(){fileObj.funUploadFile(file);}
|
||||
})(file));
|
||||
}
|
||||
//为删除文件按钮绑定删除文件事件
|
||||
$html.find('.delfilebtn').on('click',(function(file){
|
||||
return function(){fileObj.funDeleteFile(file.index);}
|
||||
})(file));
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
onProgress: function(file, loaded, total) {
|
||||
var eleProgress = _this.find('#fileupload_'+instanceNumber+'_'+file.index+' .uploadify-progress');
|
||||
var percent = (loaded / total * 100).toFixed(2) +'%';
|
||||
if(option.showUploadedSize){
|
||||
eleProgress.nextAll('.progressnum .uploadedsize').text(formatFileSize(loaded));
|
||||
eleProgress.nextAll('.progressnum .totalsize').text(formatFileSize(total));
|
||||
}
|
||||
if(option.showUploadedPercent){
|
||||
eleProgress.nextAll('.up_percent').text(percent);
|
||||
}
|
||||
eleProgress.children('.uploadify-progress-bar').css('width',percent);
|
||||
}, //文件上传进度
|
||||
|
||||
/* 开发参数和内置方法分界线 */
|
||||
|
||||
//获取选择文件，file控件
|
||||
funGetFiles: function(e) {
|
||||
// 获取文件列表对象
|
||||
var files = e.target.files;
|
||||
//继续添加文件
|
||||
files = this.filter(files);
|
||||
for(var i=0,len=files.length;i<len;i++){
|
||||
this.fileFilter.push(files[i]);
|
||||
}
|
||||
this.funDealFiles(files);
|
||||
return this;
|
||||
},
|
||||
|
||||
//选中文件的处理与回调
|
||||
funDealFiles: function(files) {
|
||||
var fileCount = _this.find('.uploadify-queue .uploadify-queue-item').length;//队列中已经有的文件个数
|
||||
for(var i=0,len=files.length;i<len;i++){
|
||||
files[i].index = ++fileCount;
|
||||
files[i].id = files[i].index;
|
||||
}
|
||||
//执行选择回调
|
||||
this.onSelect(files);
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
//删除对应的文件
|
||||
funDeleteFile: function(index) {
|
||||
for (var i = 0,len=this.fileFilter.length; i<len; i++) {
|
||||
var file = this.fileFilter[i];
|
||||
if (file.index == index) {
|
||||
this.fileFilter.splice(i,1);
|
||||
_this.find('#fileupload_'+instanceNumber+'_'+index).fadeOut();
|
||||
option.onCancel&&option.onCancel(file);
|
||||
break;
|
||||
}
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
//文件上传
|
||||
funUploadFile: function(file) {
|
||||
var xhr = false;
|
||||
try{
|
||||
xhr=new XMLHttpRequest();//尝试创建 XMLHttpRequest 对象，除 IE 外的浏览器都支持这个方法。
|
||||
}catch(e){
|
||||
xhr=ActiveXobject("Msxml12.XMLHTTP");//使用较新版本的 IE 创建 IE 兼容的对象（Msxml2.XMLHTTP）。
|
||||
}
|
||||
|
||||
if (xhr.upload) {
|
||||
// 上传中
|
||||
xhr.upload.addEventListener("progress", function(e) {
|
||||
fileObj.onProgress(file, e.loaded, e.total);
|
||||
}, false);
|
||||
|
||||
// 文件上传成功或是失败
|
||||
xhr.onreadystatechange = function(e) {
|
||||
if (xhr.readyState == 4) {
|
||||
if (xhr.status == 200) {
|
||||
//校正进度条和上传比例的误差
|
||||
var thisfile = _this.find('#fileupload_'+instanceNumber+'_'+file.index);
|
||||
thisfile.find('.uploadify-progress-bar').css('width','100%');
|
||||
option.showUploadedSize&&thisfile.find('.uploadedsize').text(thisfile.find('.totalsize').text());
|
||||
option.showUploadedPercent&&thisfile.find('.up_percent').text('100%');
|
||||
|
||||
option.onUploadSuccess&&option.onUploadSuccess(file, xhr.responseText);
|
||||
//在指定的间隔时间后删掉进度条
|
||||
setTimeout(function(){
|
||||
_this.find('#fileupload_'+instanceNumber+'_'+file.index).fadeOut();
|
||||
},option.removeTimeout);
|
||||
} else {
|
||||
option.onUploadError&&option.onUploadError(file, xhr.responseText);
|
||||
}
|
||||
option.onUploadComplete&&option.onUploadComplete(file,xhr.responseText);
|
||||
//清除文件选择框中的已有值
|
||||
fileObj.fileInput.val('');
|
||||
}
|
||||
};
|
||||
|
||||
option.onUploadStart&&option.onUploadStart();
|
||||
// 开始上传
|
||||
xhr.open(option.method, this.url, true);
|
||||
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
|
||||
var fd = new FormData();
|
||||
fd.append(option.fileObj, file);
|
||||
fd.append(option.fileObjName, file.name);
|
||||
if(option.formData){
|
||||
for(key in option.formData){
|
||||
fd.append(key,option.formData[key]);
|
||||
}
|
||||
}
|
||||
|
||||
xhr.send(fd);
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
init: function() {
|
||||
//文件选择控件选择
|
||||
if (this.fileInput.length>0) {
|
||||
this.fileInput.change(function(e) {
|
||||
fileObj.funGetFiles(e);
|
||||
});
|
||||
}
|
||||
|
||||
//点击上传按钮时触发file的click事件
|
||||
_this.find('.uploadify-button').on('click',function(){
|
||||
_this.find('.selectbtn').trigger('click');
|
||||
});
|
||||
|
||||
option.onInit&&option.onInit();
|
||||
}
|
||||
};
|
||||
|
||||
//初始化文件对象
|
||||
fileObj.init();
|
||||
});
|
||||
}
|
||||
|
||||
})(jQuery)
|
||||
@@ -1,130 +0,0 @@
|
||||
.fileUploadContent .box{
|
||||
border: solid thin #DDDDDD;
|
||||
min-height: 200px;
|
||||
min-width: 200px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
.fileUploadContent .fileItem{
|
||||
border: solid thin #DDDDDD;
|
||||
width: 150px;
|
||||
height: 215px;
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
vertical-align:top;
|
||||
}
|
||||
.fileUploadContent .fileItem .imgShow{
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
margin: 5px auto;
|
||||
text-align: center;
|
||||
}
|
||||
.fileUploadContent .fileItem .imgShow i{
|
||||
font-size: 120px;
|
||||
position: relative;
|
||||
top:-30px;
|
||||
z-index: 2;
|
||||
}
|
||||
.fileUploadContent .fileItem .imgShow img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.fileUploadContent .fileItem .imgShow .fileType{
|
||||
color: #FFFFFF;
|
||||
font-size: 20px;;
|
||||
position: relative;
|
||||
top:63px;
|
||||
z-index: 3;
|
||||
left: -18px;
|
||||
}
|
||||
.fileUploadContent .fileItem .progress{
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
.fileUploadContent .fileItem .progress>.progress_inner{
|
||||
background-color: #0099FF;
|
||||
width: 0%;
|
||||
height: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.fileUploadContent .fileItem .progress .error{
|
||||
background-color: red;
|
||||
}
|
||||
.fileUploadContent .fileItem .status{
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
.fileUploadContent .fileItem .status i{
|
||||
display: block;
|
||||
float: left;
|
||||
padding: 2px 5px;
|
||||
color: red;
|
||||
margin-left: 3px;
|
||||
border-radius: 5px;;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.fileUploadContent .fileItem .fileName{
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
-ms-text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
padding: 2px 2px;
|
||||
}
|
||||
.fileUploadContent .uploadBts {
|
||||
text-align: left;
|
||||
height: 40px
|
||||
}
|
||||
.fileUploadContent .uploadBts>div{
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.fileUploadContent .uploadBts>div .selectFileBt{
|
||||
border: none;
|
||||
background-color: #0099FF;
|
||||
color: #FFFFFF;
|
||||
padding: 6px;
|
||||
font-size: 15px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.fileUploadContent .uploadBts>div .selectFileBt:hover{
|
||||
color: #DDDDDD;
|
||||
}
|
||||
.fileUploadContent .uploadBts>div i{
|
||||
font-size: 30px;
|
||||
color: #0099FF;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
.fileUploadContent .subberProgress{
|
||||
padding: 5px;
|
||||
display: none;
|
||||
}
|
||||
.fileUploadContent .subberProgress .progress{
|
||||
border:solid thin #0099FF;
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.fileUploadContent .subberProgress .progress>div{
|
||||
background-color: #0099FF;
|
||||
width: 0%;
|
||||
height: 20px;
|
||||
border-bottom-left-radius: 20px;
|
||||
border-top-left-radius: 20px;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
transition: width 0.5s;
|
||||
-moz-transition: width 0.5s; /* Firefox 4 */
|
||||
-webkit-transition: width 0.5s; /* Safari 和 Chrome */
|
||||
-o-transition: width 0.5s; /* Opera */
|
||||
transition-timing-function: linear;
|
||||
-moz-transition-timing-function: linear;
|
||||
-webkit-transition-timing-function: linear;
|
||||
-o-transition-timing-function: linear;
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
|
||||
@font-face {font-family: "iconfont";
|
||||
src: url('../fonts/iconfont.eot?t=1489192348890'); /* IE9*/
|
||||
src: url('../fonts/iconfont.eot?t=1489192348890#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('../fonts/iconfont.woff?t=1489192348890') format('woff'), /* chrome, firefox */
|
||||
url('../fonts/iconfont.ttf?t=1489192348890') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
url('../fonts/iconfont.svg?t=1489192348890#iconfont') format('svg'); /* iOS 4.1- */
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family:"iconfont" !important;
|
||||
font-size:16px;
|
||||
font-style:normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-shanchu:before { content: "\e636"; }
|
||||
|
||||
.icon-gou:before { content: "\e666"; }
|
||||
|
||||
.icon-wenjian:before { content: "\e634"; }
|
||||
|
||||
.icon-wenjian1:before { content: "\e614"; }
|
||||
|
||||
.icon-qingchu:before { content: "\e60a"; }
|
||||
|
||||
.icon-shangchuan:before { content: "\e6f7"; }
|
||||
|
||||
.icon-cha:before { content: "\e602"; }
|
||||
|
||||
.icon-wenjian2:before { content: "\e615"; }
|
||||
|
||||
@@ -1,97 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>文件上传</title>
|
||||
<link href="css/iconfont.css" rel="stylesheet" type="text/css"/>
|
||||
<link href="css/fileUpload.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="fileUploadContent" class="fileUploadContent">
|
||||
<!--<div class="uploadBts">
|
||||
<div>
|
||||
<div class="selectFileBt">选择文件</div>
|
||||
</div>
|
||||
<div>
|
||||
<i class="iconfont icon-shangchuan"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subberProgress">
|
||||
<div class="progress">
|
||||
<div>30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="fileItem">
|
||||
<div class="imgShow">
|
||||
<div class="fileType">txt</div>
|
||||
<i class="iconfont icon-wenjian"></i>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress_inner error"></div>
|
||||
</div>
|
||||
<div class="status">
|
||||
<i class="iconfont icon-shanchu"></i>
|
||||
</div>
|
||||
<div class="fileName">
|
||||
qwertyuiopasdfghjklzxcvbnm.jpg
|
||||
</div>
|
||||
</div>
|
||||
<div class="fileItem">
|
||||
<div class="imgShow">
|
||||
<div class="fileType">jpg</div>
|
||||
<i class="iconfont icon-wenjian"></i>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress_inner error"></div>
|
||||
</div>
|
||||
<div class="status">
|
||||
<i class="iconfont icon-shanchu"></i>
|
||||
</div>
|
||||
<div class="fileName">
|
||||
qwertyuiopasdfghjklzxcvbnm.jpg
|
||||
</div>
|
||||
</div>
|
||||
<div class="fileItem">
|
||||
<div class="imgShow">
|
||||
<img src="404bg.jpg"/>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress_inner error"></div>
|
||||
</div>
|
||||
<div class="status">
|
||||
<i class="iconfont icon-shanchu"></i>
|
||||
</div>
|
||||
<div class="fileName">
|
||||
qwertyuiopasdfghjklzxcvbnm.jpg
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>-->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
|
||||
<script type="text/javascript" src="js/fileUpload.js"></script>
|
||||
<script type="text/javascript">
|
||||
$("#fileUploadContent").initUpload({
|
||||
"uploadUrl":"#",//上传文件信息地址
|
||||
"progressUrl":"#",//获取进度信息地址，可选，注意需要返回的data格式如下（{bytesRead: 102516060, contentLength: 102516060, items: 1, percent: 100, startTime: 1489223136317, useTime: 2767}）
|
||||
//"showSummerProgress":false,//总进度条，默认限制
|
||||
//"size":350,//文件大小限制，单位kb,默认不限制
|
||||
//"maxFileNumber":3,//文件个数限制，为整数
|
||||
//"filelSavePath":"",//文件上传地址，后台设置的根目录
|
||||
//"beforeUpload":beforeUploadFun,//在上传前执行的函数
|
||||
//"onUpload":onUploadFun，//在上传后执行的函数
|
||||
autoCommit:false,//文件是否自动上传
|
||||
//"fileType":['png','jpg','docx','doc']，//文件类型限制，默认不限制，注意写的是文件后缀
|
||||
})
|
||||
function beforeUploadFun(opt){
|
||||
opt.otherData =[{"name":"你要上传的参数","value":"你要上传的值"}];
|
||||
}
|
||||
function onUploadFun(opt,data){
|
||||
alert(data);
|
||||
uploadTools.uploadError(opt);//显示上传错误
|
||||
}
|
||||
</script>
|
||||
Binary file not shown.
@@ -1,61 +0,0 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>
|
||||
Created by FontForge 20120731 at Sat Mar 11 08:32:28 2017
|
||||
By admin
|
||||
</metadata>
|
||||
<defs>
|
||||
<font id="iconfont" horiz-adv-x="1024" >
|
||||
<font-face
|
||||
font-family="iconfont"
|
||||
font-weight="500"
|
||||
font-stretch="normal"
|
||||
units-per-em="1024"
|
||||
panose-1="2 0 6 3 0 0 0 0 0 0"
|
||||
ascent="896"
|
||||
descent="-128"
|
||||
x-height="792"
|
||||
bbox="0 -212 1024 876"
|
||||
underline-thickness="0"
|
||||
underline-position="0"
|
||||
unicode-range="U+0078-E6F7"
|
||||
/>
|
||||
<missing-glyph
|
||||
/>
|
||||
<glyph glyph-name=".notdef"
|
||||
/>
|
||||
<glyph glyph-name=".notdef"
|
||||
/>
|
||||
<glyph glyph-name=".null" horiz-adv-x="0"
|
||||
/>
|
||||
<glyph glyph-name="nonmarkingreturn" horiz-adv-x="341"
|
||||
/>
|
||||
<glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
|
||||
d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
|
||||
t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
|
||||
t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
|
||||
<glyph glyph-name="shanchu" unicode=""
|
||||
d="M641 596v76h-259v-76h-171v-74h602v74h-172zM239 472l44 -537h458l44 537h-546zM426 37h-70v342h70v-342zM546 37h-69v342h69v-342zM670 37h-72v342h72v-342z" />
|
||||
<glyph glyph-name="gou" unicode=""
|
||||
d="M800 567l-413 -413l-163 163q-18 18 -44 18t-44.5 -18t-18.5 -44t19 -44l195 -196q20 -20 56 -18q36 -2 56 18l445 445q19 19 19 44.5t-18.5 44t-44.5 18.5t-44 -18z" />
|
||||
<glyph glyph-name="wenjian" unicode=""
|
||||
d="M877 646l-29 29l-29 29q-59 60 -90 84t-59 24h-316q-65 0 -111 -46t-46 -112v-275h-118q-16 0 -28 -11.5t-12 -28.5v-236q0 -16 12 -27.5t28 -11.5h118v-118q0 -66 46 -112t111 -46h473q65 0 111.5 46t46.5 112v551q0 29 -24 60t-84 89zM906 -54q0 -33 -23 -56t-56 -23
|
||||
h-473q-32 0 -55 23t-23 56v118h394q16 0 27.5 11.5t11.5 27.5v236q0 17 -11.5 28.5t-27.5 11.5h-394v275q0 33 23 56t55 23h288q10 -2 16 -9t8.5 -20t3 -21.5t0.5 -26.5v-120q0 -16 11.5 -27.5t27.5 -11.5h118q20 0 30 -1t23.5 -4t19.5 -11.5t6 -22.5v-512z" />
|
||||
<glyph glyph-name="wenjian1" unicode=""
|
||||
d="M992 684h-499l-118 119q-10 9 -23 9h-320q-13 0 -22.5 -9.5t-9.5 -22.5v-704q0 -13 9.5 -22.5t22.5 -9.5h352q13 0 22.5 9.5t9.5 22.5t-9.5 22.5t-22.5 9.5h-320v640h275l118 -119q10 -9 23 -9h480v-512h-320q-13 0 -22.5 -9.5t-9.5 -22.5t9.5 -22.5t22.5 -9.5h352
|
||||
q13 0 22.5 9.5t9.5 22.5v576q0 13 -9.5 22.5t-22.5 9.5zM640 172q13 0 22.5 9.5t9.5 22.5t-9 23l-128 128q-10 9 -23 9t-23 -9l-128 -128q-9 -10 -9 -23t9.5 -22.5t22.5 -9.5t23 9l73 74v-435q0 -13 9.5 -22.5t22.5 -9.5t22.5 9.5t9.5 22.5v435l73 -74q10 -9 23 -9z" />
|
||||
<glyph glyph-name="qingchu" unicode=""
|
||||
d="M31 796v0v0zM740 -108q-37 0 -123.5 -30t-120.5 -30q-37 0 -123.5 30t-117.5 30q-18 0 -40 -6t-35.5 -11.5t-35.5 -14.5q-12 -6 -18 -8.5t-15 -5.5t-13 -3q-4 1 -7 3q-4 2 -4.5 8.5t1.5 16t6 24.5l11 32q6 17 12 38q15 42 28 80t24 73t18 56l8 20h726q36 -201 52 -304
|
||||
q2 -14 2 -23q0 -5 -0.5 -8.5t-1 -6.5t-2.5 -5.5t-4 -3.5q-6 -2 -10 -3q-2 -1 -5.5 -0.5t-8 2t-8.5 3t-8 2.5q-7 3 -21 8q-28 12 -47 17q-6 2 -13.5 4t-17.5 4t-21 5q-5 1 -10 1.5t-10 1.5t-9 1l-10 2h-9h-10l-9 1v0zM861 254h-606q-24 0 -42 18t-18 44q25 33 81 121
|
||||
q46 61 100 61h90l31 242l14 18q9 9 32.5 25.5t44 16.5t43.5 -14q6 -4 11 -8t9.5 -8t8 -7t6.5 -7l13 -16l-30 -242h89q25 0 54 -17t50 -48q56 -86 79 -117q0 -28 -18 -45t-42 -17v0z" />
|
||||
<glyph glyph-name="shangchuan" unicode="" horiz-adv-x="1040"
|
||||
d="M375 552q-3 3 -7.5 7t-19.5 12t-31 11t-40 -0.5t-48 -17.5q-21 -14 -35 -33t-19.5 -36.5t-7 -33t-1 -25l0.5 -9.5q-7 -1 -18 -4.5t-40 -19t-51 -36.5t-40 -61t-18 -90q3 -127 118 -167q35 -12 64 -12h266v189h-128l192 190l192 -190h-128v-189h259q3 0 9 0.5t23.5 3.5
|
||||
t34 9t37.5 18.5t37 29.5t29 45t18 62q3 52 -13 94t-37.5 64t-50.5 38t-40.5 19.5t-18.5 5.5v0q1 3 1 9t-1 25t-3.5 37.5t-9 44.5t-16.5 48.5t-27 46.5t-39 42t-54 32t-71 19q-58 6 -106.5 -10.5t-77 -43t-49 -56t-28 -47.5t-7.5 -21z" />
|
||||
<glyph glyph-name="cha" unicode=""
|
||||
d="M511.5 798q-112.5 0 -207.5 -55.5t-150.5 -150.5t-55.5 -207.5t55.5 -208t150.5 -151t207.5 -55.5t208 55.5t151 151t55.5 208t-55.5 207.5t-151 150.5t-208 55.5zM720 215q9 -9 9 -21t-9 -21t-21 -8.5t-21 8.5l-166 168l-168 -166q-8 -9 -20.5 -9t-21 8.5t-8.5 21
|
||||
t9 21.5l168 166l-167 168q-9 9 -9 21t9 21t21 9t21 -9l167 -168l168 166q8 9 20.5 8.5t21 -9t8.5 -20.5t-9 -21l-168 -166z" />
|
||||
<glyph glyph-name="wenjian2" unicode=""
|
||||
d="M924 620v2q0 16 -11 27l-217 217q-11 10 -26 10h-4h-475q-30 0 -51.5 -21.5t-21.5 -51.5v-843q0 -30 21.5 -51.5t51.5 -21.5h660q31 0 52.5 21.5t21.5 51.5v660h-1zM668 785l166 -165h-166v165zM851 -40h-660v843h404v-220q0 -15 10.5 -26t25.5 -11h220v-586v0z" />
|
||||
</font>
|
||||
</defs></svg>
|
||||
|
Before Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
Binary file not shown.
@@ -1,565 +0,0 @@
|
||||
/**
|
||||
* Created by zxm on 2017/3/10.
|
||||
*/
|
||||
$.fn.extend({
|
||||
"initUpload":function(opt) {
|
||||
if (typeof opt != "object") {
|
||||
alert('参数错误!');
|
||||
return;
|
||||
}
|
||||
var uploadId = $(this).attr("id");
|
||||
if(uploadId==null||uploadId==""){
|
||||
alert("要设定一个id!");
|
||||
}
|
||||
$.each(uploadTools.getInitOption(uploadId), function (key, value) {
|
||||
if (opt[key] == null) {
|
||||
opt[key] = value;
|
||||
}
|
||||
});
|
||||
uploadTools.initWithLayout(opt);//初始化布局
|
||||
uploadTools.initWithDrag(opt);//初始化拖拽
|
||||
uploadTools.initWithSelectFile(opt);//初始化选择文件按钮
|
||||
uploadTools.initWithUpload(opt);//初始化上传
|
||||
uploadTools.initWithCleanFile(opt);
|
||||
uploadFileList.initFileList();
|
||||
}
|
||||
});
|
||||
/**
|
||||
* 上传基本工具和操作
|
||||
*/
|
||||
var uploadTools = {
|
||||
/**
|
||||
* 基本配置参数
|
||||
* @param uploadId
|
||||
* @returns {{uploadId: *, url: string, autoCommit: string, canDrag: boolean, fileType: string, size: string, ismultiple: boolean, showSummerProgress: boolean}}
|
||||
*/
|
||||
"getInitOption":function(uploadId){
|
||||
//url test测试需要更改
|
||||
var initOption={
|
||||
"uploadId":uploadId,
|
||||
"uploadUrl":"#",//必须，上传地址
|
||||
"progressUrl":"#",//可选，获取进去信息的url
|
||||
"autoCommit":false,//是否自动上传
|
||||
"canDrag":true,//是否可以拖动
|
||||
"fileType":"*",//文件类型
|
||||
"size":"-1",//文件大小限制,单位kB
|
||||
"ismultiple":true,//是否选择多文件
|
||||
"showSummerProgress":true,//显示总进度条
|
||||
"filelSavePath":"",//文件上传地址，后台设置的根目录
|
||||
"beforeUpload":function(){//在上传前面执行的回调函数
|
||||
},
|
||||
"onUpload":function(){//在上传之后
|
||||
//alert("hellos");
|
||||
}
|
||||
|
||||
};
|
||||
return initOption;
|
||||
},
|
||||
/**
|
||||
* 初始化文件上传
|
||||
* @param opt
|
||||
*/
|
||||
"initWithUpload":function(opt){
|
||||
var uploadId = opt.uploadId;
|
||||
$("#"+uploadId+" .uploadBts .uploadFileBt").on("click",function(){
|
||||
uploadEvent.uploadFileEvent(opt);
|
||||
});
|
||||
$("#"+uploadId+" .uploadBts .uploadFileBt i").css("color","#0099FF");
|
||||
},
|
||||
/**
|
||||
* 初始化清除文件
|
||||
* @param opt
|
||||
*/
|
||||
"initWithCleanFile":function(opt){
|
||||
|
||||
var uploadId = opt.uploadId;
|
||||
$("#"+uploadId+" .uploadBts .cleanFileBt").on("click",function(){
|
||||
uploadEvent.cleanFileEvent(opt);
|
||||
});
|
||||
$("#"+uploadId+" .uploadBts .cleanFileBt i").css("color","#0099FF");
|
||||
|
||||
},
|
||||
/**
|
||||
* 初始化选择文件按钮
|
||||
* @param opt
|
||||
*/
|
||||
"initWithSelectFile":function(opt){
|
||||
var uploadId = opt.uploadId;
|
||||
$("#"+uploadId+" .uploadBts .selectFileBt").on("click",function(){
|
||||
uploadEvent.selectFileEvent(opt);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 返回显示文件类型的模板
|
||||
* @param isImg 是否式图片：true/false
|
||||
* @param fileType 文件类型
|
||||
* @param fileName 文件名字
|
||||
* @param isImgUrl 如果事文件时的文件地址默认为null
|
||||
*/
|
||||
"getShowFileType":function(isImg,fileType,fileName,isImgUrl,fileCodeId){
|
||||
var showTypeStr="<div class='fileType'>"+fileType+"</div> <i class='iconfont icon-wenjian'></i>";//默认显示类型
|
||||
if(isImg){
|
||||
if(isImgUrl!=null&&isImgUrl!="null"&&isImgUrl!=""){//图片显示类型
|
||||
showTypeStr = "<img src='"+isImgUrl+"'/>";
|
||||
}
|
||||
}
|
||||
var modelStr="";
|
||||
modelStr+="<div class='fileItem' fileCodeId='"+fileCodeId+"'>";
|
||||
modelStr+="<div class='imgShow'>";
|
||||
modelStr+=showTypeStr;
|
||||
modelStr+=" </div>";
|
||||
modelStr+=" <div class='progress'>";
|
||||
modelStr+="<div class='progress_inner'></div>";
|
||||
modelStr+="</div>";
|
||||
modelStr+="<div class='status'>";
|
||||
modelStr+="<i class='iconfont icon-shanchu'></i>";
|
||||
modelStr+="</div>";
|
||||
modelStr+=" <div class='fileName'>";
|
||||
modelStr+=fileName;
|
||||
modelStr+="</div>";
|
||||
modelStr+=" </div>";
|
||||
return modelStr;
|
||||
},
|
||||
/**
|
||||
* 初始化布局
|
||||
* @param opt 参数对象
|
||||
*/
|
||||
"initWithLayout":function(opt){
|
||||
var uploadId = opt.uploadId;
|
||||
//选择文件和上传按钮模板
|
||||
var btsStr = "";
|
||||
btsStr += "<div class='uploadBts'>";
|
||||
btsStr += "<div>";
|
||||
btsStr += "<div class='selectFileBt'>选择文件</div>";
|
||||
btsStr += "</div>";
|
||||
btsStr += "<div class='uploadFileBt'>";
|
||||
btsStr += "<i class='iconfont icon-shangchuan'></i>";
|
||||
btsStr += " </div>";
|
||||
btsStr += "<div class='cleanFileBt'>";
|
||||
btsStr += "<i class='iconfont icon-qingchu'></i>";
|
||||
btsStr += " </div>";
|
||||
btsStr += "</div>";
|
||||
$("#"+uploadId).append(btsStr);
|
||||
//添加总进度条
|
||||
if(opt.showSummerProgress){
|
||||
var summerProgressStr = "<div class='subberProgress'>";
|
||||
summerProgressStr += "<div class='progress'>";
|
||||
summerProgressStr += "<div>0%</div>";
|
||||
summerProgressStr += "</div>";
|
||||
summerProgressStr += " </div>";
|
||||
$("#"+uploadId).append(summerProgressStr);
|
||||
}
|
||||
//添加文件显示框
|
||||
var boxStr = "<div class='box'></div>";
|
||||
$("#"+uploadId).append(boxStr);
|
||||
},
|
||||
/**
|
||||
* 初始化拖拽事件
|
||||
* @param opt 参数对象
|
||||
*/
|
||||
"initWithDrag":function(opt){
|
||||
var canDrag = opt.canDrag;
|
||||
var uploadId = opt.uploadId;
|
||||
if(canDrag){
|
||||
$(document).on({
|
||||
dragleave:function(e){//拖离
|
||||
e.preventDefault();
|
||||
},
|
||||
drop:function(e){//拖后放
|
||||
e.preventDefault();
|
||||
},
|
||||
dragenter:function(e){//拖进
|
||||
e.preventDefault();
|
||||
},
|
||||
dragover:function(e){//拖来拖去
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
var box = $("#"+uploadId+" .box").get(0);
|
||||
if(box!=null){
|
||||
//验证图片格式，大小，是否存在
|
||||
box.addEventListener("drop",function(e) {
|
||||
uploadEvent.dragListingEvent(e,opt);
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 删除文件
|
||||
* @param opt
|
||||
*/
|
||||
"initWithDeleteFile":function(opt){
|
||||
var uploadId = opt.uploadId;
|
||||
$("#"+uploadId+" .fileItem .status i").on("click",function(){
|
||||
uploadEvent.deleteFileEvent(opt,this);
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 获取文件名后缀
|
||||
* @param fileName 文件名全名
|
||||
* */
|
||||
"getSuffixNameByFileName":function(fileName){
|
||||
var str = fileName;
|
||||
var pos = str.lastIndexOf(".")+1;
|
||||
var lastname = str.substring(pos,str.length);
|
||||
return lastname;
|
||||
},
|
||||
/**
|
||||
* 判断某个值是否在这个数组内
|
||||
* */
|
||||
"isInArray":function(strFound,arrays){
|
||||
var ishave = false;
|
||||
for(var i=0;i<arrays.length;i++){
|
||||
if(strFound==arrays[i]){
|
||||
ishave = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return ishave;
|
||||
},
|
||||
/**
|
||||
* 文件是否已经存在
|
||||
* */
|
||||
"fileIsExit":function(file){
|
||||
var fileList = uploadFileList.fileList;
|
||||
var ishave = false;
|
||||
for(var i=0;i<fileList.length;i++){
|
||||
//文件名相同，文件大小相同
|
||||
if(fileList[i]!=null&&fileList[i].name ==file.name&&fileList[i].size==file.size){
|
||||
ishave = true;
|
||||
}
|
||||
}
|
||||
return ishave;
|
||||
},
|
||||
/**
|
||||
* 添加文件到列表
|
||||
* */
|
||||
"addFileList":function(fileList,opt){
|
||||
var uploadId = opt.uploadId;
|
||||
var boxJsObj = $("#"+uploadId+" .box").get(0);
|
||||
var fileListArray=uploadFileList.getFileList();
|
||||
var fileNumber = uploadTools.getFileNumber(opt);
|
||||
if(fileNumber+fileList.length>opt.maxFileNumber){
|
||||
alert("最多只能上传"+opt.maxFileNumber+"个文件");
|
||||
return;
|
||||
}
|
||||
var imgtest=/image\/(\w)*/;//图片文件测试
|
||||
var fileTypeArray = opt.fileType;//文件类型集合
|
||||
var fileSizeLimit = opt.size;//文件大小限制
|
||||
for(var i=0;i<fileList.length;i++){
|
||||
//判断文件是否存在
|
||||
if(uploadTools.fileIsExit(fileList[i])){
|
||||
alert("文件（"+fileList[i].name+"）已经存在！");
|
||||
continue;
|
||||
}
|
||||
var fileTypeStr = uploadTools.getSuffixNameByFileName(fileList[i].name);
|
||||
//文件大小显示判断
|
||||
if(fileSizeLimit!=-1&&fileList[i].size>(fileSizeLimit*1000)){
|
||||
alert("文件（"+fileList[i].name+"）超出了大小限制！请控制在"+fileSizeLimit+"KB内");
|
||||
continue;
|
||||
}
|
||||
//文件类型判断
|
||||
if(fileTypeArray=="*"||uploadTools.isInArray(fileTypeStr,fileTypeArray)){
|
||||
var fileTypeUpcaseStr = fileTypeStr.toUpperCase();
|
||||
if(imgtest.test(fileList[i].type)){
|
||||
//var imgUrlStr = window.webkitURL.createObjectURL(fileList[i]);//获取文件路径
|
||||
var imgUrlStr ="";//获取文件路径
|
||||
if (window.createObjectURL != undefined) { // basic
|
||||
imgUrlStr = window.createObjectURL(fileList[i]);
|
||||
} else if (window.URL != undefined) { // mozilla(firefox)
|
||||
imgUrlStr = window.URL.createObjectURL(fileList[i]);
|
||||
} else if (window.webkitURL != undefined) { // webkit or chrome
|
||||
imgUrlStr = window.webkitURL.createObjectURL(fileList[i]);
|
||||
}
|
||||
var fileModel = uploadTools.getShowFileType(true,fileTypeUpcaseStr,fileList[i].name,imgUrlStr,fileListArray.length);
|
||||
$(boxJsObj).append(fileModel);
|
||||
}else{
|
||||
var fileModel = uploadTools.getShowFileType(true,fileTypeUpcaseStr,fileList[i].name,null,fileListArray.length);
|
||||
$(boxJsObj).append(fileModel);
|
||||
}
|
||||
uploadTools.initWithDeleteFile(opt);
|
||||
fileListArray[fileListArray.length] = fileList[i];
|
||||
}else{
|
||||
alert("不支持该格式文件上传:"+fileList[i].name);
|
||||
}
|
||||
}
|
||||
uploadFileList.setFileList(fileListArray);
|
||||
|
||||
},
|
||||
/**
|
||||
* 清除选择文件的input
|
||||
* */
|
||||
"cleanFilInputWithSelectFile":function(opt){
|
||||
var uploadId = opt.uploadId;
|
||||
$("#"+uploadId+"_file").remove();
|
||||
},
|
||||
/**
|
||||
* 根据制定信息显示
|
||||
*/
|
||||
"showUploadProgress":function(opt,bytesRead,percent){
|
||||
|
||||
var uploadId = opt.uploadId;
|
||||
var fileListArray = uploadFileList.getFileList();
|
||||
if(opt.showSummerProgress){
|
||||
var progressBar = $("#"+uploadId+" .subberProgress .progress>div");
|
||||
progressBar.css("width",percent+"%");
|
||||
progressBar.html(percent+"%");
|
||||
}
|
||||
for(var i=0;i<fileListArray.length;i++){
|
||||
if(fileListArray[i]==null){
|
||||
continue;
|
||||
}
|
||||
var testbytesRead =bytesRead -fileListArray[i].size;
|
||||
if(testbytesRead<0){
|
||||
if(percent==100){
|
||||
$("#"+uploadId+" .box .fileItem[fileCodeId='"+i+"'] .progress>div").addClass("error");
|
||||
$("#"+uploadId+" .box .fileItem[fileCodeId='"+i+"'] .progress>div").css("width","100%");
|
||||
$("#"+uploadId+" .box .fileItem[fileCodeId='"+i+"'] .status>i").addClass("iconfont icon-cha");
|
||||
bytesRead = bytesRead-fileListArray[i].size;
|
||||
}else{
|
||||
$("#"+uploadId+" .box .fileItem[fileCodeId='"+i+"'] .progress>div").css("width",(bytesRead/fileListArray[i].size*100)+"%");
|
||||
break;
|
||||
}
|
||||
}else if(testbytesRead>=0){
|
||||
|
||||
$("#"+uploadId+" .box .fileItem[fileCodeId='"+i+"'] .status>i").addClass("iconfont icon-gou");
|
||||
$("#"+uploadId+" .box .fileItem[fileCodeId='"+i+"'] .progress>div").css("width","100%");
|
||||
bytesRead = bytesRead-fileListArray[i].size;
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 上传文件失败集体显示
|
||||
* @param opt
|
||||
*/
|
||||
"uploadError":function(opt){
|
||||
var uploadId = opt.uploadId;
|
||||
$("#"+uploadId+" .box .fileItem .progress>div").addClass("error");
|
||||
$("#"+uploadId+" .box .fileItem .progress>div").css("width","100%");
|
||||
$("#"+uploadId+" .box .fileItem .status>i").addClass("iconfont icon-cha");
|
||||
var progressBar = $("#"+uploadId+" .subberProgress .progress>div");
|
||||
progressBar.css("width","0%");
|
||||
progressBar.html("0%");
|
||||
},
|
||||
/**
|
||||
* 上传文件
|
||||
*/
|
||||
"uploadFile":function(opt){
|
||||
var uploadUrl = opt.uploadUrl;
|
||||
var fileList = uploadFileList.getFileList();
|
||||
|
||||
var formData = new FormData();
|
||||
var fileNumber = uploadTools.getFileNumber(opt);
|
||||
if(fileNumber<=0){
|
||||
alert("没有文件，不支持上传");
|
||||
return;
|
||||
}
|
||||
|
||||
for(var i=0;i<fileList.length;i++){
|
||||
if(fileList[i]!=null){
|
||||
formData.append("fileInfo",fileList[i]);
|
||||
formData.append("fileInfoName",fileList[i].name);
|
||||
console.log(fileList[i].name);
|
||||
}
|
||||
}
|
||||
|
||||
formData.append("filelSavePath",opt.filelSavePath);
|
||||
if(uploadUrl!="#"&&uploadUrl!=""){
|
||||
uploadTools.disableFileUpload(opt);//禁用文件上传
|
||||
uploadTools.disableCleanFile(opt);//禁用清除文件
|
||||
|
||||
$.ajax({
|
||||
type:"post",
|
||||
url:uploadUrl,
|
||||
data:formData,
|
||||
processData : false,
|
||||
contentType : false,
|
||||
/* beforeSend: function(request) {
|
||||
request.setRequestHeader("filePath", file_path);
|
||||
}, */
|
||||
success:function(data){
|
||||
setTimeout(function(){opt.onUpload(opt,data)},500);
|
||||
},
|
||||
error:function(e){
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
}else{
|
||||
uploadTools.disableFileUpload(opt);//禁用文件上传
|
||||
uploadTools.disableCleanFile(opt);//禁用清除文件
|
||||
}
|
||||
|
||||
uploadTools.getFileUploadPregressMsg(opt);
|
||||
|
||||
},
|
||||
/**
|
||||
* 获取文件上传进度信息
|
||||
*/
|
||||
"getFileUploadPregressMsg":function(opt){
|
||||
var uploadId = opt.uploadId;
|
||||
var progressUrl = opt.progressUrl;
|
||||
if(opt.showSummerProgress){
|
||||
$("#"+uploadId+" .subberProgress").css("display","block");
|
||||
}
|
||||
$("#"+uploadId+" .box .fileItem .status>i").removeClass();
|
||||
if(progressUrl!="#"&&progressUrl!="") {
|
||||
var intervalId = setInterval(function(){
|
||||
$.get(progressUrl,{},function(data,status){
|
||||
console.log(data);
|
||||
var percent = data.percent;
|
||||
var bytesRead = data.bytesRead;
|
||||
if(percent >= 100){
|
||||
clearInterval(intervalId);
|
||||
percent = 100;//不能大于100
|
||||
uploadTools.initWithCleanFile(opt);
|
||||
}
|
||||
uploadTools.showUploadProgress(opt, bytesRead, percent);
|
||||
},"json");
|
||||
},500);
|
||||
}else{
|
||||
var percent = 0;
|
||||
var bytesRead = 0;
|
||||
var intervalId = setInterval(function(){
|
||||
percent+=5;
|
||||
bytesRead+=50000;
|
||||
if(percent >= 100){
|
||||
clearInterval(intervalId);
|
||||
percent = 100;//不能大于100
|
||||
uploadTools.initWithCleanFile(opt);
|
||||
}
|
||||
uploadTools.showUploadProgress(opt, bytesRead, percent);
|
||||
},500);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 禁用文件上传
|
||||
*/
|
||||
"disableFileUpload":function(opt){
|
||||
var uploadId = opt.uploadId;
|
||||
$("#"+uploadId+" .uploadBts .uploadFileBt").off();
|
||||
$("#"+uploadId+" .uploadBts .uploadFileBt i").css("color","#DDDDDD");
|
||||
|
||||
},
|
||||
/**
|
||||
* 禁用文件清除
|
||||
*/
|
||||
"disableCleanFile":function(opt){
|
||||
var uploadId = opt.uploadId;
|
||||
$("#"+uploadId+" .uploadBts .cleanFileBt").off();
|
||||
$("#"+uploadId+" .uploadBts .cleanFileBt i").css("color","#DDDDDD");
|
||||
},
|
||||
/**
|
||||
* 获取文件个数
|
||||
* @param opt
|
||||
*/
|
||||
"getFileNumber":function(opt){
|
||||
var number = 0;
|
||||
var fileList = uploadFileList.getFileList();
|
||||
for(var i=0;i<fileList.length;i++){
|
||||
if(fileList[i]!=null){
|
||||
number++;
|
||||
}
|
||||
}
|
||||
return number;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 上传事件操作
|
||||
* */
|
||||
var uploadEvent = {
|
||||
/**
|
||||
* 拖动时操作事件
|
||||
*/
|
||||
"dragListingEvent":function(e,opt){
|
||||
|
||||
e.preventDefault();//取消默认浏览器拖拽效果
|
||||
var fileList = e.dataTransfer.files;//获取文件对象
|
||||
uploadTools.addFileList(fileList,opt);
|
||||
if(opt.autoCommit){
|
||||
uploadEvent.uploadFileEvent(opt);
|
||||
}
|
||||
|
||||
},
|
||||
/**
|
||||
* 删除文件对应的事件
|
||||
* */
|
||||
"deleteFileEvent":function(opt,obj){
|
||||
var fileItem = $(obj).parent().parent();
|
||||
var fileCodeId = fileItem.attr("fileCodeId");
|
||||
var fileListArray = uploadFileList.getFileList();
|
||||
delete fileListArray[fileCodeId];
|
||||
uploadFileList.setFileList(fileListArray);
|
||||
fileItem.remove();
|
||||
|
||||
},
|
||||
/**
|
||||
* 选择文件按钮事件
|
||||
* @param opt
|
||||
*/
|
||||
"selectFileEvent":function(opt){
|
||||
var uploadId = opt.uploadId;
|
||||
var ismultiple = opt.ismultiple;
|
||||
var inputObj=document.createElement('input');
|
||||
inputObj.setAttribute('id',uploadId+'_file');
|
||||
inputObj.setAttribute('type','file');
|
||||
inputObj.setAttribute("style",'visibility:hidden');
|
||||
if(ismultiple){//是否选择多文件
|
||||
inputObj.setAttribute("multiple","multiple");
|
||||
}
|
||||
//inputObj.setAttribute("onchange","uploadEvent.selectFileChangeEvent(this.files,"+opt+")");
|
||||
$(inputObj).on("change",function(){
|
||||
uploadEvent.selectFileChangeEvent(this.files,opt);
|
||||
});
|
||||
document.body.appendChild(inputObj);
|
||||
inputObj.click();
|
||||
},
|
||||
/**
|
||||
* 选择文件后对文件的回调事件
|
||||
* @param opt
|
||||
*/
|
||||
"selectFileChangeEvent":function(files,opt){
|
||||
uploadTools.addFileList(files,opt);
|
||||
uploadTools.cleanFilInputWithSelectFile(opt);
|
||||
|
||||
if(opt.autoCommit){
|
||||
uploadEvent.uploadFileEvent(opt);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 上传文件的事件
|
||||
* */
|
||||
"uploadFileEvent":function(opt){
|
||||
opt.beforeUpload(opt);
|
||||
|
||||
uploadTools.uploadFile(opt);
|
||||
},
|
||||
/**
|
||||
* 清除文件事件
|
||||
*/
|
||||
"cleanFileEvent":function(opt){
|
||||
var uploadId = opt.uploadId;
|
||||
if(opt.showSummerProgress){
|
||||
$("#"+uploadId+" .subberProgress").css("display","none");
|
||||
$("#"+uploadId+" .subberProgress .progress>div").css("width","0%");
|
||||
$("#"+uploadId+" .subberProgress .progress>div").html("0%");
|
||||
}
|
||||
uploadTools.cleanFilInputWithSelectFile(opt);
|
||||
uploadFileList.setFileList([]);
|
||||
$("#"+uploadId+" .box").html("");
|
||||
uploadTools.initWithUpload(opt);//初始化上传
|
||||
}
|
||||
}
|
||||
|
||||
var uploadFileList={
|
||||
"fileList":[],
|
||||
"initFileList":function(){
|
||||
uploadFileList.fileList = new Array();
|
||||
},
|
||||
"getFileList":function(){
|
||||
return uploadFileList.fileList;
|
||||
},
|
||||
"setFileList":function(fileList){
|
||||
uploadFileList.fileList = fileList;
|
||||
}
|
||||
}
|
||||
@@ -1,168 +0,0 @@
|
||||
;(function(window) {
|
||||
|
||||
var svgSprite = '<svg>' +
|
||||
'' +
|
||||
'<symbol id="icon-shanchu" viewBox="0 0 1024 1024">' +
|
||||
'' +
|
||||
'<path d="M640.512 216.44288l0-76.8-258.048 0 0 76.8-171.008 0 0 73.728 601.088 0 0-73.728L640.512 216.44288zM239.104 340.34688l44.032 536.576 457.728 0 44.032-536.576L239.104 340.34688zM426.496 774.52288l-70.656 0 0-342.016 70.656 0L426.496 774.52288zM546.304 774.52288l-69.632 0 0-342.016 69.632 0L546.304 774.52288zM670.208 774.52288l-72.704 0 0-342.016 72.704 0L670.208 774.52288z" ></path>' +
|
||||
'' +
|
||||
'</symbol>' +
|
||||
'' +
|
||||
'<symbol id="icon-gou" viewBox="0 0 1024 1024">' +
|
||||
'' +
|
||||
'<path d="M800.06837 245.25068 387.101897 658.217153 223.927537 495.043816c-24.418133-24.416086-64.004733-24.416086-88.422865 0-24.414039 24.415063-24.414039 64.003709 0 88.419795l195.480136 195.48116c13.023618 13.020548 36.738739 18.950607 56.342216 18.022469 19.475564 0.924045 42.872436-5.006014 55.889915-18.024515l445.271226-445.271226c24.418133-24.418133 24.418133-64.004733 0-88.420819C864.072079 220.832548 824.486502 220.832548 800.06837 245.25068z" ></path>' +
|
||||
'' +
|
||||
'</symbol>' +
|
||||
'' +
|
||||
'<symbol id="icon-wenjian" viewBox="0 0 1024 1024">' +
|
||||
'' +
|
||||
'<path d="M877.095385 165.809231l-29.144615-29.144615L818.806154 107.52C751.458462 38.990769 711.325538 0 669.538462 0L354.461538 0C267.421538 0 196.923077 70.498462 196.923077 157.538462l0 275.692308L78.769231 433.230769c-21.661538 0-39.384615 17.723077-39.384615 39.384615l0 236.307692c0 21.661538 17.723077 39.384615 39.384615 39.384615l118.153846 0 0 118.153846c0 87.04 70.498462 157.538462 157.538462 157.538462l472.615385 0c87.04 0 157.538462-70.498462 157.538462-157.538462L984.615385 315.076923C984.615385 273.329231 945.624615 233.156923 877.095385 165.809231zM905.846154 866.461538c0 43.323077-35.446154 78.769231-78.769231 78.769231L354.461538 945.230769c-43.323077 0-78.769231-35.446154-78.769231-78.769231l0-118.153846 393.846154 0c21.661538 0 39.384615-17.723077 39.384615-39.384615l0-236.307692c0-21.661538-17.723077-39.384615-39.384615-39.384615L275.692308 433.230769 275.692308 157.538462c0-43.323077 35.446154-78.769231 78.769231-78.769231l287.113846 0C669.932308 85.858462 669.538462 120.910769 669.538462 155.569231L669.538462 275.692308c0 21.661538 17.723077 39.384615 39.384615 39.384615l118.153846 0c39.384615 0 78.769231 0 78.769231 39.384615L905.846154 866.461538z" ></path>' +
|
||||
'' +
|
||||
'</symbol>' +
|
||||
'' +
|
||||
'<symbol id="icon-wenjian1" viewBox="0 0 1024 1024">' +
|
||||
'' +
|
||||
'<path d="M992 128 493.248 128 374.656 9.344C368.64 3.392 360.512 0 352 0l-320 0C14.336 0 0 14.336 0 32l0 704C0 753.664 14.336 768 32 768L384 768c17.664 0 32-14.336 32-32S401.664 704 384 704L64 704 64 64l274.752 0 118.656 118.656C463.36 188.608 471.488 192 480 192L960 192l0 512-320 0c-17.664 0-32 14.336-32 32S622.336 768 640 768l352 0c17.664 0 32-14.336 32-32l0-576C1024 142.336 1009.664 128 992 128zM640 640c8.192 0 16.384-3.136 22.656-9.344 12.48-12.48 12.48-32.768 0-45.248l-127.936-128c-12.544-12.48-32.832-12.48-45.248 0l-128 128c-12.48 12.48-12.48 32.768 0 45.248 12.48 12.48 32.768 12.48 45.248 0L480 557.248 480 992C480 1009.664 494.4 1024 512 1024s32-14.336 32-32L544 557.248l73.344 73.344C623.616 636.864 631.808 640 640 640z" ></path>' +
|
||||
'' +
|
||||
'</symbol>' +
|
||||
'' +
|
||||
'<symbol id="icon-qingchu" viewBox="0 0 1024 1024">' +
|
||||
'' +
|
||||
'<path d="M31.030303 15.515152 31.030303 15.515152 31.030303 15.515152ZM739.886545 920.234667q-36.864 0-123.159273 30.068364t-120.242424 30.068364q-37.825939 0-124.121212-30.068364t-117.325576-30.068364q-18.432 0-40.246303 5.833697t-35.405576 11.139879-34.909091 15.018667q-12.598303 5.833697-18.432 8.254061t-15.018667 5.337212-13.094788 2.916848q-3.878788-0.961939-6.795636-2.916848-3.878788-1.954909-4.375273-8.254061t1.458424-16.011636 5.833697-24.234667l10.674424-31.992242q5.833697-17.470061 12.598303-38.787879 14.553212-41.704727 27.648-79.530667t23.769212-72.73503q11.636364-34.909091 18.432-56.257939l7.757576-20.355879 726.295273 0q35.87103 201.69697 51.386182 304.500364 1.954909 13.591273 1.954909 23.272727 0 4.840727-0.496485 8.254061t-0.961939 6.299152-2.420364 5.337212-3.878788 3.382303q-5.833697 1.954909-9.712485 2.916848-1.954909 0.961939-5.337212 0.496485t-8.254061-1.954909-8.719515-2.916848-7.757576-2.420364q-6.795636-2.916848-21.348848-7.757576-28.113455-11.636364-46.545455-17.470061-5.833697-1.954909-13.591273-3.878788t-17.470061-3.878788-21.348848-4.840727q-4.840727-0.961939-9.712485-1.458424t-9.712485-1.458424-9.712485-0.961939l-9.712485-1.954909-9.216 0t-9.216-0.496485-9.712485-0.496485zM861.090909 557.583515l-606.052848 0q-24.234667 0-42.170182-17.935515t-17.935515-43.163152q25.227636-33.947152 81.454545-121.204364 45.583515-61.098667 99.886545-61.098667l90.174061 0 30.068364-242.439758 14.553212-17.470061q8.719515-9.712485 32.488727-26.189576t44.125091-16.477091 43.628606 14.553212q5.833697 3.878788 10.674424 7.757576t9.216 7.757576 8.254061 7.261091 6.795636 7.261091l12.598303 15.515152-30.068364 242.439758 89.212121 0q25.227636 0 54.30303 16.973576t49.462303 48.003879q56.257939 86.295273 79.530667 117.325576 0 27.151515-17.935515 44.125091t-42.170182 16.973576z" ></path>' +
|
||||
'' +
|
||||
'</symbol>' +
|
||||
'' +
|
||||
'<symbol id="icon-shangchuan" viewBox="0 0 1040 1024">' +
|
||||
'' +
|
||||
'<path d="M374.978277 343.568916c0 0-61.903885-62.009286-145.889695-11.366885-75.143421 48.349171-61.854766 136.832412-61.854766 136.832412S0.325411 502.828107 0.325411 680.117952c3.721765 177.001273 181.261297 178.816618 181.261297 178.816618l266.50475 0.285502L448.091458 669.715021 320.298933 669.715021 512.024559 480.224296l191.697997 189.490725L575.907519 669.715021l0 189.504028 258.773671-0.285502c0 0 165.217902 0.14224 188.43672-168.250982 11.041474-184.189999-159.709445-220.490763-159.709445-220.490763s19.425422-272.650727-220.35671-303.734676C437.509449 144.596236 374.978277 343.568916 374.978277 343.568916z" ></path>' +
|
||||
'' +
|
||||
'</symbol>' +
|
||||
'' +
|
||||
'<symbol id="icon-cha" viewBox="0 0 1024 1024">' +
|
||||
'' +
|
||||
'<path d="M511.728 97.943c-228.547 0-413.821 185.274-413.821 413.821s185.274 413.821 413.821 413.821c228.548 0 413.821-185.274 413.821-413.821s-185.274-413.821-413.821-413.821zM720.272 681.129c11.492 11.598 11.402 30.313-0.196 41.8s-30.313 11.401-41.802-0.197l-166.086-167.652-167.985 166.418c-11.598 11.489-30.313 11.4-41.8-0.198s-11.4-30.312 0.197-41.8l167.985-166.418-166.76-168.332c-11.489-11.597-11.4-30.313 0.198-41.8s30.312-11.4 41.8 0.198l166.76 168.332 167.997-166.429c11.6-11.489 30.314-11.4 41.801 0.198 11.49 11.597 11.4 30.313-0.197 41.8l-167.998 166.429 166.087 167.652z" ></path>' +
|
||||
'' +
|
||||
'</symbol>' +
|
||||
'' +
|
||||
'<symbol id="icon-wenjian2" viewBox="0 0 1024 1024">' +
|
||||
'' +
|
||||
'<path d="M923.84 276.288a37.952 37.952 0 0 0-10.752-29.312L696.192 30.4a37.888 37.888 0 0 0-30.272-10.624H191.104c-40.576 0-73.408 32.832-73.408 73.28v842.816c0 40.512 32.832 73.344 73.408 73.344h660.288c40.512 0 73.344-32.832 73.344-73.344V276.288h-0.896z m-255.808-165.696l165.888 165.696h-165.888V110.592z m183.424 825.344H191.104V93.12h403.52v219.904c0 20.224 16.448 36.672 36.608 36.672h220.16v586.24z" fill="" ></path>' +
|
||||
'' +
|
||||
'</symbol>' +
|
||||
'' +
|
||||
'</svg>'
|
||||
var script = function() {
|
||||
var scripts = document.getElementsByTagName('script')
|
||||
return scripts[scripts.length - 1]
|
||||
}()
|
||||
var shouldInjectCss = script.getAttribute("data-injectcss")
|
||||
|
||||
/**
|
||||
* document ready
|
||||
*/
|
||||
var ready = function(fn) {
|
||||
if (document.addEventListener) {
|
||||
if (~["complete", "loaded", "interactive"].indexOf(document.readyState)) {
|
||||
setTimeout(fn, 0)
|
||||
} else {
|
||||
var loadFn = function() {
|
||||
document.removeEventListener("DOMContentLoaded", loadFn, false)
|
||||
fn()
|
||||
}
|
||||
document.addEventListener("DOMContentLoaded", loadFn, false)
|
||||
}
|
||||
} else if (document.attachEvent) {
|
||||
IEContentLoaded(window, fn)
|
||||
}
|
||||
|
||||
function IEContentLoaded(w, fn) {
|
||||
var d = w.document,
|
||||
done = false,
|
||||
// only fire once
|
||||
init = function() {
|
||||
if (!done) {
|
||||
done = true
|
||||
fn()
|
||||
}
|
||||
}
|
||||
// polling for no errors
|
||||
var polling = function() {
|
||||
try {
|
||||
// throws errors until after ondocumentready
|
||||
d.documentElement.doScroll('left')
|
||||
} catch (e) {
|
||||
setTimeout(polling, 50)
|
||||
return
|
||||
}
|
||||
// no errors, fire
|
||||
|
||||
init()
|
||||
};
|
||||
|
||||
polling()
|
||||
// trying to always fire before onload
|
||||
d.onreadystatechange = function() {
|
||||
if (d.readyState == 'complete') {
|
||||
d.onreadystatechange = null
|
||||
init()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Insert el before target
|
||||
*
|
||||
* @param {Element} el
|
||||
* @param {Element} target
|
||||
*/
|
||||
|
||||
var before = function(el, target) {
|
||||
target.parentNode.insertBefore(el, target)
|
||||
}
|
||||
|
||||
/**
|
||||
* Prepend el to target
|
||||
*
|
||||
* @param {Element} el
|
||||
* @param {Element} target
|
||||
*/
|
||||
|
||||
var prepend = function(el, target) {
|
||||
if (target.firstChild) {
|
||||
before(el, target.firstChild)
|
||||
} else {
|
||||
target.appendChild(el)
|
||||
}
|
||||
}
|
||||
|
||||
function appendSvg() {
|
||||
var div, svg
|
||||
|
||||
div = document.createElement('div')
|
||||
div.innerHTML = svgSprite
|
||||
svgSprite = null
|
||||
svg = div.getElementsByTagName('svg')[0]
|
||||
if (svg) {
|
||||
svg.setAttribute('aria-hidden', 'true')
|
||||
svg.style.position = 'absolute'
|
||||
svg.style.width = 0
|
||||
svg.style.height = 0
|
||||
svg.style.overflow = 'hidden'
|
||||
prepend(svg, document.body)
|
||||
}
|
||||
}
|
||||
|
||||
if (shouldInjectCss && !window.__iconfont__svg__cssinject__) {
|
||||
window.__iconfont__svg__cssinject__ = true
|
||||
try {
|
||||
document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>");
|
||||
} catch (e) {
|
||||
console && console.log(e)
|
||||
}
|
||||
}
|
||||
|
||||
ready(appendSvg)
|
||||
|
||||
|
||||
})(window)
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user