IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

咨询电话 : 010-59478634

全部问题

已收录问题

未收录问题

没有找到答案，去提问>>>

该问题已被官方收录

不用原生上传图片方法，angularjs有没有上传图片方法

0

1

file-upload

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

if (typeof FileReader === 'undefined') { //如不支持
            vm.imgTip = "抱歉，你的浏览器不支持 FileReader";
            fileInput.setAttribute('disabled', 'disabled');
        } else { //如支持
            //上传图片监听change事件:   
            $("#image-file").on('change', function () {
                vm.params.img = undefined //点击选择图片重置图片为undefined
                var file = fileInput.files[0];
                console.log(file)
                if (!fileInput.value) { //如果没选择文件
                    $scope.$apply(function () {
                        vm.infor.imgTip = "未选择图片"
                    })
                    return false;
                } else if (fileInput.value && !/image\/\w+/.test(file.type)) { //如果选择了且选择文件格式不对
                    $scope.$apply(function () {
                        vm.infor.imgTip = '不是有效的图片文件!'
                    })
                    return false;
                } else { //如果选择了正确格式文件
                    $scope.$apply(function () {
                        vm.infor.imgTip = "选择成功";
                        vm.infor.isAble = false; //上传按钮恢复颜色可用
                        vm.infor.isShow = false; //进度条恢复
                    })
                    var reader = new FileReader(); //创建一个FileReader接口
                    console.log(reader);
                    //将文件以Data URL形式读入页面
                    reader.readAsDataURL(file); //FileReader的方法，把图片转成base64
                    reader.onprogress = function (e) { //本地上传过程
                        var line = e.loaded / e.total * 100; //本机上传成功100% 
                        if (line === 100) { //如果本地上传成功
                            reader.onload = function (e) { //成功读取
                                preview.src = e.target.result; //显示重新选择的图片
                                $scope.$apply(function () {
                                    vm.infor.chooseImg = true; //操作栏显示
                                    vm.infor.imgName = file.name; //显示图片名
                                    vm.infor.imgSize = file.size; //显示图片大小
                                });
                                if (file.size > 1024 * 1024) {
                                    $scope.$apply(function () {
                                        vm.infor.imgTip = "文件过大，请重新选择";
                                        vm.infor.isAble = true; //上传按钮半透明 不可用
                                    })
                                } else {
                                    vm.up = function () { //点击上传
                                        vm.infor.isShow = true; //进度条生效 
                                        vm.infor.isAble = true; //上传按钮半透明 不可用 
                                        //以下为像后台提交图片数据
                                        var formdata = new FormData();
                                        formdata.append("file", file); // file中包含用户所选择的文件
                                        uploadService.uploadFile(formdata).then(function (res) { //成功
                                            console.log(res.data);
                                            if (res.data.code == 0) { //请求成功
                                                vm.params.img = res.data.data.url;
                                                console.log(vm.params)
                                                vm.infor.imgTip = "上传成功";
                                            }
                                        })
                                    }
                                }
                            };
                        }
                    };
                }
            });
        }

<label for="image-file" class="mybtn btn-blue">选择文件</label>
                            <input type="file" id="image-file">

                        </div>
                        <p id="file-info">{{vm.infor.imgTip}}</p>
                        <div class="col-lg-12">
                            <img id="image-preview" src={{vm.params.img}} alt="配图预览区">

该问题已被官方收录

怎么让图片还没有上传前，是图片破损消失

1

1

file-upload

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

该问题已被官方收录

怎么用angular实现表单验证？

0

1

表单验证

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.

该问题已被官方收录

上传图片。。

0

1

file-upload

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  var uploader = $scope.uploader = new FileUploader({
        url: 'http://localhost//carrots-admin-ajax/a/u/img/task'
    });
    uploader.onSuccessItem = function (fileItem, response, status, headers) {
        console.info('onSuccessItem', fileItem, response, status, headers);
        $scope.img = response.data.url
    };

该问题已被官方收录

图片拖动上传

0

1

file-upload

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div ng-show="uploader.isHTML5"  ng-if="!order">
                            <!-- 3. nv-file-over uploader="link" over-class="className" -->
                            <div class="well my-drop-zone" nv-file-drop uploader="uploader">
                                <label for="upload-file">上传效果图<span style="font-weight: lighter;">(上传图片在5M以内)</span></label>
                                <input type='file' id="upload-file" nv-file-select uploader="uploader">
                            </div>
                        </div>

该问题已被官方收录

用url 拼接传参如何获取

2

1

$http

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var routerApp = angular.module('routerApp')
    .controller('add', function ($http, $scope, $state) {
        $scope.user = $state.params
        console.log($scope.user.type)
      if($scope.user.id){
          $http({
              method: "GET",
              url:"/carrots-admin-ajax/a/article/" + $scope.user.id
          }).then(function(sre){
              console.log(sre)
              $scope.user = sre.data.data.article
               $scope.imgname = sre.data.data.article.img
          })

      }else{
    function uphttp() {
             $http({
                    method: "POST",
                    url: '/carrots-admin-ajax/a/u/article',
                    params: $scope.user
                })
                .then(function successCallback() {
                    $state.go('list.3')
                })
        }

该问题已被官方收录

搜索按钮如何根据获取到的数据类型去搜索？

1

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 params: {
            page: $stateParams.page,
            type: $stateParams.type,
            status: $stateParams.status,
            startAt: $stateParams.startAt,
            endAt: $stateParams.endAt,
        },

该问题已被官方收录

如何禁用新增页面的下拉菜单

1

1

FormData

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="typeone">
                <span>类  型
                    <br>*必填项</span>
                    <!-- <select ng-change="texta()" ng-model="selectedSitea" ng-options="x.type for x in types"></select>
                    <select ng-model = "selecttype" ng-options="x.id for x in ids">
                            <option value="">请选择</option>
                    </select> -->
                    
                <select class="titlename" ng-change="test()" ng-model="typeselect" ng-options="x.id as x.type for x in types" required>
                    <option value="">请选择</option>
                </select>
                <select class="titlena" ng-show="tyshow" ng-change="check()" ng-model="tyselect" ng-options="x.id as x.ty for x in tys" required>
                        <option value="">请选择</option>
                    </select>

            </div>

该问题已被官方收录

如何用angular file upload 插件中加入上传进度条

1

1

file-upload

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html ng-app="my-app">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.js"></script>
    <script src="https://cdn.bootcss.com/angular-file-upload/2.5.0/angular-file-upload.js"></script>
</head>

<body ng-controller="AppController">
    <!--文件上传指令-->
    <input type="file" nv-file-select="" uploader="uploader" />
    <!--图片预览-->
    <img id="img-preview" ng-src="{{iconUrl}}">
</body>
<script>
    var app = angular.module('my-app', [ 'angularFileUpload' ]);
    app.controller('AppController', ['$scope', 'FileUploader', function($scope, FileUploader) {
    var uploader = $scope.uploader = new FileUploader({
      url: 'upload.php' //换成自己的上传地址，本地演示不换也行
    });
    uploader.onAfterAddingFile = function(fileItem) {
      var reader = new FileReader();
      reader.addEventListener("load", function (e) {
        //文件加载完之后，更新angular绑定
        $scope.$apply(function(){
          $scope.iconUrl = e.target.result;
        });
      }, false);
      reader.readAsDataURL(fileItem._file);
    };
}]);
</script>

</html>

该问题已被官方收录

富文本编辑器为空时的表单验证怎么实现？

0

1

表单验证

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

目前用的是wangeditor

去第页

Copyright ©2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1