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 ...
随机推荐
- RSA，DES，RC4，3DES ，MD5
一,RSA算法基于一个十分简单的数论事实:将两个大质数相乘十分容易,但是想要对其乘积进行因式分解却极其困难,因此可以将乘积公开作为加密密钥. RSA算法是一种非对称密码算法,所谓非对称,就是指该算法需 ...
- lesson - 10 课程笔记
CTRL+C CTRL+D :前者用于结束一个程序,后者用于结束终端输入. --符号 *:匹配任意长度的任意字符 ?:匹配任意一个字符 #: shell 中表注释 \: 脱意符号 []:任意属于字符组 ...
- Saltstack的安装和配置
1.安装salt 因为系统自带的yum源不支持saltstack安装包的支持,所以需要安装第三方yum源(epel) # yum -y install epel-release salt分为主服务器( ...
- 响应式布局—设备像素密度测试 (-webkit-min-device-pixel-ratio)
最近遇到这种头疼的问题,百思不得其解,不耻下问,悬梁刺股这些事情都做过之后,终于看到希望,于是攒见好就收,感觉整理分享给大家,希望有所帮助. 对手机分辨率和网页像素的初步认识是,是2倍的差别. 但 ...
- beanstalk 安装
1.安装 # wget https://github.com/kr/beanstalkd/archive/v1.10.tar.gz # tar xzvf v1.10 # cd beanstalkd-1 ...
- 微信小程序开发之模板
一.简介 WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用. 定义模板 使用name属性,作为模板的名字.然后在<template/>内定义代码片段,如 ...
- Python类方法、静态方法与实例方法
静态方法是指类中无需实例参与即可调用的方法(不需要self参数),在调用过程中,无需将类实例化,直接在类之后使用.号运算符调用方法. 通常情况下,静态方法使用@staticmethod装饰器来声明. ...
- vue2.0 通过v-html指令渲染的富文本无法修改样式的解决方案
在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式: 比如下面的代码,div.descBox里面的p标签的color样式并不是"color: blue" ...
- findhex
FindPattern(hD3D, 0x128000, (PBYTE)"\xC7\x06\x00\x00\x00\x00\x89\x86\x00\x00\x00\x00\x89\x86&qu ...
- 记一个http-proxy-middleware 代理访问nginx映射的接口不通过的问题（connection close）
工作过程中遇见一个问题,使用Vue-cli 搭建了一个工程,由于跨域的问题 使用了自带的dev-server Express Server(A后台) http-proxy-middleware 去访问 ...