javascirpt封装xhr上传多张图片，以及解决formdata后端只接受一张图片问题，用原型链来封装减少资源浪费和提高性能

这里使用了函数的原型链来封装每个共享函数和特权方法 访问私有数据

<html><head><meta http-equiv="Content-Type:text/html;charset=utf-8"/><title></title><script type="text/javascript" src="common.js"></script><style type="text/css">#preview{display: flex;flex-wrap: wrap;width: 580px;padding: 10px;justify-content: start;}.icon-po {overflow: hidden;position: relative;width: 150px;height: 150px;margin-right: 20px;margin-top: 20px;}.icon-close {position: absolute;right: 5%;top: 5%;width: 30px;border-radius: 45%;background-color: #fff;color: #000;font-size: 16px;line-height: 1.87em;display: flex;align-items: center;justify-content: center;}.pic {width:150px;height: 150px;}</style></head><body><div id="container"><input type="file" name="uploadimg" id="upimg" multiple/><input type="button" value="预览" name="icon" id="prebut"/><input type="button" value="上传" id="upxhr"/></div><div id="preview"></div><script type="text/javascript">//添加函数原型链的addMethods()方法Function.prototype.addMethods=function(name,fn){this.prototype[name]=fn;}//创建上传函数var uploadImg=function(){var fL=[];var url=[];var name=[];var e=0;//以下为特权方法函数，方便获取私有数据this.getfL=function(){return fL;};this.getUrl=function(){return url;};this.getName=function(){return name;};this.setfL=function(val){fL.push(val)};this.setName=function(val){name.push(val);}this.setUrl=function(val){url.push(val);}this.getThis=function(){return this;}this.getEle=function(ele){return document.getElementById(ele);}this.clearfL=function(){//清空数组时，也应该清空name数组，避免重新添加图片时弹出已经添加该图片fL=[];name=[];url=[];}this.clearName=function(){name=[];}this.clearUrl=function(){url=[];};};//以下都是原型链函数uploadImg.addMethods('getfL',function(){return this.getfL();});uploadImg.addMethods('getFiles',function(upfiles){if(upfiles.length>0 && upfiles.length<6){for(var i=0,len=upfiles.length;i<len;i++){if(/image\/(jpe?g|png|gif)/.test(upfiles[i].type)){if(upfiles[i].size<1024*1000){if(this.getfL().length==0){this.setfL(upfiles[i]);}else if(this.getfL().length>0){for(var x=0,leng=this.getfL().length;x<leng;x++){this.setName(this.getfL()[x].name);}if(this.getName().indexOf(upfiles[i].name)==-1){this.setfL(upfiles[i]);this.setName(upfiles[i].name);}else{alert('此图片已经添加');}}if(this.getfL().length>5){this.clearfL();alert('最大上传5张图片,请重新选择图片');}}else{alert('请上传小于1M的图片');}}else{alert('请上传正确的图片类型');}}}else{alert('最大上传5张图片');}});uploadImg.addMethods('preView',function(){var e=0;var that=this.getThis();this.getfL().forEach(function(item,index,array){//创建异步读取文件对象var reader=new FileReader();//创建div1为图片预览小容器，div2为关闭div1小容器的按钮var div1=document.createElement('div');var div2=document.createElement('div');//为他们添加样式名称div1.className="icon-po";div2.className="icon-close";div2.innerHTML='X';div1.index=div2.index=e;e++;reader.onload=function(){var img=new Image();img.src=reader.result;img.title=item.name;//检查是否已经添加该图片的url连接在预览中var pos=that.getUrl().indexOf(img.src);if(pos==-1){that.setUrl(img.src);div1.appendChild(img);div1.appendChild(div2);that.getEle('preview').appendChild(div1);}else{return;}div2.onclick=function(event){var ex=event.target;div1.remove();//移除div1里面图片时，同时移除图片对象数组、URL数组、和图片名字数组中的相关图片数据that.getfL().splice(index,1);that.getUrl().splice(index,1);that.getName().splice(ex.index,1);//index--;//unique()为自己的数组去重数组var imname=unique(that.getName());if(that.getfL().length != imname.length){that.clearName();that.getfL().forEach(function(item,index,array){that.setName(item.name);});}};};reader.readAsDataURL(item);});});uploadImg.addMethods('xhrup',function(){var xhr=new createXHR();if(this.getfL().length>0){var fd=new FormData();var t=this.getThis();for(var i in this.getfL()){fd.append(i,this.getfL()[i]);xhr.open('post','ajaxvalidationimg.php',true);xhr.send(fd);}xhr.onload=function(){if(xhr.status==200){var responseText=xhr.responseText;if(!/[\[\S*]]/.test(responseText)){alert(responseText);}else{var textarr=responseText.split('\t\n');textarr.pop();for(var x=0,l=textarr.length;x<l;x++){var m=JSON.parse(textarr[x]);}}alert(m.msg);console.log(m.data);}else{alert('xhr获取数据失败');}};t.clearfL();}else{alert('没有可上传的图片');}});var upload=new uploadImg();var file=document.getElementById("upimg");file.onchange=function(){upload.getFiles(file.files);upload.preView();console.info(upload.getfL());};upload.getEle('prebut').onclick=function(){var preview=upload.getEle('preview');var d=document.defaultView.getComputedStyle(preview,null);if(d.display!="none"){preview.style.display='none';}else{preview.style.display="flex";}if(preview.children.length==0){upload.clearfL();alert('无图片可预览');} };upload.getEle('upxhr').onclick=function(){upload.xhrup();upload.getEle('preview').innerHTML='';};</script> </body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/121791.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

