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

方法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 () {}
});

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

相关推荐

  • [硬件驱动] CAN接口

    [硬件驱动] CAN接口CAN接口的介绍:CAN总线可分为:高速CAN,低速CAN,单线CAN。1.在速度方面高速CAN的传输速率在125K~~1Mbps。低速CAN的速率在125Kbps以下,低速CAN具更好的容错性。2.这三种总线之间的最主要区别是物理层。以传输介质和线的数量说,单线CAN只需1条导线,低速容错CAN和高速CAN通过双绞线传输。还有电平的逻辑的区别,定义逻辑为1称作隐性,逻辑为0称作…

    2022年6月18日
  • nginx启动、重启、关闭

    方式一:传统方法一、启动  cdusr/local/nginx/sbin./nginx二、重启  更改配置重启nginx  kill-HUP主进程号或进程号文件路径或者使用cd/usr/local/nginx/sbin./nginx-sreload  判断配置文件是否正确 nginx-t-c/usr/local/nginx/conf/nginx.conf或者cd…

    2022年4月4日
  • 同学说年薪30w豆瓣_朋友圈集赞怎么写

    同学说年薪30w豆瓣_朋友圈集赞怎么写我们经常在朋友圈中看到有人发这样的消息:或者,许久不联系的好友突然发消息说:「帮忙朋友圈第一条点赞~谢谢~」这样的朋友圈消息屡见不鲜,他们无非是想兑换一些不值钱的小奖品,来满足自己「占便宜」的心理。你…

    2022年9月5日
  • 乐搏讲自动化测试 – Python基本数据类型(11)[通俗易懂]

    乐搏讲自动化测试 – Python基本数据类型(11)[通俗易懂]乐搏讲自动化测试 – Python基本数据类型(11)

    2022年4月22日
  • 快速排序quicksort_快速排序的原理

    快速排序quicksort_快速排序的原理一、简介快速排序是(Quicksort)是对冒泡排序的一种改进,是非常重要且应用比较广泛的一种高效率排序算法。二、算法思路快速排序是通过多次比较和交换来实现排序,在一趟排序中把将要排序的数据分成两个独立的部分,对这两部分进行排序使得其中一部分所有数据比另一部分都要小,然后继续递归排序这两部分,最终实现所有数据有序。大致步骤如下:首先设置一个分界值也就是基准值又是也称为监视哨,通过该分界值将数据分割成两部分。将大于或等于分界值的数据集中到右边,小于分界值的数据集中到左边。一趟排序过后,左边部

    2022年8月12日
  • 07 技术扩展-软件工程Server服务器知识点[通俗易懂]

    07 技术扩展-软件工程Server服务器知识点[通俗易懂]Web项目中的服务器一、Server概述为客户端提供各种服务的功能强大的计算机二、访问服务器服务器的地址—-域名/IP地址对应服务端口服务所用协议—-http/httpshttps://www.baidu.com:80/协议://域名:端口号/三、访问本地服务安装node.jsDOS命令窗口cddesktop/indexDOS命令…

    2022年9月5日

发表回复

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

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