您的位置：首页 > 其它

input[type=file]中使用ajaxSubmit来图片上传

2017-12-19 22:24 477 查看

　　今天在使用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文件。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航