JAVASCRIPT 上传文件的几种方式「建议收藏」

JAVASCRIPT 上传文件的几种方式「建议收藏」方法1:使用ajax,通过formdata传参//注意:FormData只兼容到IE10varformData=newFormData();varfile=$(‘.import-file-btn’).get(0).files[0];formData.append(‘file’,file);formData.append(‘id’,id);formData.append(‘name’,name);$.ajax({url:’user/validate_impo

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

方法1:使用ajax,通过formdata传参

//注意:FormData只兼容到IE10
var formData = new FormData();
var file = $('.import-file-btn').get(0).files[0];
formData.append('file', file);
formData.append('id', id);
formData.append('name', name);

$.ajax({
    url: 'user/validate_import_data',
	type: 'POST',
	cache: false,
	data: formData,
	processData: false,
	contentType: false,
	dataType: "json",
	success: function (res) {},
	error: function (XmlHttpRequest, textStatus, errorThrown) {},
	complete: function () {}
});

Jetbrains全家桶1年46,售后保障稳定

方法2:使用jquery.form.js

html

<!--HTML-->
<form id="import-file-form" action="user/validate_import_data" method='post' enctype='multipart/form-data' target="form">
     <input type="file" name="file" class="import-file-btn" title="">
     <input type="hidden" name="id">
     <input type="hidden" name="name">
</form>

 js

//注意:可兼容IE浏览器,推荐
$('#import-file-form').ajaxSubmit({
	dataType: 'json',
	beforeSerialize: function () {
        //此处可对参数进行处理
    },
	success: function (res) {},
	error: function (XmlHttpRequest, textStatus, errorThrown) {},
	complete: function () {}
});

方法3:使用form表单上传,通过iframe接收回调

html

<form id="import-file-form" action="user/validate_import_data" method='post' enctype='multipart/form-data' target="form"> <!--注意target不能缺少-->
    <input type="file" name="file" class="import-file-btn">
    <input type="hidden" name="id">
    <input type="hidden" name="name">
    <button type="submit" id="submit-import-file" style="display:none">提交</button>
</form>
<iframe name="form" id="import-file-iframe" style="display:none"></iframe>

js

//注意:当http请求成功时,即状态码为200时可正常处理逻辑。
//但是状态码不为200时,没有方法识别到当前请求出错了,不推荐
$("#submit-import-file").click();
$("#import-file-iframe").load(function(){
	var text = $(this).contents().find("body").text(); //获取到的是json的字符串
	console.log(text);
	var res= $.parseJSON(text); //json字符串转换成json对象
	console.log(res);
});

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/201139.html原文链接:https://javaforall.net

(0)
上一篇 2025年8月15日 下午10:43
下一篇 2025年8月15日 下午11:22


相关推荐

  • 面试题:SpringBoot 自动装配原理

    面试题:SpringBoot 自动装配原理1 SpringBootAp 注解首先 我们都知道 SpringBoot 程序的入口是通过 SpringBootAp 注解修饰的一个类 例如 SpringBootAp publicstatic String args SpringApplic run ConfigApplic class args

    2026年3月16日
    1
  • pycharm配置tensorflow环境_python3.6对应的tensorflow版本

    pycharm配置tensorflow环境_python3.6对应的tensorflow版本Round1:打开PyCharm,点击File->Settings,点击弹出界面的“+”号,在搜索框中键入关键字“tensorflow”,从列表中选中“tensorflow”,点击下方的“InstallPackage”,等待一段时间,华丽丽的安装失败了-_-Round2:在Pycharm的terminal中运行pipinstalltensorflow,在等了半小时后,倒计时还有3个多小时,我弃疗了!安装失败!Round3:以上用的都是官方的源,现在考虑换成国

    2022年8月26日
    8
  • gimp中文版教程_GIMP中详细教程.pdf「建议收藏」

    gimp中文版教程_GIMP中详细教程.pdf「建议收藏」GIMP中详细教程GIMP实用系列教程1文件的打开和存储概述打开GIMP软件其初始界面如下:左边是工具,工具箱中每选择一种工具后,通常在其下部会出现一个与其相配的选项栏一起使用的。因此每选好一种工具,首先要把选项栏中的有关选项根据需要选定以后才开始使用。例如:图中选择了画笔,则画笔的选项栏可以选择其不透明度、画笔的笔尖形状、画笔的大小等选项。右边通常可以放置一个图层对话框,如未出现可以在下拉…

    2022年4月19日
    97
  • mybtais-plus学习–BaseMapper提供的方法及SQL语句生成

    mybtais-plus学习–BaseMapper提供的方法及SQL语句生成这篇博客我们介绍一下关于 Mybatis Plus 相关的知识 Mybatis Plus 可以简单的理解为 Mybatis 的加强 其在 Mybatis 的基础上完成了一些封装 这样开发人员在使用起来就很容易和方便 确实是一个很好的框架 官网 Mybatis Plus 优点 Advantages 无侵入 Mybatis Plus 在 Mybatis 的基础上进行扩展 只做增强不做改变 引入

    2026年3月26日
    2
  • AI狂飙,“股王”腾讯归来

    AI狂飙,“股王”腾讯归来

    2026年3月13日
    3
  • OpenClaw接入飞书指南[源码]

    OpenClaw接入飞书指南[源码]

    2026年3月13日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号