基于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高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
element-ui中按需引入的实现
Dec 25 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/14 PHP
php中chdir()函数用法实例
2014/11/13 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
vue开发简单上传图片功能
2020/06/30 Javascript
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
使用python绘制温度变化雷达图
2019/10/18 Python
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
英语专业学子个人的自我评价
2013/10/02 职场文书
行政内勤岗位职责
2014/04/07 职场文书
我的祖国演讲稿
2014/05/04 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android
python flappy bird小游戏分步实现流程
2022/02/15 Python
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS