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


相关推荐

  • 钩子原理及实例:实现键盘钩子截获密码

    钩子原理及实例:实现键盘钩子截获密码钩子原理及实例:利用鼠标键盘钩子截获密码钩子原理 钩子能截获系统并得理发送给其它应用程序的消息,能完成一般程序无法完成的功能。Windows系统是建立在事件驱动的机制上的,也就是整个系统都是通过消息的传递来实现的。而钩子是Windows系统中非常重要的系统接口,用它可以截获并处理送给其他应用程序的消息,来完成普通应用程序难以实现的功能。钩子的种类很多,每种钩子可以截获并处

    2022年6月9日
    32
  • c语言hello world代码(代码编程入门)

    usingSystem;usingSystem.Collections.Generic;publicclassMyClass{ structName{ publicstringFirstName; publicstringLastName; publicstringGetName(){ returnFirstName+”·”+LastName; } } structVector3{ publicfloatx;

    2022年4月15日
    187
  • TensorFlow2迁移学习实战(九):搭建残差网络ResNet-101,实现对花的精准分类

    TensorFlow2迁移学习实战(九):搭建残差网络ResNet-101,实现对花的精准分类快速训练残差网络ResNet-101,完成图像分类与预测,精度高达98%!

    2022年10月7日
    2
  • 对数似然值 matlab,matlab aic准则 怎么计算对数似然值

    对数似然值 matlab,matlab aic准则 怎么计算对数似然值匿名用户1级2016-11-22回答BIC需要三个inputs(LLF,numParams,numObs)*******************%AICBICAkaikeandBayesianinformationcriteriaformodelorderselection.%modelsoftheconditionalmeanandvariance…

    2022年5月23日
    53
  • Okgo「建议收藏」

    GET请求publicvoidgetString(){OkGo.<String>get(“http://www.qubaobei.com/ios/cf/dish_list.php?stage_id=1&limit=20&page=1”).execute(newStringCallback(){@Override…

    2022年4月12日
    37
  • Linux操作系统面试题(linux系统基础面试题)

    后续会继续补充~~~实际找工作过程中,因为公司或单位侧重点不一样,考察的知识也是不尽相同的,但是作为计算机类的学生,操作系统的知识也是必不可少的,去年参加笔试面试的时候,腾讯微软阿里等公司的笔试题都或多或少对操作系统相关的知识点进行了考察。作为一个非计算机科班出生的学僧,当初并没有学这门课,略尴尬,只有临时啃书补一补了,这里给出的是一份操作系统常考知识点的总结,希望能给大家带

    2022年4月12日
    48

发表回复

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

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