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

Jquery如何实现跨域异步上传文件

jquery 2022-10-19 02:10:28 569人浏览 安东尼
摘要

这篇文章主要为大家展示了“Jquery如何实现跨域异步上传文件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Jquery如何实现跨域异步上传文件”这篇文章吧。先

这篇文章主要为大家展示了“Jquery如何实现跨域异步上传文件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Jquery如何实现跨域异步上传文件”这篇文章吧。

先说明白

这个跨域异步上传功能我们借助了Jquery.fORM插件,它在异步表单方面很有成效,而跨域我们会在Http响应头上添加access-control-allow-method,当然这个头标记只有IE10,火狐和谷歌上支持,对于IE10以下的浏览器来说,我们就不能用这种方式了,我们需要换个思路去干这事,让服务端去重写向我们的客户端,由客户端(与文件上传页面在同域下)来返回相关数据即可。

1、Jquery.form的使用

<form method="post" action="http://127.0.0.1:801/Home/UploadResult" enctype="multipart/form-data" id="form1">
  <input name="qdctvfile" id="qdctvfile11" type="file" onchange="eventStart()">
</form>
<script type="text/javascript">
  $("#form1").ajaxForm({
    beforeSerialize: function () {
      var filepath = $("#qdctvfile11").val()
      var extStart = filepath.lastIndexOf(".");
      var ext = filepath.substring(extStart, filepath.length).toUpperCase();
      if (ext != ".PNG" && ext != ".JPG") {
        alert("图片仅支持png,jpg格式");
        $("#qdctvfile11").val("");
        return false;
      }
    },
    success: function (data) {
      alert(data);
    }
  });
  function eventStart(obj) {
    $("#form1").submit();
  }

注意,代码中的eventStart方法是指在选择文件后,自动提交表单,而ajaxForm表示提交表单为异常方式,success回调方法是指异步返回表单地址的返回值。

2 跨域的初步实现

解决域访问,我们可以在服务端的响应头上添加Access-Control-Allow-Origin和Access-Control-Allow-Methods两个特性即可,这些特性在IE10以下的浏览器不被支持,很是郁闷。

  /// <summary>
  /// mvc模式下跨域访问
  /// </summary>
  public class MvcCorsAttribute : ActionFilterAttribute
  {
    public override void OnActionExecuting(ActionExecutinGContext filterContext)
    {
      Dictionary<string, string> headers = new Dictionary<string, string>();

      headers.Add("Access-Control-Allow-Origin", "*");
      headers.Add("Access-Control-Allow-Methods", "*");
      foreach (var item in headers.Keys)
      {
        filterContext.RequestContext.HttpContext.Response.Headers.Add(item, headers[item]);
      }

      base.OnActionExecuting(filterContext);
    }
  }

注意,在生产环境下,我们的Access-Control-Allow-Origin应该是指定合法的域名的,*表示对所以网站都开放访问,这是危险的。

3 解决IE10以下不能跨域的问题

对于IE浏览器确实没法说了,虽然很喜欢微软的东西,但对于IE来说,我只能是NO,我真不想过多的去谈论它,先看看IE实现跨域上传的解决思想:由客户端不直接返回数据,而是重写向到客户端的callback地址,由callback像ajaxForm方法返回最终的数据,这样就解决了直接的跨域问题了。

/// <summary>
    /// 第三方的服务端
    /// </summary>
    /// <param name="name"></param>
    /// <returns></returns>
    [HttpPost]
    public ActionResult UploadResult()
    {
      string data = "{'code':'OK','thumpImgUrl':'http://127.0.0.1/images/1.jpg'}";
      return Redirect("http://localhost:9497/Home/UploadCallback?data=" + data);
    }

    /// <summary>
    /// 可能是服务端来调用它
    /// </summary>
    /// <returns></returns>
    public ActionResult UploadCallback(string data)
    {
      return Content(data);
    }

有些时候,我们在想一个问题的解决方法时,如果一条路走不通过,可以换换思路,也许会有意外的收获!

有人问,这块使用POST方式在服务端与客户端进行数据传递可以不可以,大叔说:不可以,因为POST在提交到客户端后,客户端处理,然后还是把结果返回给服务端,最后服务端再把结果返回给ajaxform,这还是又回到了开始的跨域问题,哈哈!

Jquery如何实现跨域异步上传文件

Jquery如何实现跨域异步上传文件

以上是“Jquery如何实现跨域异步上传文件”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网JavaScript频道!

--结束END--

本文标题: Jquery如何实现跨域异步上传文件

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

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

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

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

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

  • 微信公众号

  • 商务合作