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文件。

 

posted @ 2017-12-19 22:24  江峰★  阅读(287)  评论(0)  编辑  收藏  举报
∧