普通的html或者jsp控件本身是无法做到的,由于在你点击submit提交数据往后,浏览器就等待response了,剩下的用户无从干预。

实在,js很随意马虎就能做到这点。

一个修正头像的例子

<from action=\"大众\"大众 enctype=\"大众multipart/form-data\"大众 method=\"大众post\"大众><a><span>修正头像</span><input type=\"大众file\"大众 id=\公众fileUp\公众 accept=\公众image/png,image/jpeg\公众></a></from>

var fileM=document.querySelector(\公众#fileUp\"大众);$(\公众#fileUp\公众).on(\"大众change\"大众,function() {//获取文件工具,files是文件选取控件的属性,存储的是文件选取控件选取的文件工具,类型是一个数组var fileObj = fileM.files[0];//创建formdata工具,formData用来存储表单的数据,表单数据时以键值对形式存储的。
var formData = new FormData();formData.append('file', fileObj);$.ajax({url: \"大众自己的后台的Url\"大众,type: \"大众post\公众,dataType: \"大众json\公众,data: formData,async: true,cache: false,contentType: false,processData: false,success: function (json_data) {alert(\"大众上传成功!
\"大众);},});});

在点击\"大众修正头像\"大众的链接后,会打开一个文件选择窗选中图片后就会将其上传到做事器。

jsp获取页面提交的参数JS获取上传的表单内容应用Ajax异步上传 Python

如果后台是tomcat,那么就可以从request域中拿到\"大众file\公众键值对应的工具fileObj,开启流就能吸收。

总结

在上面的例子中,formData工具可以添加任意类型的工具,例如string,file,array等等。

以是可以通过原生JS后者类似Jquery这类框架的选择器,将表单字段获取到,然后放入formData工具中,并且禁用表单的submit事宜(表单禁用submit的办法太多了,这里就不赘述了,由读者自行百度~),由Ajax异步来提交表单,提交完成后可以接管后台的JSON反馈,然后见告用户提交成功或者失落败,由于什么缘故原由失落败!

不由的感叹一句,JS在Web开拓中的地位真的是无可匹敌呀!

本文仅为学习互换所用,如有错疏,还望示正。
喜好本文可以收藏,或者点个关注,每天都有新鲜技能分享!