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

<script src="js/angular.1.3.15.min.js"></script><script src="js/ng-file-upload-shim.min.js"></script><script src="js/ng-file-upload.min.js"></script>

<div class="block__list block__list_words" ng-controller="UploadController">  <div ngf-drop ng-model="files" class="drop-box" ngf-drag-over-class="dragover" ngf-multiple="true" ngf-allow-dir="true" ngf-accept="'.jpg,.png,.pdf,.html,.zip'">//上传文件的格式    <div class="progressbar" ng-show="showProgress">      <div ng-repeat="file in files" class="uploadInfo">        <div class="fileName col-sm-5 col-xs-6">{{file.name}}</div>        <div class="divProgressbar{{$index}} col-sm-5 col-xs-4"></div>        <div class="col-sm-2 col-xs-2">          <i class="fa fa-trash fontIcon" ng-click="delFile($index)"></i>        </div>      </div>    </div>    <div ng-hide="showProgress">      <div class="import import1">You may also import your own translation</div>      <div class="import import2">memories(TMX)</div>      <div class="import import3">or</div>    </div>     <div class="btn addFiles" ngf-select ng-model="files">      <i class="fa fa-plus-circle"></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>

(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)     }    }   };  }])})();

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

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 });  }); });};

<script src="Sortable.min.js"></script><script src="ng-sortable.js"></script>

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