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


相关推荐

  • pycharm中python interpreter怎么设置_pycharm显示interpreter

    pycharm中python interpreter怎么设置_pycharm显示interpreter1.File–》Settings–》Project—-》ProjectInterpreter—》ShowAll(下拉列表中选择)2.点击加号+ —-&gt;SystemInterpreter(一定要选择这个阿)–点击OK即可3.备注下:不想要的版本点击减号-进行删除即可…

    2022年8月26日
    32
  • long转string java_java中Long类型转换为String类型的两种方法及区别

    long转string java_java中Long类型转换为String类型的两种方法及区别1、Long.ValueOf(“String”)返回Long包装类型数据包装类型:Byte,Integer,Short,Long,Boolean,Character,Float,Double等。2、Long.parseLong(“String”)返回long基本数据类型基本数据类型:byte,int,short,long,boolean,char,float,double等。注意事项:1、字符串内…

    2022年5月14日
    102
  • LR测试心得

    LR测试心得

    2021年9月8日
    42
  • 符合python命名规范的标识符是什么_Python标识符命名规范

    符合python命名规范的标识符是什么_Python标识符命名规范简单地理解,标识符就是一个名字,就好像我们每个人都有属于自己的名字,它的主要作用就是作为变量、函数、类、模块以及其他对象的名称。Python中标识符的命名不是随意的,而是要遵守一定的命令规则,比如说:大理石平台生产厂标识符是由字符(A~Z和a~z)、下划线和数字组成,但第一个字符不能是数字。标识符不能和Python中的保留字相同。有关保留字,后续章节会详细介绍。Python中的标识符中,…

    2022年6月25日
    28
  • 序列号生成-模拟windows office序列号[通俗易懂]

    序列号生成-模拟windows office序列号[通俗易懂]最近看到office2013在提示过期问题(升级win10后遗症),就想到模拟下office的激活码。~~起初想到应该简单,最后越试越复杂。所以就记录下,毕竟花费了时间。packagetest;importjava.util.ArrayList;importjava.util.List;importjava.util.Random;publicclas

    2022年10月22日
    2
  • Mac下Ant安装「建议收藏」

    Mac下Ant安装「建议收藏」首先进入Ant官网(http://ant.apache.org/bindownload.cgi)下载Ant:(本人的默认下载在/User/xx/Download)正常安装过程:1:sudosh(会提示你输入当前用户的密码)2:cp/User/xx/Download/apache-ant.1.9.4-bin.zip/usr/local(拷贝ant压缩包到/user/local目录下)3:c

    2022年7月25日
    19

发表回复

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

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