基于AngularJS的拖拽文件上传的实例代码

前端之家收集整理的这篇文章主要介绍了基于AngularJS的拖拽文件上传的实例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

随着HTML5的普及,现在大部分浏览器都支持拖拽功能,今天我们要说的就是实现一套拖拽上传功能(Angularjs+nodejs)。

一、首先前端这款插件是基于AngularJS的,下面我们来看主要代码

引入js:

html:

Box" ngf-drag-over-class="dragover" ngf-multiple="true" ngf-allow-dir="true" ngf-accept="'.jpg,.png,.pdf,.html,.zip'">//上传文件的格式
<div class="btn addFiles" ngf-select ng-model="files"&gt;
  <i class="fa fa-plus-circle"&gt;</i>
  Add files...
</div>
File Drag/Drop is not supported for this browser

Image thumbnail:
<div ng-sortable="{ group: 'foobar' }">//调整上传图片顺序
<img ng-repeat="file in files" ngf-src="file">

js:

$scope.$watch('files',function () {
$scope.upload($scope.files);
});//监听files有改变就上传

$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、app.js中设定上传文件缓存地址

2、上传代码

Failed',message: 'no file' }); return; } //var uid = req.session.user._id.toString(); var uid = "stone"; var userDir = path.join(config.upload_dir,uid); ndir.mkdir(userDir,function (err) { if (err) { return next(err); } var filename = Date.now() + '_' + file.name; var savepath = path.resolve(path.join(userDir,filename)); if (savepath.indexOf(path.resolve(userDir)) !== 0) { return res.send({status: 'forbidden'}); } fs.rename(file.path,savepath,function (err) { if (err) { return next(err); } var url = '/upload/' + uid + '/' + encodeURIComponent(filename); res.send({ status: 'success',url: url }); }); }); };

三、调节图片顺序

加入Sortable插件用来拖拽调整上传图片的先后位置

1、引入js:

猜你在找的JavaScript相关文章