input[type=file]中使用ajaxSubmit来图片上传
今天在使用input[type=file]上传图片到服务器时，因为项目要求，并不是像常见的通过按钮来提交表单事件，而是图片上传后就自动执行表单提交事件，将上传的图片信息传给服务器。
刚开始我是这样执行的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.file{
width: 75px;
height: 25px;
line-height: 25px;
text-align: center;
background-color: green;
position:relative;
}
.file input{
width: 75px;
height: 25px;
opacity:0;
filter:alpha(opacity=0);
position:absolute;
left:0;
top:0;
}
#dd{
display: none;
}
</style>
</head>
<body>
<form action="接口的url" name="file" class="file">
上传文件
<input type="file" id="img" name="file">
</form>
<div id="dd"></div>
<script>
var file = document.getElementById("img");
file.onchange = function(){
var files = this.files;
for(var i=0;i<files.length;i++){
readers(files[i])
}
}
function readers(fil){
var reader = new FileReader();
reader.readAsDataURL(fil);
reader.onload = function(){
form.submit(); // 文件上传后执行表单提交事件
};
}
</script>
</body>
</html>
后来发现不行，原来是form标签里缺少一句很重要的代码：enctype="multipart/form-data" 还有一个问题就是input[type=file]的name值必须为file，改好后，能将图片上传到指定服务器，但同时，新的问题产生了，那就是表单提交后，该页面会发生跳转，跳转到接口地址，这不是我想要的，我想要的是表单提交后，跳转到一个进度条页面，来展示图片处理的进度。
于是不得不寻求新的方法，在网上看到有ajaxSubmit这种方法，这是jquery中的一种方法，使用这种方法，需要引入jquery文件以及jquery.form文件。而后就是去掉form表单中action的值，代码如下：
<script>
$(function(){
$("#img").change(function(){
var file = this.files;
console.log(file)
for(var i=0;i<file.length;i++){
readFiles(file[i])
}
})
function readFiles(file){
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(){
$('form').ajaxSubmit({
method:'post',
url:'', // 上传的接口地址
success: function(data,s, status){
//上传成功之后的操作。跳转到新的页面，后面是需要传递的参数，这里使用了模版字符串
window.location.href = `progress.html?key=${data.body.key}&date=${data.body.date}`
},
error: function (data, status, e){
//上传失败之后的操作
alert("上传失败")
}
})
};
}
)}
注意：使用ajaxSubmit方法来提交文件时，需要引入jquery文件和jquery.form文件。
input[type=file]中使用ajaxSubmit来图片上传的更多相关文章
- angularjs中使用 <input type="file">标签实现一次最多上传5张图片
前期准备: 1.angular.js 2.bootstrap.css 具体如何实现呢?请看下面代码哈哈哈. 在angular项目中,如果要给<input type="file" ...
- javaWeb - 2 — ajax、json — 最后附：后台获取前端中的input type = "file"中的信息 — 更新完毕
1.ajax是什么? 面向百度百科一下就知道了,这里就简单提炼一下 Ajax即Asynchronous Javascript And XML(异步JavaScript和XML).当然其实我们学的应该叫 ...
- 关于PHP HTML <input type="file" name="img"/>上传图片，图片大小，宽高，后缀名。
在我们的系统中,不免要上传图片,视频等文件,在上传中,需要做的一些判断,文件大小等方面. 注意: 在php.ini 中的post_max_size,upload_max_filesize默认为2M,在 ...
- input[type='file']样式美化及实现图片预览
前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...
- <input type="file">中怎设置那个按钮的样式
最近才开始学习HTML,在练习表单的过程中,发现在使用<input type="file"/>这个类型的元素,产生的文件框和浏览按扭,它们的样式往往不符合我们的需要.怎 ...
- ajaxSubmit 实现图片上传 SSM maven
文件上传依赖: <!-- 文件上传组件 --> <dependency> <groupId>commons-fileupload</groupId> & ...
- jsp中简易版本的图片上传程序
1.下载相应的组件的最新版本 Commons FileUpload 可以在http://jakarta.apache.org/commons/fileupload/下载 附加的Commons IO ...
- kindeditor在Java项目中的应用以及图片上传配置
在官网下载Kindededitor的开发包 在项目中javaweb项目中导入kindeditor必须要使用的Jar包(用于文件上传,除非你的富文本编辑器不使用图片上传)jar包可以在官网的开发包中 ...
- type=file的inpu美化，自定义上传按钮样式
<div class="div1"> <div class="div2">点击上传</div> <input type ...
随机推荐
- 关于java字节流的read()方法返回值为int的思考
我们都知道java中io操作分为字节流和字符流,对于字节流,顾名思义是按字节的方式读取数据,所以我们常用字节流来读取二进制流(如图片,音乐 等文件).问题是为什么字节流中定义的read()方法返回值为 ...
- C#学习之设计模式：工厂模式
最近研究一下设计模式中工厂模式的应用,在此记录如下: 什么是工厂模式? 工厂模式属于设计模式中的创造型设计模式的一种.它的主要作用是协助我们创建对象,为创建对象提供最佳的方式.减少代码中的耦合程度,方 ...
- 微信小程序开发模板消息的时候 出现 errcode: 41028, errmsg: "invalid form id hint:
小程序开发模板消息的时候 出现 errcode: 41028, errmsg: "invalid form id hint: 我是使用的微信支付发送模板消息,提示的formid无效的 大家 ...
- Netty对WebSocket的支持(五)
Netty对WebSocket的支持(五) 一.WebSocket简介 在Http1.0和Http1.1协议中,我们要实现服务端主动的发送消息到网页或者APP上,是比较困难的,尤其是现在IM(即时通信 ...
- Md2All
微信公众号:颜家大少欢迎关注我,一起学习,一起进步!目前,知到 Md2All 的朋友还很少,如果你觉得有帮助,希望能告诉身边有需要的朋友. 谢谢! Md2All 简介 一个Markdown在线转换工具 ...
- js的onscroll、scrollTop、scrollHeight及window.scroll等方法
onscroll 解释:当元素的滚动条滚动时触发的事件. onscroll事件貌似任何实体元素都可以绑定,这里的实体元素包括DOM元素.window元素.document元素. 用法即:element ...
- Scala 简介
Scala 特性 面向对象特性 Scala是一种纯面向对象的语言,每个值都是对象.对象的数据类型以及行为由类和特质描述. 类抽象机制的扩展有两种途径:一种途径是子类继承,另一种途径是灵活的混入机制.这 ...
- 【转】Install libimobiledevice on Mac OSX
About the App App name: libimobiledevice App description: Library to communicate with iOS devices na ...
- Fineui js getText
需要自己写js的时候.需要取值. var ddlgenderid='<%=ddlgender.clientID%>';function reader(value){f(ddlgenderi ...
- SAP HANA中的SLT简介
在以SAP系统作为主要ERP的企业中,不同系统之间的数据库数据同步是个重要的工作.对于这种需求,除了开发ABAP接口之外,也有高效的工具可用.SLT就是其中之一. SLT是SAP的第一个ETL(Ext ...