【必发88】文本上传控件,Angular四完毕图片上传预览路线不安全的题目一下子就解决了

by admin on 2019年6月8日

新近在用Angular贰,须要有多个上传文件的功力,不过又不想用库,所以直接用原生的input
file 标签。

英特网能够找到的 AngularJS 的文件上传控件有八个:

新近要兑现3个多图片上传的预览功效,英特网有十分多事例多数不太完整,作者就把他们的结缘了下同临时候加了一些功力和分界面,大家只须要调用一条指令就能够落成,但传给后台还索要卓绝的代码,会在前面controller里介绍。不领会封装的是还是不是符合规范,还指望我们一齐座谈下,如若有的时候光封装下Angular4的图片上传和预览分享给我们。

前言

<input type="file" id="newUpload" >

angular-file-upload:

图形上传的预览,大家最首要化解的是获得input的on-change事件,再是读取图片,读取图片大家须求用到FileReader。

前1段时间做项目时,遇到贰个标题正是AngularJS实现图片预览和上传的成效,在Angular四中,通过input:file上传采取图片本地预览的时候,通过window.URL.createObjectURL获取的url赋值给image的src出现谬误:

然后想得到上传的开始和结果,于是先想了个粗笨的方法,先经过id获取到这么些input标签,然后再赢得在那之中上传的剧情

ng-file-upload:

我们先写三个读取图片的劳务,那是互连网的壹个人大佬写的,作者就直接拿了恢复生机

WARNING: sanitizing unsafe URL value

 const uploadsFile = document.getElementById(name).files[0];

那多个13分类似,连js文件的结构都以大同小异的。大旨的js是.min.js,还都有1个-shim.min.js,用来协理上传进度条和上传暂停等高端功效。

/**
 * 图片上传获取返回的url
 */
      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);   
          reader.readAsDataURL(file);  
          return deferred.promise;

        };

        return {
          readAsDataUrl: readAsDataURL 
      };
}])

上边介绍一下消除措施:

结果就报错了。然后看提醒说HTMLElement未有files方法。于是在es陆里找了下有files属性的体系,是HTMLInputElement类型。于是将恐吓它转变来那个项目。

按道理讲shim.js应该是可加可不加,但实地度量-shim.min.js必须带有,不然有js文件加载难点。可是angular-file-upload-shim.min.js这些文件在github上不存在!!!

大家后天有了图片的读取,大家再来解决图片的on-change事件

html代码:

 const uploadsFile=<HTMLInputElement>document.getElementById(name).files[0];

所以用ng-file-upload!用ng-file-upload!用ng-file-upload!

/**
 * 图片上传预览
 */
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;
          console.log(modelSetter)
          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)
                         var file = document.querySelector('input[type=file]').files[0];
                         scope.uploadimgs.push(file)//这里是放着传给后台的数据file,下面controller的时候会有
                        });
               };
          });
        }
      };
    }]) 
<input type="file" (change)="fileChange($event)" >
<img [src]="imgUrl" alt="必发88 1">

结果只怕那些,最终改成了先转移类型再调用属性就能够了。

【必发88】文本上传控件,Angular四完毕图片上传预览路线不安全的题目一下子就解决了。angular-file-upload 是一款轻量级的 AngularJS
文件上传工具,为不帮忙浏览器的 FileAPI polyfill 设计,使用 HTML5直接开始展览文件上传。

【必发88】文本上传控件,Angular四完毕图片上传预览路线不安全的题目一下子就解决了。此地正是提供上传图片预览的体裁,还会有预览图删除的机能

个中,change方法会在每回选用图片后调用,image的src必须透过品质绑定的花样,使用插值表明式同样会出错

  const uploadsFile = <HTMLInputElement>document.getElementById(name);
  const file = uploadsFile.files[0];

 特性

app .directive('uploadimg', function () { 
      return {
        restrict: 'E', 
        scope: {
          uploadimgs: "="
        },
        templateUrl: './js/directives/uploadimg/uploadimg.html',      
        link: function(scope, element, attrs) {
            scope.imgshows = []//预览图片合集放的是src    
            scope.uploadimg_del = function(index,imgs) {  
                scope.imgshows.splice(index,1);
                scope.uploadimgs.splice(index,1);
      }
     }
 }
}) 


