基于AngularJS的拖拽上传

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

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

引入js:

<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>

html:

<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>

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 + ‘/‘ + encodeURIComponent(filename);
      res.send({ status: ‘success‘, url: url });
    });
  });
};

三、调节图片顺序

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

1、引入js：

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

2、html代码：

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

最后，源码下载地址审核中……