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);
});

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • win7下虚拟显示器完成记(virtual monitor)——VDI显卡透传场景「建议收藏」

    win7下虚拟显示器完成记(virtual monitor)——VDI显卡透传场景「建议收藏」背景本次使用wddm过滤驱动的应用场景是VDIGPU透传场景,我这边运用WDDM过滤驱动,也有人叫wddmhook,主要有如下功能:(1)给透传显卡虚拟出一个显示器,因为透传显卡都是插在服务器上,一台服务器需要插十几张显卡(消费级显卡),不可能给每个显卡插一个显示器,不插显示器又会存在分辨率无法设置,分辨率过低的问题,为此需要自己虚拟一个显示器“插”在透传显卡上。(2)我们VDI使…

  • JDBC连接ORACLE的三种URL格式

    JDBC连接ORACLE的三种URL格式使用jdbc连接oracle时url有三种格式格式一:OracleJDBCThinusinganSID:jdbc:oracle:thin:@host:port:SIDExample:jdbc:oracle:thin:@localhost:1521:orcl这种格式是最简单也是用得最多的你的oracle的sid可以通过一下指令获得:sqlplus/assys

  • kali 目录扫描_kali扫描命令

    kali 目录扫描_kali扫描命令1、简介dirsearch是一个基于python3的命令行工具,常用于暴力扫描页面结构,包括网页中的目录和文件。相比其他扫描工具disearch的特点是:支持HTTP代理多线程支持多种形式的网页(asp,php)生成报告(纯文本,JSON)启发式检测无效的网页递归扫描用户代理随机化批量处理扫描器与字典(注:字典必须是文本文件)2、下载及安装GitHub的下载地址为:https://github.com/maurosoria/dirsearchWindows10安装方式点击c

  • 常用的一些vscode前端插件

    常用的一些vscode前端插件前端常用插件

  • webstorm好用的插件_谷歌浏览器插件推荐

    webstorm好用的插件_谷歌浏览器插件推荐安装插件codeglance可以实现VSCode的右侧小地图

  • UltraEdit正则表达式替换空行

    UltraEdit正则表达式替换空行前提是,使用unix正则表达式,替换1、使用正规的正则表示式来提换,表达式为:^[\t]*\r\n2、如果第一种方式无法实现,直接在文本中复制空行,然后在替换时使用下面的正则表达式:^复制的内容

发表回复

您的电子邮箱地址不会被公开。

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