随着HTML5的普及,现在大部分浏览器都支持拖拽功能,今天我们要说的就是实现一套拖拽上传的功能(Angularjs+nodejs)。
一、首先前端这款插件是基于AngularJS的,下面我们来看主要代码。
引入js:
html:
随着HTML5的普及,现在大部分浏览器都支持拖拽功能,今天我们要说的就是实现一套拖拽上传的功能(Angularjs+nodejs)。
一、首先前端这款插件是基于AngularJS的,下面我们来看主要代码。
引入js:
html:
js:
$scope.upload = function (files) {
if (files && files.length) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
(function(i){
return Upload.upload({
url: '/upload',fields: {'username': $scope.username},file: file
}).progress(function (evt) {
$scope.showProgress = true;
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);//上传百分比
console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
}).success(function (data,status,headers,config) {
$scope.showProgress = true;
var url = data.url;
$scope.files[i].url = url;
console.log('file ' + config.file.name + 'uploaded. Response: ',data);
console.log("size:" + (config.file.size/1000).toFixed(2));//一个文件上传成功
});
})(i)
}
}
};
}])
})();
三、调节图片顺序
1、引入js: