今天在使用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来图片上传的更多相关文章

  1. angularjs中使用 <input type="file">标签实现一次最多上传5张图片

    前期准备: 1.angular.js 2.bootstrap.css 具体如何实现呢?请看下面代码哈哈哈. 在angular项目中,如果要给<input type="file" ...

  2. javaWeb - 2 — ajax、json — 最后附:后台获取前端中的input type = "file"中的信息 — 更新完毕

    1.ajax是什么? 面向百度百科一下就知道了,这里就简单提炼一下 Ajax即Asynchronous Javascript And XML(异步JavaScript和XML).当然其实我们学的应该叫 ...

  3. 关于PHP HTML <input type="file" name="img"/>上传图片,图片大小,宽高,后缀名。

    在我们的系统中,不免要上传图片,视频等文件,在上传中,需要做的一些判断,文件大小等方面. 注意: 在php.ini 中的post_max_size,upload_max_filesize默认为2M,在 ...

  4. input[type='file']样式美化及实现图片预览

    前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...

  5. <input type="file">中怎设置那个按钮的样式

    最近才开始学习HTML,在练习表单的过程中,发现在使用<input type="file"/>这个类型的元素,产生的文件框和浏览按扭,它们的样式往往不符合我们的需要.怎 ...

  6. ajaxSubmit 实现图片上传 SSM maven

    文件上传依赖: <!-- 文件上传组件 --> <dependency> <groupId>commons-fileupload</groupId> & ...

  7. jsp中简易版本的图片上传程序

    1.下载相应的组件的最新版本 Commons FileUpload 可以在http://jakarta.apache.org/commons/fileupload/下载 附加的Commons IO   ...

  8. kindeditor在Java项目中的应用以及图片上传配置

    在官网下载Kindededitor的开发包   在项目中javaweb项目中导入kindeditor必须要使用的Jar包(用于文件上传,除非你的富文本编辑器不使用图片上传)jar包可以在官网的开发包中 ...

  9. type=file的inpu美化,自定义上传按钮样式

    <div class="div1"> <div class="div2">点击上传</div> <input type ...

随机推荐

  1. Windows as a Service(2)—— 使用WSUS管理Windows10更新

    前言 在上一篇Windows as a Service(1)-- Windows 10服务分支中,我和大家分享了Windows 10三个服务分支CB/CBB/LTSB的概念及不同,从这篇文档开始,我将 ...

  2. HashMap 之弱引用 - WeakHashMap

    ■ Java 引用的相关知识 1. 强引用 Object o = new Object(); 强引用是Java 默认实现 的引用,JVM会尽可能长时间的保留强引用的存在(直到内存溢出) 当内存空间不足 ...

  3. Golang fmt包使用小技巧

    h1 { margin-top: 0.6cm; margin-bottom: 0.58cm; direction: ltr; color: #000000; line-height: 200%; te ...

  4. 【liferay】3、liferay 添加spring支持

    1.添加对应的spring的jar 地址:https://spring.io/projects 选中springframework 进入git源码的地方,看简介 我们需要编译好的jar 当然也可以自己 ...

  5. VS2010安装OpenGL

     以下涉及到的所有资源都在这里: 链接:https://pan.baidu.com/s/1eSctT5K 密码:174s *我的VS2010的安装位置:D:\Program Files (x86)\M ...

  6. 对DataTable(或者DataSet)修改后,提交修改到数据库

    http://blog.csdn.net/nidexuanzhe/article/details/8228832 说明:通常我们在做数据库交互时,并不一定要使用特定的SQL语句来更新数据,.NET F ...

  7. Ubuntu安装微信

    1.系统是Ubuntu 16.04 64位系统,在网上先去下载electronic-wechat-Linux         https://github.com/geeeeeeeeek/electr ...

  8. 带以太网的MicroPython开发板:TPYBoardv201建立云加法器实例

    转载请注明文章来源,MicroPythonQQ技术交流群:157816561,公众号:MicroPython玩家汇 前面的一篇文档向大家介绍了v201的开发板作为客户端终端向TCPS上传数据的基本过程 ...

  9. Pycharm使用总结

    1.代码整体向右移动 按住Win+TAB可以快速向右缩进一个tab 的距离,按住Shift + TAB反方向前进一个TAB距离 2.Model加入get,set 方法 在编辑框中右击,选择genera ...

  10. 设计模式(三)装饰者模式Decorator

    装饰者模式针对的问题是:对一个结构已经确定的类,在不改变该类的结构的情况下,动态增加一些功能. 一般来说,都是对一些已经写好的架构增加自己的功能,或者应对多种情况,增加功能. 我们还是来玩一句红警,首 ...