欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-11-25 11:39:27
随着html5的普及,现在大部分浏览器都支持拖拽功能,今天我们要说的就是实现一套拖拽上传的功能(angularjs+nodejs)。 一、首先前端这款插件是基于ang...

随着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代码:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。