Angularjs实现多图片上传预览功能

2024-10-16 21:36:26

最近要实现一个多图片上传的预览功能，网上有很多例子大多不太完整，我就把他们的整合了下并且加了一些功能和界面，我们只需要调用一条指令就可以实现，但传给后台还需要额外的代码，会在后面controller里介绍。不知道封装的是否符合标准，还希望大家一起讨论下,如果有时间封装下Angular4的图片上传和预览分享给大家。

图片上传的预览，我们最主要解决的是拿到input的on-change事件，再是读取图片，读取图片我们需要用到FileReader。

我们先写一个读取图片的服务，这是网上的一位大佬写的，我就直接拿了过来

/**
 * 图片上传获取返回的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
      };
}])

我们现在有了图片的读取，我们再来搞定图片的on-change事件

/**
 * 图片上传预览
 */
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的时候会有
                        });
               };
          });
        }
      };
    }])

这里就是提供上传图片预览的样式，还有预览图删除的功能

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>

最后的调用也很简单
我们只需要在2个地方加代码一个是在界面，一个是在Controller里

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

这个是在Controller里的，这是用来传给后台的数据集合，我们需要传给后台的是file对象

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

如何传给后台呢，直接附上代码，其实不难

$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
}

最后给大家看下预览图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue.js图片转Base64上传图片并预览的实现方法

对于前端人员来说,图片处理是一个很常见的需求,由于图片稍微特殊,现在多数做法都是使用调用ajax接口通过http方法来提交,例如post方法提交,后台处理后返回一个图片路径给前端,前端根据这个路径写入img标签,但是基于当前的前后端分离的开发模式下,前后端代码往往不在同一个系统目录下,而且部署时可能liunx路径与windows路径不一样,这样后期路径更改可能会导致维护困难问题出现. 针对这种问题,这里我推荐使用图片转base64格式,再发给后端,后端只需将转码结果存入数据库即可,前端调用接口直
JS实现图片上传多次上传同一张不生效的处理方法

在做图片上传的功能时, 使用删除功能删除了一张图片, 然后想重新上传原来删除的图片, 结果预览不显示, 也不能上传成功解决办法, 在删除方法里置空input $("#id").find('input').val(''); 拿到input所在的位置, 找到这个input, 然后置空还有一种方法是来回切换input的属性每次删除图片后, 改变input的type属性先变成text, 删除完成后变回file, 方便删除后能继续上传 $("#inputId").at
客户端js判断文件类型和文件大小即限制上传大小

由于项目需要!需要脚本在客户端判断大小和文件类型!自己网上找资料找的好辛苦!索性自己写了一个并测试文件上传大小限制的一个例子,兼容ie6,ie7,ie8 ,Google Chrome,ff等浏览器复制代码代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="
原生JS实现前端本地文件上传

本文实例为大家分享了JS实现前端本地文件上传的具体代码,供大家参考,具体内容如下通过input type = file来选择本地文件 <div> <form> <input type="file" id="file-input" name="fileContent"> </form> </div> var fileInput = document.querySelector('#fil
Javascript图片上传前的本地预览实例

图片的上传预览功能主要用于图片上传前的一个效果的预览,目前主流的方法主要有js,jquery与flash实现,但我们一般都会使用js来实现图片上传预览功能,下面来看一个例子. 原理: 分为两步:当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL):把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来. 在这里,我们需要了解Javascript里File对象.Blob对象和window.URL.createObjectURL()方法. Fil
Servlet+Jsp实现图片或文件的上传功能具体思路及代码

现在不管是博客论坛还是企业办公,都离不开资源的共享.通过文件上传的方式,与大家同分享,从而达到大众间广泛的沟通和交流,我们既可以从中获得更多的知识和经验,也能通过他人的反馈达到自我改进和提升的目的. 下面我就为大家介绍 web项目中的这一上传功能,那么文件是如何从本地发送到服务器的呢?看我慢慢道来: 首先,我们创建一个新的web工程,在工程的WebRoot目录下新建一个upload文件夹,这样当我们将该工程部署到服务器上时,服务器便也生成个upload文件夹,用来存放上传的资源. 然后,在Web
JS实现上传图片的三种方法并实现预览图片功能

