分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

angular-file-upload 回显已上传的文件

发布时间:2023-09-06 01:10责任编辑:胡小海关键词:upload

环境同前篇随笔,lizi在这里po下js代码

演示地址

http://runjs.cn/detail/o4a55204

<script> ???‘use strict‘; ???angular.module(‘app‘, [‘angularFileUpload‘]) ???????????.factory("myService",function(){ ???????????????var service={ ??????????????????files:function(){ ???????????????????????????var list= ??[ ???????????????????????????????????????{ ????????????????????????????????????????fileName:‘git指令.txt‘, ????????????????????????????????????????size:3456, ????????????????????????????????????????type:‘‘, ????????????????????????????????????????url:‘http://oss.aliyun.com/sdfeweMDF‘ ??????????????????????????????????????}, ???????????????????????????????????????{ ???????????????????????????????????????????fileName:‘center.png‘, ???????????????????????????????????????????size:3456, ???????????????????????????????????????????type:‘‘, ???????????????????????????????????????????url:‘http://oss.aliyun.com/sdfeweMDF‘ ???????????????????????????????????????} ??????????????????????????????????]; ??????????????????????????????return list; ??????????????????????????} ???????????????}; ???????????????return service; ???????????}) ???????????.controller(‘AppController‘, [‘$scope‘, ‘FileUploader‘,‘myService‘, ???????????????function($scope, FileUploader,myService) { ???????????????$scope.attachList=[]; ???????????????var uploader = $scope.uploader = new FileUploader({ ???????????????????url: ‘/tianhe/file/uploadFile‘ ???????????????}); ???????????????uploader.onSuccessItem = function(fileItem, response, status, headers) { ???????????????????console.info(‘onSuccessItem‘, fileItem, response, status, headers); ???????????????????console.log("----"); ???????????????????console.info(‘接口返回值response‘,response); ???????????????????console.log("****") ???????????????????console.info(‘uploader实例队列‘, uploader.queue); ???????????????????console.log("****"); ???????????????????if(response.success){ ???????????????????????$scope.attachList.push(response.data); ???????????????????} ???????????????}; ?????????????????$scope.getDetail = function(){ ??????????????????????var fileList = myService.files(); ??????????????????????//$scope.attachList = myService.files; ???????????????????????for(var i= 0,len=fileList.length;i<len;i++){ ???????????????????????????var dummy = new FileUploader.FileItem(uploader, { ???????????????????????????????lastModifiedDate: new Date(), ???????????????????????????????size: fileList[i].size, ???????????????????????????????type: ‘‘, ???????????????????????????????name: ?fileList[i].fileName ???????????????????????????}); ???????????????????????????dummy.progress = 100; ???????????????????????????dummy.isUploaded = true; ???????????????????????????dummy.isSuccess = true; ???????????????????????????uploader.queue.push(dummy); ???????????????????????} ?????????????????} ??????????????????$scope.getDetail(); ???????????}]);</script>

angular-file-upload 回显已上传的文件

原文地址:http://www.cnblogs.com/lizimeme/p/7506959.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved