今天在使用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. Git详解之九：Git内部原理

    Git 内部原理 不管你是从前面的章节直接跳到了本章,还是读完了其余各章一直到这,你都将在本章见识 Git 的内部工作原理和实现方式.我个人发现学习这些内容对于理解 Git 的用处和强大是非常重要的, ...

  2. 在Maven Central发布中文API的Java库

    原址: https://zhuanlan.zhihu.com/p/28024364 相关问题: 哪些Java库有中文命名的API? 且记下随想. 之前没有发布过, 看了SO上的推荐:Publish a ...

  3. esp8266 SDK开发之环境搭建

    最近在弄这个WiFi模块,发现网上SDK开发方面的资料很少,发现了一套视频教程,不过主讲人的讲课方式实在受不了.对基于SDK开发感兴趣的同学可以通过本帖在Ubuntu系统上通过Eclipes搭建开发环 ...

  4. Life in Changsha 第一次scrum冲刺

    第一次冲刺任务 基于大局的全面性功能框架定位,要求能实现用户基于自己的需求进行的一系列操作. 用户故事 用户打开“生活在长大”的界面 程序首页展示校园服务,论坛等相关信息 用户选择某个功能 程序界面跳 ...

  5. c=$[$c%5]到let c=$c%5的转换

    刚学shell不知道怎么转换,现在明白了一点点 ,记录下   变成加法就好明白了     c=$[$c+5] let c=$c+5 #变量c等于C加上5后在赋值给自身 let c+=5 #就可以这样表 ...

  6. python_第2课

    前言 回顾一下python+selenium基础,并整理相关知识点,分享给有需要,在前进道路上的朋友. 由于不是在python中敲的代码,有可能有缩进等相关错误,请自行检查 数据类型 #python中 ...

  7. angular4.0路由传递参数、获取参数最nice的写法

    研究ng4的官网,终于找到了我想要的方法.我想要的结果是用'&'拼接参数传送,这样阅读上是最好的.否则很多'/'的拼接,容易混淆参数和组件名称.一般我们页面跳转传递参数都是这样的格式:http ...

  8. ubuntu PHP相关操作

    php开启重写模块 vim /etc/apache2/apache2.conf 写入<Directory /阿帕奇的项目目录> AllowOverride All </Directo ...

  9. css写的常见图形

    .aly-tooltip { display: inline-block; padding: 5px; padding-left: 15px; padding-right: 15px; backgro ...

  10. Django-数据库访问优化

    数据库访问优化 使用标准数据库优化技巧 索引.我们可以使用Field.db_index或者Meta.index_together在Django中添加索引,优先向经常使用filter(),exclude ...