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

本篇文章主要介绍了基于AngularJS的拖拽上传的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

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

引入js:

html:

  //上传文件的格式   {{file.name}}
 
 You may also import your own translation
memories(TMX)
or
  Add files... 
File Drag/Drop is not supported for this browser
 Image thumbnail: //调整上传后图片顺序

js:

 (function () { 'use strict'; angular.module('todoApp', ['ng-sortable','ngFileUpload']) .controller('UploadController', ['$scope','Upload', function ($scope,Upload) { $scope.showProgress = false; $scope.$watch('files', function () { $scope.upload($scope.files); });//监听files有改变就上传 $scope.upload = function (files) { if (files && files.length) { for (var i = 0; i

二、然后是我们的后台代码：

1、app.js中设定上传文件缓存地址

 var multiparty = require('connect-multiparty'); var config = require('./config').config; app.use(multiparty({ uploadDir: path.join(config.upload_dir) }));

2、上传代码：

 exports.uploadImage = function (req, res, next) { /*if (!req.session || !req.session.user) { res.send({ status: 'forbidden' }); return; }*/ var file = req.files && req.files.file; if (!file) { res.send({ status: '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：

2、html代码：