基于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初学者需要了解10个小技巧
Aug 25 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 Javascript
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 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使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
php实现文件上传基本验证
2020/03/04 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
python 实时遍历日志文件
2016/04/12 Python
简单实现python数独游戏
2018/03/30 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
python实现经典排序算法的示例代码
2021/02/07 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
网络信息管理员岗位职责
2014/01/05 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
详解php中流行的rpc框架
2021/05/29 PHP
python实现会员管理系统
2022/03/18 Python
Python实现数据的序列化操作详解
2022/07/07 Python