机器学习之IV编码，分箱WOE编码

机器学习之IV编码，分箱WOE编码

IV的概念与作用 全称是Information Value&#xff0c;中文的意思是信息价值&#xff0c;或者信息量作用&#xff1a; 1、构建分类模型时&#xff0c;经常需要对特征进行筛选。 2、挑选特征的过程考虑的因素比较多&#xff0c;最主要和最直接的衡量标准是特征的预测能力&#…
阅读更多...
gitlab 通过变量连接自建K8S

gitlab 通过变量连接自建K8S

services:- docker:19.03.7-dind- golang:1.17.8-alpine3.15- docker:stable stages:- package- build and push docker image- deploy variables:KUBECONFIG: /etc/deploy/config build:tags:- k8simage: golang:1.17.8-alpine3.15stage: package# 只作用在main分支only:- mai…
阅读更多...
PHP简单实现预定义钩子和自定义钩子

PHP简单实现预定义钩子和自定义钩子

在PHP中&#xff0c;钩子&#xff08;Hooks&#xff09;是一种机制&#xff0c;允许开发人员在特定的时机插入自定义代码。通过使用钩子&#xff0c;开发人员可以在应用程序的特定事件发生时执行自定义的功能或逻辑 钩子有两种类型&#xff1a;预定义钩子和自定义钩子。 预定…
阅读更多...
Ubuntu安装docker，并换镜像源详细教程，建议收藏

Ubuntu安装docker，并换镜像源详细教程，建议收藏

文章目录 添加docker官方的GPG密钥将docker仓库添加到apt源安装docker检查docker换源 添加docker官方的GPG密钥 sudo apt-get updatesudo apt-get install ca-certificates curl gnupgsudo install -m 0755 -d /etc/apt/keyringscurl -fsSL https://download.docker.com/linux…
阅读更多...
JAVA 同城服务货运搬家小程序系统开发时应注意哪些？

JAVA 同城服务货运搬家小程序系统开发时应注意哪些？

在开发JAVA同城服务货运搬家小程序系统时&#xff0c;需要注意以下几点&#xff1a; 需求分析与设计&#xff1a;在开始开发前&#xff0c;需要对系统进行详细的需求分析与设计。这包括了对用户需求的理解、业务流程的梳理、数据库的设计以及界面设计等。确保系统的功能完善、…
阅读更多...
Linux shell 从文本文件读取文件列表循环拷贝

Linux shell 从文本文件读取文件列表循环拷贝

先抛出问题&#xff0c;有一个文本文件(files.name)列出哪些文件要拷贝&#xff0c;一行一个(可以带路径) aaa.x bbb.c ccc.d folderA folderB 现在要将其拷贝到另一个目录&#xff0c;由于一个一个拷贝太麻烦&#xff0c;遂考虑使用脚本&#xff0c;网上查了stackoverflow&a…
阅读更多...
【axios】axios的基本使用

【axios】axios的基本使用

一、 Axios简介 1、 Axios是什么&#xff1f; Axios是一个基于promise的HTTP库&#xff0c;类似于jQuery的ajax&#xff0c;用于http请求。可以应用于浏览器端和node.js&#xff0c;既可以用于客户端&#xff0c;也可以用于node.js编写的服务端。 2.、Axios特性 支持Promis…
阅读更多...
Groovy安装开发环境

Groovy安装开发环境

准备下载GDK并安装环境变量,跟安装JDK一模一样 https://groovy.apache.org/download.html
阅读更多...
【Qt】窗口和对话框区别、主窗口和二级窗口区别、QMainWindow和QDialog区别

【Qt】窗口和对话框区别、主窗口和二级窗口区别、QMainWindow和QDialog区别

窗口和对话框&#xff08;Window and Dialog Widgets&#xff09; 未嵌入在父界面中的界面称为窗口。&#xff08;通常&#xff0c;窗口具有边框和标题栏&#xff0c;尽管也可以使用合适的窗口标志创建没有此类标志的窗口&#xff09;。 在Qt中&#xff0c;QMainWindow和QDial…
阅读更多...
安装使用vcpkg的简易教程

安装使用vcpkg的简易教程

