输入文件上传成功吗? [英] Input File upload success?

问题描述

我的表单很复杂，只有一个文件"输入，例如:

I have a quite complex form that has one "file" input, such as:

<input type="file" />

是否可以用JS触发某种成功上传"，所以在用户上传文件后，整个表单便会自行提交?

Is it possible to trigger some kind of "upload successful" with JS, so after user uploads the file the whole form submits itself?

推荐答案

您可以异步上传文件(如果需要，可以上传多个文件). 例如:

You can upload your files asynchronously (if you want you may upload multiple files). So for example:

<input type="file" class="js-file-upload" multiple>

创建输入标签后，您可以收听更改事件

After creating input tag, you can listen to change event

$(".js-file-upload").on("change", function(e){
 var files = e.target.files;
 // your own logic to filter files etc.
 // upload your file
});

所有这些之后，您可以收听上载完成事件(例如，在加载所有文件后提交). Javascript XMLHttpRequest对象提供两个事件: upload.progress 和 load .所以用它))

After all this you can listen to upload finish event (to submit after loading all files for example). Javascript XMLHttpRequest object provides two events: upload.progress and load. So use it ))

我的项目中的伪代码:

file.on("upload.progress", function(e){
  //value show progress
  var value = Math.floor(e.loaded / e.total * 100);
});
file.on("load", function(response){ //logic });

这篇关于输入文件上传成功吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！