广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Jquery实现异步上传文件
  • 287
分享到

Jquery实现异步上传文件

2024-04-02 19:04:59 287人浏览 独家记忆
摘要

本文实例为大家分享了Jquery实现异步上传文件的具体代码,供大家参考,具体内容如下 一、参数说明 1、contentType:(默认: "application/x-ww

本文实例为大家分享了Jquery实现异步上传文件的具体代码,供大家参考,具体内容如下

一、参数说明

1、contentType:(默认: "application/x-www-fORM-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个content-type给 $.ajax() 那么他必定会发送给服务器(即使没有数据要发送)。

2、processData:(默认: true) 默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。

3、FormData:XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过javascript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件。

二、html代码

<form action="upload.do" id="upForm" method="post" enctype="multipart/form-data">
<table id="table_report" class="table table-striped table-bordered table-hover">
    <tr>
        <td>批量文件:</td>
        <td><input type="file" name="myfile"></td>
    </tr>
    <tr>
        <td><button type="button" id="saveBtn" class="btn btn-primary">提交</button></td>
    </tr>
</table>
</form>

三、Jquery上传文件代码

var uploading = false;
if(uploading){
    bootbox.alert("文件正在上传中,请稍候!");
    return false;
}
$.ajax({
    url:"upload.do",
    type: "POST",//方法类型
    cache : false,//
    processData: false,
    contentType: false,
    dataType:"JSON",
    //data:$('#upForm').serialize(),
    data: new FormData($('#upForm')[0]),
    beforeSend: function(){
        uploading = true;
        console.log(uploading);
    },
    success: function(data){
        var json=eval('(' + data + ')');
        if(json.result=="success"){
            bootbox.alert("操作成功!");
        }else{
            bootbox.alert(json.msg);
        }
        uploading = false;
    },error:function(){
        bootbox.alert("请求失败!");
    }
});

四、Java后台代码

@RequestMapping(value="/upload",method = RequestMethod.POST)
@ResponseBody
public String upfile(@RequestParam("myfile")MultipartFile myfile,
    MultiparthttpservletRequest request) {
    logger.info("===上传文件===");
    Map<String, String> map = new HashMap<String, String>();
    if (request.getContentLength() > 0) {
        String fileName = myfile.getOriginalFilename();
        InputStream inputStream = null;
        inputStream = myfile.getInputStream();
        //TODO拿这inputstream,可以随心所欲了
    } 
} 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: Jquery实现异步上传文件

本文链接: https://www.lsjlt.com/news/164276.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Jquery实现异步上传文件
    本文实例为大家分享了Jquery实现异步上传文件的具体代码,供大家参考,具体内容如下 一、参数说明 1、contentType:(默认: "application/x-ww...
    99+
    2022-11-13
  • jQuery中jQuery-form.js如何实现异步上传文件
    这篇文章将为大家详细讲解有关jQuery中jQuery-form.js如何实现异步上传文件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、举个栗子1.先下载 JQuer...
    99+
    2022-10-19
  • Jquery如何实现跨域异步上传文件
    这篇文章主要为大家展示了“Jquery如何实现跨域异步上传文件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Jquery如何实现跨域异步上传文件”这篇文章吧。先...
    99+
    2022-10-19
  • struts1和jquery form如何实现文件异步上传
    这篇文章主要介绍struts1和jquery form如何实现文件异步上传,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1.概述还在用struts1?是的,在地球的没写地方,落后的生...
    99+
    2022-10-19
  • 怎么使用Jquery插件实现跨域异步上传文件功能
    这篇文章主要介绍“怎么使用Jquery插件实现跨域异步上传文件功能”,在日常操作中,相信很多人在怎么使用Jquery插件实现跨域异步上传文件功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么使用Jquer...
    99+
    2023-07-04
  • html5如何实现文件异步上传
    这篇文章主要为大家展示了“html5如何实现文件异步上传”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“html5如何实现文件异步上传”这篇文章吧。1 简介开发文...
    99+
    2022-10-19
  • Ajax如何实现异步上传文件
    这篇文章将为大家详细讲解有关Ajax如何实现异步上传文件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体代码如下所示:<!DOCTYPE html>...
    99+
    2022-10-19
  • AjaxFileUpload.js实现异步上传文件功能
    AjaxFileUpload.js是一个用于实现异步上传文件的JavaScript库。它基于XMLHttpRequest对象实现文件的异步上传,可以在不刷新页面的情况下将文件上传到服务器。使用AjaxFileUpload.js需要引入相...
    99+
    2023-08-09
    js
  • JS中如何实现异步文件上传
    这篇文章将为大家详细讲解有关JS中如何实现异步文件上传,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在非html5的情况下是无法用ajax把文件推送到后端的,只能通过fo...
    99+
    2022-10-19
  • html中如何实现异步上传文件
    这篇文章将为大家详细讲解有关html中如何实现异步上传文件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。   代码如下:   <formaction="...
    99+
    2022-10-19
  • jquery中的ajax异步上传实例
    这篇文章主要讲解了“jquery中的ajax异步上传实例”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery中的ajax异步上传实例”吧!ajaxfi...
    99+
    2022-10-19
  • Html5如何实现文件异步上传功能
    这篇文章主要介绍Html5如何实现文件异步上传功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1 简介开发文件上传功能从来不是一件愉快的事,异步上传更是如此,使用过iframe和F...
    99+
    2022-10-19
  • JavaScript如何实现异步上传图片文件
    这篇文章将为大家详细讲解有关JavaScript如何实现异步上传图片文件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。html:<form action=...
    99+
    2022-10-19
  • Ajax如何实现表单异步上传文件
    这篇文章主要介绍Ajax如何实现表单异步上传文件,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1.起因做前台页面时,需要调用WebAPI的Post请求,发送一些字段和文件(相当于把表...
    99+
    2022-10-19
  • 如何使用Html5实现异步上传文件
    本篇内容主要讲解“如何使用Html5实现异步上传文件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用Html5实现异步上传文件”吧! 服务器准备IIS ...
    99+
    2022-10-19
  • ajax异步如何实现文件分片上传
    这篇文章主要介绍ajax异步如何实现文件分片上传,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!实例代码:<!DOCTYPE html><html lang="en&qu...
    99+
    2023-06-08
  • jquery+springboot实现文件上传功能
    本文实例为大家分享了jquery+springboot实现文件上传功能的具体代码,供大家参考,具体内容如下 前端 <!DOCTYPE html> <html l...
    99+
    2022-11-12
  • jquery中ajaxfileupload异步上传插件怎么用
    这篇文章主要为大家展示了“jquery中ajaxfileupload异步上传插件怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jquery中ajaxfil...
    99+
    2022-10-19
  • asp.net中表单上传功能如何实现ajax文件异步上传
    这篇文章主要为大家展示了“asp.net中表单上传功能如何实现ajax文件异步上传”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“asp.net中表单上传功能如何...
    99+
    2022-10-19
  • jquery中Form怎么实现文件上传
    这篇文章给大家分享的是有关jquery中Form怎么实现文件上传的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。①先是html<a href="javas...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作