目录 1. 首先安装vcpkg2. 在vcpkg目录下运行bootstrap-vcpkg.bat 命令3. 接着vs进行集成4. 使用vcpkg搜索可用的包5.下载安装所需包6.下载安装完成 1. 首先安装vcpkg 使用git命令下载 git clone https://github.com/Microsoft/vcpkg.git如果下载失败可直接下载文件 (vcpkg-ma…
阅读更多...
基于Pytest+Requests+Allure实现接口自动化测试！

基于Pytest+Requests+Allure实现接口自动化测试！

一、整体结构 框架组成&#xff1a;pytestrequestsallure设计模式&#xff1a; 关键字驱动项目结构&#xff1a; 工具层&#xff1a;api_keyword/参数层&#xff1a;params/用例层&#xff1a;case/数据驱动&#xff1a;data_driver/数据层&#xff1a;data/逻辑层&#xff1a…
阅读更多...
C++基础：函数模板

C++基础：函数模板

为了代码重用&#xff0c;代码必须是通用的&#xff1b;通用的代码就必须不受数据类型的限制。那么我们可以把数据类型改为一个设计参数&#xff0c;这种类型的程序设计称为参数化程序设计&#xff0c;软件模板有模板构造&#xff0c;包括函数模板和类模板。 函数模板可以用来…
阅读更多...
工厂智能工具介绍——5W1H

工厂智能工具介绍——5W1H

5W1H分析法是一种常见的思考工具&#xff0c;它的名称来源于它的六个基本问题&#xff1a;1. What&#xff08;什么&#xff09;&#xff1b;2. Why&#xff08;为什么&#xff09;&#xff1b;3. Who&#xff08;谁&#xff09;&#xff1b;4. Where&#xff08;在哪里&#x…
阅读更多...
rpc汇总

rpc汇总

1、什么是rpc rpc的应用&#xff0c;有哪些 Google 开源了 gRPC&#xff0c; Facebook 开源了 Thrift&#xff0c; Twitter 开源了 Finagle&#xff0c; 百度开源了bRPC&#xff0c; 腾讯开源了 Tars&#xff0c; 阿里开源了 Dubbo 和 HSF&#xff0c; 新浪开源了 Motan 等 gr…
阅读更多...
设计模式（19）命令模式

设计模式（19）命令模式

一、介绍&#xff1a; 1、定义&#xff1a;命令模式&#xff08;Command Pattern&#xff09;是一种行为设计模式&#xff0c;它将请求封装为一个对象&#xff0c;从而使你可以使用不同的请求对客户端进行参数化。命令模式还支持请求的排队、记录日志、撤销操作等功能。 2、组…
阅读更多...
在spring boot+vue项目中@CrossOrigin 配置了允许跨域但是依然报错跨域，解决跨域请求的一次残酷经历

在spring boot+vue项目中@CrossOrigin 配置了允许跨域但是依然报错跨域，解决跨域请求的一次残酷经历

首先&#xff0c;说一下我们的项目情况&#xff0c;我们项目中后端有一个过滤器&#xff0c;如果必须要登录的接口路径会被拦下来检查&#xff0c;前端要传一个token&#xff0c;然后后端根据这个token来判断redis中这个用户是否已经登录。 if (request.getMethod().equals(&qu…
阅读更多...
Spring常见面试题

Spring常见面试题

https://blog.csdn.net/a745233700/article/details/80959716?ops_request_misc%257B%2522request%255Fid%2522%253A%2522169847982516800213061720%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id169847982516800213061720&biz_id0&…
阅读更多...
【Qt之QMapIterator】检测是否为空

【Qt之QMapIterator】检测是否为空

简介 QMapIterator及其他类型迭代器&#xff0c;本身没有一个直接的方式来判断是否为空&#xff0c;因为它不是一个容器&#xff0c;而是一个迭代器&#xff0c;用来遍历容器&#xff08;如QMap&#xff09;的元素。 然而&#xff0c;可以通过检查它是否还有下一个元素来判断…
阅读更多...
Azure云工作站上做Machine Learning模型开发 - 全流程演示

Azure云工作站上做Machine Learning模型开发 - 全流程演示

目录 本文内容先决条件从“笔记本”开始设置用于原型制作的新环境&#xff08;可选&#xff09;创建笔记本开发训练脚本迭代检查结果 关注TechLead&#xff0c;分享AI全维度知识。作者拥有10年互联网服务架构、AI产品研发经验、团队管理经验&#xff0c;同济本复旦硕&#xff0…
阅读更多...
Dataworks API：调取 MC 项目下所有表单

Dataworks API：调取 MC 项目下所有表单

文章目录 前言Dataworks API 文档解读GetMetaDBTableList 接口文档 API 调试在线调试本地调试运行环境账密问题请求数据进一步处理 小结 前言 最近&#xff0c;我需要对公司的数据资产进行梳理&#xff0c;这其中便包括了Dataworks各个项目下的表单。这些表单&#xff0c;作为…
阅读更多...
最新文章

Copyright @ 2022~2023