首页 > 编程语言 >JAVASCRIPT 上传文件的几种方式

JAVASCRIPT 上传文件的几种方式

时间:2023-10-26 12:45:28浏览次数:42  
标签:function text formData JAVASCRIPT 几种 json file import 上传

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

  

标签:function,text,formData,JAVASCRIPT,几种,json,file,import,上传
From: https://www.cnblogs.com/pythonClub/p/17789153.html

相关文章

  • 开发实例:后端Java和前端vue实现文件上传和下载功能
    首先,在Java的后端代码中,我们可以使用Spring框架来实现文件上传和下载功能。以下是一个简单的示例:文件上传首先,我们需要在html页面上创建一个表单,其中包含一个file类型的输入字段:<formaction="/upload"method="POST"enctype="multipart/form-data"><inputtype=......
  • 必须使用构造函数初始化列表的几种情况
    C++中的普通成员变量可以在构造函数列表里初始化,也可以在构造函数中通过赋值初始化,但以下几种成员变量只能通过初始化列表进行初始化:1.非静态常量(non-staticconst)#include<iostream>usingnamespacestd;classTest{constintt;//C++11之后可以直接在定义后初......
  • Java - InputStream流Http客户端文件上传
    场景:两个系统文件服务不同,需从另外一个系统中下载文件并上传到另外一个系统中。代码实现//远程服务下载文件Responseresponse=fileCenterService.downloadFile(fileId);InputStreaminputStream=response.body().asInputStream();//调用接口上传到文件服务HttpClienth......
  • 【Java 进阶篇】JavaScript 正则表达式(RegExp)详解
    JavaScript正则表达式,通常简写为RegExp,是一种强大的文本匹配工具,它允许你通过一种灵活的语法来查找和替换字符串中的文本。正则表达式在编程中用途广泛,不仅限于JavaScript,在许多编程语言中也都有类似的实现。什么是正则表达式正则表达式,简称正则或RegExp,是一个用于描述字符模式......
  • 【Java 进阶篇】JavaScript Math对象详解
    在JavaScript编程中,Math对象是一个非常有用的工具,用于执行各种数学运算。它提供了许多数学函数和常数,可以用于处理数字、执行几何运算、生成随机数等。在本篇博客中,我们将深入探讨JavaScript中Math对象的各种功能和用法。什么是Math对象?Math对象是JavaScript的内置对象之一,它不需要......
  • 【Java 进阶篇】JavaScript 中的全局对象和变量
    JavaScript是一门非常强大的编程语言,它提供了许多全局对象和变量,以便于在整个应用程序中共享数据和功能。本文将详细介绍JavaScript中的全局对象和变量,包括全局对象、全局变量、全局函数以及它们的用途和示例。全局对象JavaScript中有一些全局对象,它们在整个应用程序中都可用。......
  • 【java基础-实战2】数组拷贝的几种实现方式
    在实际的业务开发中,基本上很少很少很少…会遇到数组拷贝的场景,甚至是我们一般都不怎么用数组,List它不香嘛,为啥要用数组。那么现在这个问题有点冷门,要实现数组拷贝,怎么办呢?1、基础写法:循环赋值最简单直接的写法,那就是新建一个数组,一个一个拷贝进去String[]src=newString[]{"a......
  • vue - 实现文件的上传-字节流下载详细过程
    前言这个需求一般是在有合同的地方用,首先不止一个地方用我们应该把他封装成一个简易的全局组件,上传的时候封装成全局组件,传2个值,一个合同id,一个开关,下载的时候调用接口获取文档流下载注意看下面的文件上传下载-细节有详细的过程和遇到的问题和解决方案效果图接口配置importreq......
  • python的requests发送/上传多个文件(转)
    原文:https://blog.csdn.net/five3/article/details/74913742作者:上帝De助手 1、需要的环境Python3.XRequests库2、单字段发送单个文件在requests中发送文件的接口只有一种,那就是使用requests.post的files参数,请求形式如下:url="http://httpbin.org/post"data=No......
  • C#中base关键字的几种用法
    base最大的使用就是“面向对象”开发的多态中。base可以对派生类(子类)实例中调用基类(父类)的构造函数方法或者基类上已经被重写的虚方法。首先声明两个类ABpublicclassA{publicA(){Console.WriteLine("我是父类A");}......