在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存. 这两种方法各有利弊,方法一很明显,浪费流量和服务器资源:方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高(在某些低版本中的IE浏览器不支持). 以下是实现上述思路的方法: 1. 模板文件 <!DOCTYPE html> <html l
js实现文件上传功能后台使用MultipartFile

本文为大家分享了js实现文件上传功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>XMLHttpRequest上传文件</title> <script type="text/javascript"> //图片上传 var xhr; //上传文件方法 function Upl
JavaScript使用享元模式实现文件上传优化操作示例

本文实例讲述了JavaScript使用享元模式实现文件上传优化操作.分享给大家供大家参考,具体如下: 一.享元模式是一种用于性能优化的模式,主要优化方式为,若系统中因为创建了大量类似的对象而导致内存占用过高,则可以考虑使用享元模式实现. 二.实例说明: 如果在浏览器中上传文件,若使用常规写法, 每上传一个文件,就会创建一个实例对象:如果上传2000个文件,那就有2000个对象,浏览器很可能出现假死状态.这种情况下,我们考虑适应享元模式. 三.实例: var Upload = function(
原生JS和jQuery版实现文件上传功能

本文实例分享了原生JS版和jQuery 版实现文件上传功能的例子,供大家参考,具体内容如下 <!doctype html> <html lang="zh"> <head> <meta charset="utf-8"> <title>HTML5 Ajax Uploader</title> <script src="jquery-2.1.1.min.js"></
js实现上传图片预览的方法

本文实例讲述了js实现上传图片预览的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: function PreviewImage(imgFile) { var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length); filextension=filextension.toLowerCase(); if ((filext
js实现图片上传并预览功能

本文为大家分享了js实现图片上传并预览的具体代码,供大家参考,具体内容如下思路:完成这个功能,首先需要美化上传图片的按钮,然后添加一个<img/>标签,在图片上传之后,用新图片的src替换原来<img/>标签中的src. 如下图所示,是原始的按钮样式: 美化步骤: (1)将上传图片标签采用绝对定位,使之位于一个图片,按钮,div等标签上.或者给图片,按钮或div设置绝对定位,总之,是要让上传文件按钮和用户指定的按钮重合. (2)给上传图片标签设置大大小,使之和与它重叠的图片,按钮
js实现图片上传并正常显示

项目经常会用到头像上传,那么怎么实现呢? 首先是HTML布局: <label for="thumbnail" class="col-md-3 control-label">缩略图</label> <div class="col-md-6"> <input type="file" class="form-control" id="thumbnail"
分享5个好用的javascript文件上传插件

文件上传是我们开发网站程序时经常遇到的功能,选择一个功能强大,使用简单的上传插件可以节省我们很多开发时间,下面就为大家介绍5个不错的javascript文件上传插件这篇文章的资源均来自https://dcrazed.com/html5-jquery-file-upload-scripts/ .我选择了其中自己觉得可用性比较强的几个. Mini AJAX File Upload Form 这个插件的UI和体验都非常棒,不过它依赖于下面介绍的jQuery File Upload plugin. 特
JavaScript代码实现txt文件的上传预览功能

今天做项目刚好碰到这个记录一下.因为是简单的txt文件,只涉及文本,如果需要涉及图片预览就需要使用papaparse和jschardet,此处不多叙述. 表单按钮使用js的onchange="uploadfile()" 事件,function函数代码如下所示: //此处为txt文件上传预览的js代码 function uploadfile(){ var file=$("#txt")[0].files[0]; //判断上传文件是不是txt格式,判断后缀是不是.txt
php+croppic.js实现剪切上传图片功能

最近需要实现裁剪图片上传,想起之前公司用到的一个插件,却不知道叫什么名字了. 在网上找了有些时间,最终找到了这个网站. http://www.croppic.net/ 因为官网文档全部都是英文,所以看起来有些吃力,可以大概看懂80%,但是缺少详细的案例说明,所以真正配置起来还是非常懵逼. 如果完全按照官网文档的步骤,大概就是这样的下载安装官网提供两种下载方式,第一种类似于SDK的whole website,另外一种简洁版croppic.前者提供了完整的项目结构以及前后端案例,后者只有cro
微信JSSDK上传图片

前不久微信公开了一些接口,其中有一个uploadImage接口用于上传图片,一般和chooseImage接口配合使用.先调用chooseImage接口让用户选择一张或者多张图片,用户选择完毕后微信会返回被选中图片的id,再把图片id传给uploadImage接口上传图片. 最近做的一个项目,刚好用到了JSSDK,把用到的东西整理下. 先附上微信开发者文档链接:微信开发者文档主要用到了: 引入JS文件在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq
JS+Struts2多文件上传实例详解

本文实例为大家分享了JS Struts2多文件上传的具体代码,供大家参考,具体内容如下 1.JSP页面: JS控制增加删除多个上传文件框,代码如下: <%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <!DOCTYPE html PUBLIC "-//W3C
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能

本文实例为大家分享了Vue2.0实现调用摄像头进行拍照功能的具体代码,以及图片上传功能引用exif.js,供大家参考,具体内容如下可以在github 上下载demo链接 vue组件代码 <template> <div> <div style="padding:20px;"> <div class="show"> <div class="picture" :style="'backg
node.js自动上传ftp的脚本分享

起因刚加入一个小组的项目开发,开发环境是基于node环境,通过webpack打包构建代码,然后上传sftp,在浏览器测试.这种开发模式无可厚非,但是每次修改源代码,然后build,然后upload,不胜其烦.之前项目中有过 gulp-sftp任务脚本,然而并不是生效.于是自力更生,另谋他法,搞一个自动上传sftp的服务脚本. 设想因为基于webpack,所以直接启动webpack编译的watch监听即可,在watch回调里执行stfp的上传,上传去npm社区找一个sftp的客户端插件实现
JS实现的文件拖拽上传功能示例

本文实例讲述了JS实现的文件拖拽上传功能.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS文件拖拽上传</title> <style> div{ width: 300px; height: 300px; border:1px dashed #000; position:
js 实现 input type="file" 文件上传示例代码

在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type="file" />隐藏,点其他的标签(图片等)来时实现选择文件上传功能. 看代码: 复制代码代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he
JS中使用FormData上传文件、图片的方法

关于FormData XMLHttpRequest Level 2添加了一个新的接口 ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XMLHttpRequest的 send( ) 方法来异步提交表单与普通的ajax相比,使用FormData的最大优点就是可以异步上传二进制文件 FormData对象 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用F
JS简单实现文件上传实例代码（无需插件）

复制代码代码如下: <span class="up-btn" id="selectFile">请选择文件</span><input type="file" name="fileupload" style="FILTER: alpha(opacity=0); moz-opacity: 0; opacity: 0;" /> // 点击#selectFile触发input:f
JS文件上传神器bootstrap fileinput详解

Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一段调用方发和servlet端的接收代码,未完待续. 引言: 一个强化的HTML5 文件输入插件,适用于Bootstrap 3.x.本插件对多种类型的文件提供文件预览,并且提供了多选等功能.本插件还提供给你一个简单的方式去安装一个先进的文件选择/上传控制版本去配合Bootstrap CSS3样式.通过
学习使用AngularJS文件上传控件

前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用angular,且不想因为一个上传功能又引入一个jquery,所以在网上查找基于angular的上传控件,因为angular还算比较新,貌似都没有太成熟的插件,网上的教程也大多是复制粘贴,总之没起倒多大的作用...但是皇天不负有心人,最后还是让我遇到了这个功能强大的插件,让我有种相见恨晚的感觉呀,依靠官方文档和师兄的帮助,终于搞清楚了基本的使用方法.好东
JS和Canvas实现图片的预览压缩和上传功能

先来一张效果图,压压惊第一步:用户选择需要上传的图片 <input type="file" accept="image/*" type="file"" name="imageFile" onchange="upload()"> 在选定了图片后 upload 函数将被触发,我们需要在这个函数中,获取到图片的资源,将它压缩并利用canvas绘制出来,若需要上传到服务器,也可以利用ajax
JS实现可视化文件上传

本文实例为大家分享了JS可视化文件上传的具体代码,供大家参考,具体内容如下测试-Style <style type="text/css"> .imgbox,.imgbox1 { position: relative; width: 200px; height: 180px; border: 1px solid #ddd; overflow: hidden; } .imgnum{ left: 0px; top: 0px; margin: 0px; padding: 0px;
JavaScript实现异步图像上传功能

当向服务器上传图像时,根据服务器操作的复杂性和服务器性能,需要几秒钟到几分钟的时间来完成.本文的重点是在图像上传至服务器时使用JavaScript立即显示图像. 介绍当使用JavaScript将图像上传到服务器时,根据服务器操作的复杂性,可能需要几秒到几分钟来完成操作.在某些情况下,即使图像上传成功,也需要花费更多的时间,这取决于服务器对图像进行额外处理的能力. 本文展示了一种使用代码示例立即显示图像的方法(使用图像的Base64编码版本),同时将其上载到服务器,而无需等待操作完成.这种方法的
js实现上传图片之上传前预览图片

上传图片对图片进行一下预览,可以了解图片上传后大概会是什么样子,此功能用js实现,然后在fileupload控件的change事件中调用,这样当用fileupload选择完图片以后,图片就会自动显示出来了.功能很简单,却很实用. 预览图片的js代码: 复制代码代码如下: <script type="text/javascript"> function setImagePreview(docObj,localImagId,imgObjPreview) { if(docObj
js获取上传文件的绝对路径实现方法

在html中 <input type="file" id="importFile" /> <input type="button" onclick="upload()"/> <script> function upload() { var filename = document.getElementById("importFile").value; // 这时的filen
上传图片预览JS脚本 Input file图片预览的实现示例

在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预览的功能,还被我给翻了出来,在这里做个记录,方便自己以后用,也方便其他需要的朋友! 代码很简单,如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
简单实现js上传文件功能

本文实例为大家分享了js实现上传文件功能的具体代码,供大家参考,具体内容如下一.用input完成上传,效果图如选择文件后,提交后出现图片url 二.传输格式采用form-data形式. html代码 <form id="upload" enctype="multipart/form-data" method="post"> <input type="file" name="file"
vue.js 图片上传并预览及图片更换功能的实现代码

这里讲解是图片上传和图片预览.主要是围绕我们常用功能的列子做讲解 ,并且没有格外引入其他js 所以你复制过去做简单修改便可以看到效果效果图: 样式以及效果图一并展示 1.HTML <div class="rz-picter"> <img :src="avatar" class="img-avatar"> <input type="file" name="avatar" id=
SpringBoot+Vue.js实现前后端分离的文件上传功能

这篇文章需要一定Vue和SpringBoot的知识,分为两个项目,一个是前端Vue项目,一个是后端SpringBoot项目. 后端项目搭建我使用的是SpringBoot1.5.10+JDK8+IDEA 使用IDEA新建一个SpringBoot项目,一直点next即可项目创建成功后,maven的pom配置如下 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> &l
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子

jQuery插件AjaxFileUpload可以实现ajax文件上传,该插件使用非常简单,首先了解一下正确使用AjaxFileUpload插件的方法,然后再了解一些常见的错误信息和解决方法. 使用说明需要使用jQuery库文件和AjaxFileUpload库文件使用实例一,包含文件部分复制代码代码如下: <script type="text/javascript" src="jquery.js"></script> <scr

Angularjs实现多图片上传预览功能

相关推荐

随机推荐