AngularJSベースのドラッグアップロード
HTML 5の普及に伴い、現在ではほとんどのブラウザがドラッグ機能をサポートしていますが、今日はドラッグアップロード機能(Angularjs+nodejs)を実現することについてお話しします.
一、まずフロントエンドのこのプラグインはAngularJSに基づいています.次に、主なコードを見てみましょう.
jsの導入:
html:
js:
二、それから私たちのバックグラウンドコードです.
1、app.jsでアップロードファイルキャッシュアドレスを設定する
2、アップロードコード:
三、画像の順序を調整する
Sortableプラグインを追加して、アップロード画像の前後位置をドラッグして調整します.
1、jsを導入する:
2、htmlコード:
最後に、ソースコードのダウンロードアドレスの審査中......
一、まずフロントエンドのこのプラグインは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コード:
Image thumbnail:
<div ng-sortable="{ group: 'foobar' }">//
<img ng-repeat="file in files" ngf-src="file">
</div>
最後に、ソースコードのダウンロードアドレスの審査中......