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


Posted in Javascript onJuly 15, 2017

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

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

Javascript 相关文章推荐
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
Vue中的字符串模板的使用
May 17 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
微信小程序自定义弹出层效果
May 26 Javascript
Javascript实现时间倒计时效果
Jul 15 #Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 #Javascript
JavaScript实现时间表动态效果
Jul 15 #Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 #Javascript
JavaScript实现三级联动效果
Jul 15 #Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 #Javascript
backbone简介_动力节点Java学院整理
Jul 14 #Javascript
You might like
php创建基本身份认证站点的方法详解
2013/06/08 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
Javascript 类与静态类的实现
2010/04/01 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
Python编写生成验证码的脚本的教程
2015/05/04 Python
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
python实现kNN算法
2017/12/20 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
Python3列表List入门知识附实例
2020/02/09 Python
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
毕业生自我鉴定
2013/11/05 职场文书
创建省级文明单位实施方案
2014/02/27 职场文书
幼儿园保育员岗位职责
2014/04/13 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
后天观后感
2015/06/08 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server
Golang连接并操作MySQL
2022/04/14 MySQL