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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • adb安装使用

    adb安装使用adb工具即AndroidDebugBridge(安卓调试桥)tools。它就是一个命令行窗口,用于通过电脑端与模拟器或者真实设备交互。简单的说就是可以通过电脑端的命令行控制手机或者手机模拟器,例如可以控制手机的点击、滑动、安装应用、打开应用、关闭应用、输入文字等。(只适用于安卓手机)1.电脑端安装abdadb不用安装,下载解压就可以用,下载地址:http://pan.baidu.c…

    2022年5月17日
    66
  • 伺服电机缺相什么现象_伺服驱动器三相220怎么接单相

    伺服电机缺相什么现象_伺服驱动器三相220怎么接单相 §01无刷电机驱动模块一、无刷电机▲图1.1拆开后的三相无刷电机驱动板

    2022年10月19日
    2
  • 字符串-字典树_求一个字符串的所有子串

    字符串-字典树_求一个字符串的所有子串HDU-1251统计难题POJ-3603PhoneListAcWing-143最大异或对HDU-5536ChipFactory字典树,顾名思义是以树结构来模拟字典。回想我们查字典的过程,比如查找”man”,先翻到字典m部分,再翻第二个字母a和第三个字母n,一共查找3次。查找次数最多是等于个单词的长度。插入查找单词的时间复杂度时O(m)O(m),此外有公共前缀的单词只需存一次公共前缀,节省了空间。

    2025年9月24日
    4
  • 关于转置卷积(反卷积)的理解[通俗易懂]

    关于转置卷积(反卷积)的理解[通俗易懂]本文地址:https://blog.csdn.net/isMarvellous/article/details/80087705,转载请注明出处。什么是转置卷积(反卷积)?转置卷积(TransposedConvolution)又称为反卷积(Deconvolution)。在PyTorch中可以使用torch.nn.ConvTranspose2d()来调用,在Caffe中也有对应的层deco…

    2022年6月21日
    28
  • 【数据增强】Cutout「建议收藏」

    【数据增强】Cutout「建议收藏」论文:ImprovedRegularizationofConvolutionalNeuralNetworkswithCutout.Github:https://github.com/uoguelph-mlrg/Cutout.Cutout的出发点和随机擦除一样,也是模拟遮挡,目的是提高泛化能力,实现上比RandomErasing简单,随机选择一个固定大小的正方形区域,然后采用全0填充就OK了,当然为了避免填充0值对训练的影响,应该要对数据进行中心归一化操作,norm到0。(如果你还不了

    2022年9月25日
    2
  • PCIe 1. PCI与PCIe学习一——硬件篇

    PCIe 1. PCI与PCIe学习一——硬件篇最近在学习驱动开发过程中涉及到PCI相关知识,在网上看了很多文章,良莠不齐,我总结一下比较好的文章分享给大家,那就从源头开始说起。PCI总线和设备树是X86硬件体系内很重要的组成部分,几乎所有的外围硬件都以这样或那样的形式连接到PCI设备树上。虽然Intel为了方便各种IP的接入而提出IOSF总线,但是其主体接口(primaryinterface)还依然是PCIe形式。我们下面分成两部分介绍PCI和他的继承者PCIe(PCIexpress):第一部分是历史沿革和硬件架构;第二部分是软件界面和U

    2022年6月20日
    32

发表回复

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

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