需求：上传多张图片后，需要手动拖拽排序，传给java后台 file
用angularjs，sortablejs
简单的demo
需要引入的js文件
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script><script src="https://cdn.staticfile.org/angular.js/1.6.6/angular.min.js"></script><script src="sortable/sortable.js"></script>html
<body ng-app="app"> <div ng-controller="sortCtrl"> <ul class="list_img clearfix" ui-sortable="sortableOptions" ng-model="imgshows"> <li ng-repeat="imageSrc in imgshows track by $index" > <!--//显示图片--> <img ng-src="{{imageSrc}}" alt="" /> <!--//删除按钮--> <i ng-click="uploadimg_del($index, imgshows)" style="display: inline-block;position: absolute; top: -10px; right: -2px; cursor: pointer;">×</i> </li> <li class="add_btn"> <label class="bgimg" for="fileImg"></label> <div class="file-box"> <img id="imgShow" onclick="$('#fileImg').click();" src="img/systemicon_nav_img_18.png"/> <input type="file" style="display: none;" name="upload_img" file="upload_img" accept="image/*" class="file-btn" id="fileImg" /> </div> </li> </ul> </div></body>style样式
<style> .list_img{ list-style: none; } .list_img li{ position: relative; float: left; margin-right: 20px; } .list_img li img{ width: 100px; height: 80px; }</style>js内容
<script>var app = angular.module("app", ["ui.sortable"]);app.controller("sortCtrl", function($scope, $timeout) { //拖拽排序 $scope.sortableOptions = { // 数据有变化 update: function(e, ui) { console.log("update"); }, // 完成拖拽动作 stop: function(e, ui) { //do nothing console.log("do nothing"); } } //图片--------- $scope.imgshows = []; $scope.uploadimgs = []; //上传图片合集放的是file对象 //删除单图 $scope.uploadimg_del = function(index, imgs) { $scope.imgshows.splice(index, 1); $scope.uploadimgs.splice(index, 1); console.log($scope.imgshows); console.log($scope.uploadimgs); } //提交给后台图片及其它信息 $scope.addSample = function(sample, loding) { $scope.isSubmit(); var fd = new FormData(); //初始化一个FormData实例 //传值file for (var i = 0; i < $scope.uploadimgs.length; i++) { fd.append('file', $scope.uploadimgs[i]) } if ($scope.sampleForm.$valid && $scope.uploadimgs.length > 0) { $loading.start(loding); //正常提交表单 $http({ method: 'post', data: fd, headers: { 'Content-Type': undefined }, transformRequest: angular.identity, url: baseUrl + 'list_up/' }).then(function(response) { $loading.finish(loding); $scope.confirm(response.data.message); }, function() { $loading.finish(loding); $scope.alert('提交失败请与管理员联系！'); }) } else { // $scope.submitted = true; $scope.alert('提交失败正确填写！'); } }}) //图片读取，工厂函数app.factory('fileReader', ['$q', '$log', function($q, $log) { var onLoad = function(reader, deferred, scope) { return function() { scope.$apply(function() { deferred.resolve(reader.result); }); }; }; var onError = function(reader, deferred, scope) { return function() { scope.$apply(function() { deferred.reject(reader.result); }); }; }; var getReader = function(deferred, scope) { var reader = new FileReader(); //fileReader reader.onload = onLoad(reader, deferred, scope); reader.onerror = onError(reader, deferred, scope); return reader; }; var readAsDataURL = function(file, scope) { var deferred = $q.defer(); var reader = getReader(deferred, scope); //将图片转换为Base64 reader.readAsDataURL(file); return deferred.promise; }; return { readAsDataUrl: readAsDataURL };}]);//文件预览，自定义指令app.directive('file', ['$parse', 'fileReader', function($parse, fileReader) { return { restrict: 'A', link: function(scope, element, attrs, ngModel) { var model = $parse(attrs.file); var modelSetter = model.assign; element.bind('change', function(event) { scope.$apply(function() { modelSetter(scope, element[0].files[0]); }); //附件预览 scope.imgupload = (event.srcElement || event.target).files[0]; getFile(scope.imgupload, scope); //获得预览图地址并且把file对象放入上传合集内 function getFile(imgupload, scope) { if (!imgupload) { return; } fileReader.readAsDataUrl(imgupload, scope) .then(function(result) { scope.imgshows.push(result); console.log(scope.imgshows); var file = document.querySelector('input[type=file]').files[0]; scope.uploadimgs.push(file); //这里是放着传给后台的数据file，下面controller的时候会有 console.log(scope.uploadimgs); angular.element(document.querySelector("#fileImg")).val(''); }); } }); } };}]);</script>例图完美~