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 ...
随机推荐
- C#中级-Windows Service程序安装注意事项
一.前言 这周除了改写一些识别算法外,继续我的Socket服务编写.服务器端的Socket服务是以Windows Service的形式运行的. 在我完成Windows Service编写后,启动服务时 ...
- 【WebGL】《WebGL编程指南》读书笔记——第4章
一.前言 今天继续第四章的学习内容,开始学习复合变换的知识. 二.正文 Example1: 复合变换 在书中,作者为我们封装了一套用于变换的矩阵对象:Matrix4对象.它 ...
- mysql TIMESTAMP与DATATIME的区别---转载加自己的看法
from:http://lhdeyx.blog.163.com/blog/static/318196972011230113645715/ from:http://blog.csdn.NET/zht6 ...
- 英雄联盟LOL用什么语言写的？
是用openGL开发的 开发语言是c/c++ 客户端是一个.net的web界面
- csv文件转json
http://stackoverflow.com/questions/19766266/directly-convert-csv-file-to-json-file-using-the-jackson ...
- 基于阿里云的JavaEE系统框架介绍
基于阿里云的系统框架展望 1) CDN 用于缓存静态文件等等.七牛和阿里的都还可以. 七牛要做的久一点,各种图片处理的接口要完善一些 阿里的CDN要稍微好一点点,但是没有不安全的访问方式,访问稍微没有 ...
- mysql 基础指令/命令
1.连接Mysql 格式: mysql -h主机地址 -u用户名 -p用户密码1.连接到本机上的MYSQL.首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u root - ...
- 第十章：Python の 网络编程基础(二)
本課主題 Python中的作用域补充 socketserver 源码 线程的介绍和操作实战 进程的介绍和操作实战 协程的介绍和操作实战 本周作业 Python中的作用域补充 Python世界里沒有块级 ...
- 命令行替代工具 - Cmder配置
Cmder 可搭配使用cmd here ( cmdhere.reg ) 1. 修改config\aliases文件:添加下列几行 l=ls --show-control-chars la=ls - ...
- IO多路复用
1.事件驱动模型 上一篇写的协程仅仅是切换,本身不能实现并发,什么时候切换也不知道 那么什么时候切回去呢?怎么确定IO操作完了?通过回调函数 对于事件驱动型程序模型,它的流程大致如下: 开始---& ...