随着HTML5的普及，现在大部分浏览器都支持拖拽功能，今天我们要说的就是实现一套拖拽上传的功能(Angularjs+nodejs)。
一、首先前端这款插件是基于AngularJS的，下面我们来看主要代码。
引入js:
<script src="https://www.jb51.net/js/angular.1.3.15.min.js"></script> <script src="https://www.jb51.net/js/ng-file-upload-shim.min.js"></script> <script src="https://www.jb51.net/js/ng-file-upload.min.js"></script>
html:
<div ng-controller="UploadController"> <div ngf-drop ng-model="files" ngf-drag-over-class="dragover" ngf-multiple="true" ngf-allow-dir="true" ngf-accept="'.jpg,.png,.pdf,.html,.zip'">//上传文件的格式 <div ng-show="showProgress"> <div ng-repeat="file in files"> <div>{{file.name}}</div> <div></div> <div> <i ng-click="delFile($index)"></i> </div> </div> </div> <div ng-hide="showProgress"> <div>You may also import your own translation</div> <div>memories(TMX)</div> <div>or</div> </div> <div ngf-select ng-model="files"> <i></i> Add files... </div> </div> <div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div> Image thumbnail: <div ng-sortable="{ group: 'foobar' }">//调整上传后图片顺序 <img ng-repeat="file in files" ngf-src="file"> </div> </div>
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 < 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中设定上传文件缓存地址
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 + 'https://www.jb51.net/' + encodeURIComponent(filename); res.send({ status: 'success', url: url }); }); }); };
三、调节图片顺序
加入Sortable插件用来拖拽调整上传图片的先后位置
1、引入js：
<script src="https://www.jb51.net/Sortable.min.js"></script> <script src="https://www.jb51.net/ng-sortable.js"></script>
2、html代码：
<div ng-sortable="{ group: 'foobar' }">//调整上传后图片顺序 <img ng-repeat="file in files" ngf-src="file"> </div>