- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章js实现上传图片到服务器由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
本文实例为大家分享了js实现上传图片到服务器的具体代码,供大家参考,具体内容如下 。
HTML 。
1
2
3
4
|
//多张图片上传multiple
<
input
type
=
"file"
id
=
"file"
multiple>
//原生提交按钮
<
input
type
=
"submit"
>
|
javascript 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<script>
// 定义一个接收转为base64图片的数组
let ArrayImg=[]
var
index = 0;
//给图片加唯一标识 好删除
// 获取页面上的元素
let input=document.getElementById(
'file'
)
console.log(input);
// 绑定oncheange事件
input.onchange=
function
(){
var
file=
this
.files[0]
//获取页面上选择的文件[N]指的是获取第几个
// console.log(file);
var
iLen =
this
.files.length;
//获取图片长度
// console.log(iLen);
for
(
var
i=0;i<iLen;i++){
//通过循环把多张图片显示到页面上或者上传
// 本地缓存 预览
var
filereader =
new
FileReader()
//创建一个本地缓存的对象
// 把获取到的文件本地缓存转为bese64
filereader.readAsDataURL(
this
.files[i])
//转成base64,并存在了自由属性reader.result里
console.log([i]);
filereader.onload =
function
() {
//通过onload 事件把this.result 取出来
// console.log(this.result,333);
ArrayImg.push(
this
.result)
// 通过html标签包括到img显示图片 放到一个变量中储存
let img1=`<div id=
"divimg"
><img src=
"${this.result}"
alt=
""
id=
"id_img"
></div>`
// 创建一个新的div
let div = document.createElement(
'div'
)
div[
'index'
] = index;
// 给div加唯一标识好移除
// 把上传存好的img1放到新建的div里面
div.innerHTML=img1
console.log(ArrayImg,
'图片数组'
);
//然后通过dom操作插入到dom树中 显示图片
document.getElementsByTagName(
'body'
)[0].appendChild(div)
//插入dom树
// console.log(img);
// 通过给div绑定单击事件 删除当前点击的div跟当前点击的图片数组中的base64地址
div.onclick =
function
(){
this
.remove();
// 在页面中删除该图片元素
delete
ArrayImg[
this
.index];
// 删除ArrayImg数组对应的数据
console.log(ArrayImg,
'图片数组'
);
}
//inddex记录当前循环了多少次好移除ArrayImg数组中的链接地址
index++
}
}
}
</script>
|
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我.
原文链接:https://blog.csdn.net/a134468/article/details/115579529 。
最后此篇关于js实现上传图片到服务器的文章就讲到这里了,如果你想了解更多关于js实现上传图片到服务器的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
谁能解释一下 Server.MapPath(".")、Server.MapPath("~")、Server.MapPath(@"之间的区别\") 和 Server.MapPath("/")? 最佳答案
我不知道,为什么我们要使用 Server.UrlEncode() & Server.UrlDecode()?!在 QueryString 中我们看到 URL 中的任何内容,那么为什么我们要对它们进行编
我已经通过 WHM 在我的一个域上安装了 ssl 证书。网站正在使用 https://xyz.com . 但是它不适用于 https://www.xyz.com .我已经检查了证书,它也适用于 www
我已经使用 WMI 检测操作系统上是否存在防病毒软件,itz 正常工作并通过使用命名空间向我显示防病毒信息,例如 win xp 和 window7 上的名称和实例 ID:\root\SecurityC
我们有 hive 0.10 版本,我们想知道是否应该使用 Hive Server 1 或 Hive Server2。另一个问题是连接到在端口 10000 上运行的 Hive 服务器,使用 3rd 方工
我想在 C++ 中使用 Windows Server API 设置一个 HTTPS 服务器,我使用了示例代码,它在 HTTP 上工作正常,但我就是不能让它在 HTTPS 上工作。 (我不想要客户端 S
我写了一个非常基本的类来发送电子邮件。我用 smtp 服务器对其进行了测试,它工作正常,但是当我尝试使用我公司的交换服务器时,它给出了这个异常: SMTP 服务器需要安全连接或客户端未通过身份验证。服
我的应用程序包含一个“网关”DataSnap REST 服务器,它是所有客户端的第一个访问点。根据客户端在请求中传递的用户名(基本身份验证),请求需要重定向到另一个 DataSnap 服务器。我的问题
我有一个 Tomcat 服务器和一个 Glassfish4 服务器。我的 Servlet 在 Tomcat 服务器上启动得很好,但在 Glassfish4 服务器上给我一个“HTTP Status 4
我在 vmware 上创建了一个 ubuntu 服务器。我用它作为文件服务器。如果我通过托管虚拟机的计算机进行连接,则可以访问它。我无法从同一网络上的其他计算机执行此操作。提前致谢! 最佳答案 首先确
如何重启 Rails 服务器?我从 开始 rails server -d 所以服务器是分离的 我知道的唯一方法就是去做ps 辅助 | grep rails 并 kill -9关于过程#但是像这样杀死进
我实际上正在尝试找到编写一个简单的 XMPP 服务器的最佳方法,或者找到一个占用空间非常小的服务器。我只关心XMPP的核心功能(状态、消息传递、群组消息传递)。目前还在学习 XMPP 协议(proto
我实际上正在尝试找到编写简单 XMPP 服务器的最佳方法,或者找到一个占用空间非常小的方法。我只关心 XMPP 的核心功能(统计、消息、组消息)。目前也在学习 XMPP 协议(protocol),所以
我们正在尝试从 Java JAX-RS 适配器访问 SOAP 1.1 Web 服务。 我们正在使用从 WSDL 生成的 SOAP 客户端。 但是当解码 SOAP 故障时,我们得到以下异常: ... C
目前,我和许多其他人正在多个平台(Windows、OS X 和可能的 Linux)上使用 Python HTTP 服务器。我们正在使用 Python HTTP 服务器来测试 JavaScript 游戏
我有一个连续运行的服务器程序(C#/.NET 2.0 on Linux with mono),我想从 PHP 脚本连接到它以在网站上显示状态信息。 目的是创建一个(某种)实时浏览器游戏(无 Flash
所以我有一个单页客户端应用程序。 正常流程: 应用程序 -> OAuth2 服务器 -> 应用程序 我们有自己的 OAuth2 服务器,因此人们可以登录应用程序并获取与用户实体关联的 access_t
我们刚刚将测试 Web 服务器从 Server 2008 升级到 Server 2012 R2。我们有一个部署我们网站的批处理脚本。当它将站点推送到服务器时,它现在失败了。奇怪的是,我可以使用相同的发
建议一些加载SpagoBI服务器的方法,我尝试了所有方法来解析spagobi服务器。在 Catalina 中,错误是 - * SEVERE: Unable to process Jar entry [
当我们点击应用程序服务器(apache tomcat)时,它会创建一个线程来处理我们的请求并与 tomcat 连接,建立连接,tomcat 创建另一个线程来处理请求并将其传递给连接,连接线程将其传递给
我是一名优秀的程序员,十分优秀!