<style type="text/css">
.fileupload {
  width: 100px;
  height: 100px;
  border: 1px dotted #ccc;
  display: inline-block;
}
.fileupload-icon {
  font-size:32px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
</style>
<div>
  <div class="fileupload pos-rlt" ng-repeat="imageSrc in imgshows">
    <img ng-src="{{imageSrc}}" style="max-width:200px;max-height:300px;margin:0 auto; display:block;" class="pos-rlt" width=100%; height=100%;/>
    <i class="icon ion-close-circled" style="position: absolute; top:5px; right: 5px" ng-click="uploadimg_del($index, imgshows)"></i>
  </div>
  <div class="fileupload pos-rlt clear" >
    <i class="icon ion-plus-round fileupload-icon"></i>
    <input type="file" style="display:inline-block; width: 100%; height: 100%; opacity:0" name="upload_img" file="upload_img" placeholder="选择图片" accept="image/png,image/gif,image/jpeg,image/jpg"  >
  </div>
</div>
</label>

ts代码

末尾开采这种措施临近有一点点愚蠢,于是换了三个格局,用angular二里的$event来取得输入内容,里面也包括精选上传的文本。

帮助上传进程,在上传的时候,能够收回大概暂停,援救文件拖拽(HTML5),目录拖拽(weikit),CO猎豹CS六S,
PUT(html5)/POST 方法

最后的调用也很轻松
大家只必要在三个地方加代码三个是在分界面,贰个是在Controller里

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser' 
@Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit { 
 imgUrl;
 constructor(
 private sanitizer: DomSanitizer
 ){} 
 ngOnInit() { } 
 fileChange(event){
 let file = event.target.files[0];
 let imgUrl = window.URL.createObjectURL(file);
 let sanitizerUrl = this.sanitizer.bypassSecurityTrustUrl(imgUrl); 
 this.imgUrl = sanitizerUrl;
 }
}
 <input type="file" id="newUpload" (change)="getUpload(newUpload, $event)" >

支撑接纳 Flash polyfill FileAPI  跨浏览器上传 (HTML5 和 non-HTML五)
。允许客户端在上传此前验证或许涂改文件。

<uploadimg uploadimgs="uploadimgs"></uploadimg>

第三,引进DomSanitizer,然后在构造器里面注入,最注重的正是把window.URL.createObjectURL转变的imgUrl通过santizer的bypassSecurityTrustUrl方法,将它调换到安全路线。

选拔的文书在event.target.files里

当文件的开始和结果类型应用 $upload.http()时,协助直接上传播 CouchDB,imgur
等等。扶助 Angular http POST/PUT 请求的快慢事件

这一个是在Controller里的,那是用来传给后台的数目集合,大家须要传给后台的是file对象

终极将转移的安全的url赋值给imgUrl,此时就从未难点了~

private getUpload(obj, e) {
  if (e.target.files[0]) {
   const file = e.target.files[0];
   obj.file = file;
  }
 }

轻量级,使用正规的 $http 来上传(帮助非 HTML五 浏览器),所以提供具备Angular $http 成效

$scope.uploadimgs = []//上传图片合集放的是file对象

总结

随即就能够把它放到formdata里了

例子

怎么着传给后台呢,间接附上代码,其实轻松

上述便是那篇文章的全部内容了,希望本文的内容对大家的就学或许办事富有一定的参照学习价值,若是有疑问我们能够留言调换,感谢大家对台本之家的支撑。

 const formData = new FormData();
  formData.append('file', this.upload.file);
<!DOCTYPE html>
<html ng-app="app">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>文件上传</title>
 <meta charset="utf-8"/>
 <script src="JS/angular.min.js"></script>
 <script src="JS/ng-file-upload.min.js"></script>
 <script src="JS/ng-file-upload-shim.min.js"></script>
 <script>
  var app = angular.module('app', ['ngFileUpload']);
  app.controller('FileController', function ($scope, Upload) {
   $scope.uploadImg = '';
   //提交
   $scope.submit = function () {
    $scope.upload($scope.file);
   };
   $scope.upload = function (file) {
    $scope.fileInfo = file;
    Upload.upload({
     //服务端接收
     url: 'Ashx/UploadFile.ashx',
     //上传的同时带的参数
     data: {'username': $scope.username},
     //上传的文件
     file: file
    }).progress(function (evt) {
     //进度条
     var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
     console.log('progess:' + progressPercentage + '%' + evt.config.file.name);
    }).success(function (data, status, headers, config) {
     //上传成功
     console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
     $scope.uploadImg = data;
    }).error(function (data, status, headers, config) {
     //上传失败
     console.log('error status: ' + status);
    });
   };
  });
 </script>
</head>

<body>
 <form ng-controller="FileController">
  <img src="{{uploadImg}}"/>
  当前上传用户:<input type="text" placeholder="请输入您的名称" name="name" ng-model="username"/>
  <div class="button" ngf-select ng-model="file" name="file" ngf-pattern="'image/*" accept="image/*" ngf-max-size="20MB" ngf-min-height="100">Select</div>
  <button type="submit" ng-click="submit()">submit</button>
  {{fileInfo.name}}<br/>
  {{fileInfo.size}}
 </form>
</body>

</html>
$scope.save = function() {     
    var Fromdata = {
      'name': $scope.form.name,
      'desc': $scope.form.descr,
      'price': $scope.form.price,
      'status': $scope.form.status?1:0,

    }
    var uploadData = createFromData(Fromdata)
    for(var i = 0; i < $scope.uploadimgs.length; i++) {
      uploadData.append('upload_imgs', $scope.uploadimgs[i])
    }

     $http({
     method:'POST',
     url:"后台地址",
     data: fd,
     headers: {'Content-Type':undefined},
     transformRequest: angular.identity
     })
     .success( function(response){
     //上传成功的操作

     });

   }  

//构造FormData
//@param 是一个对象
function createFromData(Fromdata) {
   var fd = new FormData();
   for(key in Fromdata) {
     fd.append(key,Fromdata[key]); 
   }
   return fd
}

你或然感兴趣的作品:

  • angularjs客户端达成裁减图片文件并上传实例
  • 由此AngularJS达成图片上传及缩略图显示示例
  • 必发88,Angular下H5上传图片的主意(可多张上传)
  • AngularJs上传前预览图片的实例代码
  • angularjs实现多张图纸上传并预览功用
  • angularjs点击图片放大达成上传图片预览
  • angular二+nodejs达成图片上传成效
  • Angularjs上传图片实例详解
  • Angularjs完毕上传图片预览功能
  • AngularJS实现图片上传和预览功用的不二等秘书诀分析

最后清空选用上传的开始和结果能够用

这是前者页面,后端假如用Java的话能够用commons-fileupload等文件上传类库。

最后给大家看下预览图

 let upload = <HTMLInputElement>document.querySelector(selectorName);
  upload.value = null;

注意

必发88 2

不亮堂有未有越来越好的格局,应接切磋和指正。

设若后端使用了Struts等框架,框架的过滤器会活动管理http请求中的上传的公文部分,变成在Servlet中收获不到请求的文件数量。

以上就是本文的全体内容,希望对大家的学习抱有帮忙,也目的在于我们多多扶助脚本之家。

上述就是本文的全部内容,希望对我们的读书抱有支持,也期待大家多多帮忙脚本之家。

消除措施一是改换Struts配置文件,将文件上传的过滤器改为大家同舟共济编辑的空白过滤器

你可能感兴趣的篇章:

  • AngularJS完成图片上传和预览成效的主意剖析
  • Angularjs完毕上传图片预览成效
  • angularjs点击图片放大达成上传图片预览
  • angularjs达成多张图纸上传并预览功效
  • AngularJs上传前预览图片的实例代码
  • 学学生运动用AngularJS文件上传控件
  • angularjs客户端达成减少图片文件并上传实例
  • AngularJS 文件上传控件
    ng-file-upload详解
  • 因此AngularJS实现图片上传及缩略图体现示例
  • SpringMvc+Angularjs
    达成多文件批量上传

您可能感兴趣的稿子:

  • Angularjs上传文件组件flowjs功用
  • 基于AngularJS的拖拽文件上传的实例代码
  • SpringMvc+Angularjs
    达成多文件批量上传
  • Angular二-primeNG文件上传模块FileUpload使用详解
  • AngularJS 文件上传控件
    ng-file-upload详解
  • AngularJS+Bootstrap完毕多文件上传与治本
  • 上学应用AngularJS文件上传控件
  • AngularJS向后端ASP.NET
    API调节器上传文件
  • Angular
    Js文件上传之form-data
  • angularjs客户端完毕收缩图片文件并上传实例

竭泽而渔办法2是像submit三个带有<input
type=”file”>的form表单同样,让Struts自动获取到上传的公文。只必要在Servlet中增多八个File类型的质量,并加入get/set方法。属性的名字自然若是file!!!

上述正是本文的全体内容,希望对我们的求学抱有扶助,也盼望我们多多辅助脚本之家。

你大概感兴趣的篇章:

  • AngularJS完成图片上传和预览作用的办法深入分析
  • Angularjs实现上传图片预览功用
  • angularjs点击图片放大达成上传图片预览
  • angularjs实现多张图纸上传并预览成效
  • AngularJs上传前预览图片的实例代码
  • 学学生运动用AngularJS文件上传控件
  • angularjs客户端落成裁减图片文件并上传实例
  • 通过AngularJS完成图片上传及缩略图突显示例
  • SpringMvc+Angularjs
    达成多文件批量上传
  • Angularjs实现多图片上传预览功用

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图