基于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 相关文章推荐
理解JavaScript中的事件
Sep 23 Javascript
javascript 面向对象编程基础 多态
Aug 21 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
AngularJS基础知识笔记之表格
May 10 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
vue mint-ui tabbar变组件使用
May 04 Javascript
详解javascript void(0)
Jul 13 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
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持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
深入浅析php json 格式控制
2015/12/24 PHP
yii去掉必填项中星号的方法
2015/12/28 PHP
PHP解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
通过C++学习Python
2015/01/20 Python
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
家居设计专业个人自荐信范文
2013/11/26 职场文书
关于赌博的检讨书
2014/01/24 职场文书
乡镇庆八一活动方案
2014/02/02 职场文书
小学生暑假感言
2014/02/06 职场文书
电工技术比武方案
2014/05/11 职场文书
师德师风的心得体会
2014/09/02 职场文书
面试通知短信
2015/04/20 职场文书
违纪开除通知书
2015/04/25 职场文书
2015年医院保卫科工作总结
2015/07/23 职场文书