隨著HTML5的普及,現(xiàn)在大部分瀏覽器都支持拖拽功能,今天我們要說的就是實現(xiàn)一套拖拽上傳的功能(Angularjs+nodejs)。
網(wǎng)站建設(shè)哪家好,找成都創(chuàng)新互聯(lián)!專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了準(zhǔn)格爾免費建站歡迎大家使用!
一、首先前端這款插件是基于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' }">//調(diào)整上傳后圖片順序 <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); });//監(jiān)聽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中設(shè)定上傳文件緩存地址
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 }); }); }); };
三、調(diào)節(jié)圖片順序
加入Sortable插件用來拖拽調(diào)整上傳圖片的先后位置
1、引入js:
<script src="Sortable.min.js"></script> <script src="ng-sortable.js"></script>
2、html代碼:
<div ng-sortable="{ group: 'foobar' }">//調(diào)整上傳后圖片順序 <img ng-repeat="file in files" ngf-src="file"> </div>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
新聞名稱:基于AngularJS的拖拽文件上傳的實例代碼
轉(zhuǎn)載注明:http://bm7419.com/article10/geggdo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計、搜索引擎優(yōu)化、網(wǎng)站策劃、企業(yè)網(wǎng)站制作、網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)