Instruction encapsulation
/**
* @license lx.ui.framework v1.0.0
* (c) 2017-2018 lx, Inc.n
* @author lx
*/
(function(window, undefined ) { 'use strict';
//Set the configuration information of lx.ui.upload
var $$runtime = {file:'/api/1.0/upload/add', "swf":"",debug : true};
var lxUiUpload=angular.module("lx.ui.upload",[]);
/**
* Declare the lx-ui-upload directive on lx.ui.framework
*
*/
lxUiUpload.directive('lxUiUpload',function($lx){
var option = {
restrict : 'E',
replace : true,
template : '<div>Upload file</div>',
scope:true,
link : function($scope, $element, $attrs) {
//Upload the data object in the declaration scope
$scope.upload={"id":"","droparea":"","md5":"","length":0,"data":[],"tip":true,"isupload":false,"progress":[],"isprogress":true,"total":0};
//Set the upload file id
$scope.upload.id="#"+$attrs.id;
$scope.upload.droparea="."+$attrs.droparea;
WebUploader.Uploader.register({
"before-send-file" : "beforeSendFile"
}, {
// Time 1: This function is called before all chunks are uploaded
beforeSendFile : function(file) {
var deferred = WebUploader.Deferred();
// 1. Use md5 to calculate the unique mark of the file for resuming the transfer from a breakpoint
uploader.md5File(file).then(function(val) {
$scope.upload.md5= val;
// 2.1.5 Delay resolution
deferred.resolve();
});
return deferred.promise();
},
});
var uploader = WebUploader.create ({
// swf file path
swf : $$runtime.swf,
// File receiving server.
server : $$runtime.file,
// Button to select file. Optional.
// Internally created according to the current operation, it may be an input element or flash.
pick : {
id : $scope.upload.id,
// This id is the id of the file you want to click to upload, just set it yourself</span>
multiple : true
},
// Do not compress the image, if the default is jpeg, the file will be compressed before uploading!
resize : true,
dnd:$scope.upload.droparea,
auto: true,
// upload concurrency
threads : 5,
// Enable multipart upload
chunked : true,
chunkSize : 1 * 1024 * 1024,
duplicate :true
});
// Declare the [uploadBeforeSend] event in WebUploader
$scope.$on("isupl",function(event,node){
if(node===1){
$scope.upload.isupload=true;
}else{
$scope.upload.isupload=false;
}
});
uploader.on("beforeFileQueued", function(file) {
// if(!$scope.upload.isupload){
// alert("Hello: You don't have permission to upload files in this folder!",1);
// return false;
// }
});
// Declare the [uploadBeforeSend] event in WebUploader
uploader.on("fileQueued", function(file, data) {
if($scope.upload.length==0){
//Clear the file progress bar
$scope.upload.progress=[];
$scope.upload.total=0;
$lx.show("","/upload/upload/templates/progress.html","lx_progress_ctrl","lg",$scope);
}
$scope.upload.progress.push({id:file.id,size:file.size,name:file.name,type:file.type,percentage:"0"+'%'});
$scope.upload.length++;
// wenbuploader adds carrying parameters
});
// Declare the [uploadBeforeSend] event in WebUploader
uploader.on("uploadBeforeSend", function(block, data) {
// wenbuploader adds carrying parameters
data.fileMd5 = $scope.upload.md5;
});
// Declare the [uploadProgress] event in WebUploader
uploader.on( 'uploadProgress', function(file, percentage ) {
angular.forEach($scope.upload.progress,function(v){
if(v.id==file.id){
v.percentage=Math.round(percentage * 100) + '%';
}
});
$scope.$apply();
});
// Declare the [Assembly file address] event in WebUploader to realize the logic of obtaining folders and files
function assemblepath(folders,files){
//loop through folders
//console.log(angular.toJson(folders.folders));
angular.forEach(folders.folders,function(v){
angular.forEach(v.files,function(f){
//loop through the uploaded files
angular.forEach(files,function(i,index){
if(f.name==i.name){
f.md5==undefined?"0":f.md5;
f.size==undefined?"0":f.size;
f.type==undefined?"999":f.type;
f.md5=i.md5;
f.size=i.size;
f.type=i.type;
files.splice(index,1);
}
});
});
assemblepath(v,files);
});
}
// Declare the [uploadSuccess] event in WebUploader
uploader.on("uploadSuccess", function(file, response) {
$scope.upload.total++;
$scope.upload.data.push(response[0]);
$scope.upload.length--;
if($scope.upload.length==0){
var isdrop = false;
//Determine drag and drop or select file upload
var file={};
try{
file=angular.fromJson(localStorage.getItem("file"));
//Get the folder and file information
alert(angular.toJson(file))
if(file==""||file==null){
file={};
isdrop=false;
}else{
isdrop=true;
};
}catch(e){
}
//if drag and drop
if(isdrop){
try{
angular.forEach(file.files,function(f){
angular.forEach($scope.upload.data,function(i,index){
if(f.name==i.name){
debugger;
f.md5==undefined?"0":f.md5;
f.size==undefined?"0":f.size;
f.type==undefined?"999":f.type;
f.md5=i.md5;
f.size=i.size;
f.type=i.type;
$scope.upload.data.splice(index,1);
}
});
});
assemblepath(file, $scope.upload.data);
}catch(e){
}
}else{
file.files=[];
file.files=$scope.upload.data;
}
$scope.$emit('upload', file);
$scope.upload.data=[];
$util.set("file","");
file={};
isdrop=false;
}
});
}
};
return option;
});
})();
use:
<lx-ui-upload droparea="lx-ui-panel" id="upload" type="button" class="lx-ui-button orange r" value="上传文件" style="width:80px;"></lx-ui-upload>
Effect:
source code attached