JQuery异步提交表单与文件上传功能示例

2024-02-26 15:39:00

本文实例讲述了JQuery异步提交表单与文件上传功能。分享给大家供大家参考，具体如下：

Jquery.form.js是一个可以异步提交表单及上传文件的插件。

示例如下：

index.html

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <script type="text/javascript" language="javascript" src="js/jquery-1.10.2.js"></script>
  <script type="text/javascript" language="javascript" src="js/jquery.form.js"></script>
  <script type="text/javascript" language="javascript">
    $(function(){
      //异步提交表单
      $("#ajaxSubmit").on("click",function(){
        console.log($(this));
        $("#formToUpdate").ajaxSubmit({
          type:'post',
          url:'p.php',
          success:function(data){
            console.log(data);
          },
          error:function(XmlHttpRequest,textStatus,errorThrown){
            console.log(XmlHttpRequest);
            console.log(textStatus);
            console.log(errorThrown);
          }
        });
      });
    });
  </script>
</head>
<body>
<form id="formToUpdate" method="post" action="#" enctype="multipart/form-data">
  <input type="text" name="t1"><br />
  <input type="file" name="f1"><br />
  <input id="ajaxSubmit" type="button" value="异步提交">
</form>
</body>
</html>

p.php

<?php
/**
 * Created by JetBrains PhpStorm.
 * User: smeoi
 * To change this template use File | Settings | File Templates.
 */
echo '<pre>';
print_r($_POST);
echo '</pre>';
echo '<pre>';
print_r($_FILES);
echo '</pre>';

效果图：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery form操作技巧汇总》、《jQuery文件与目录操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery异步提交表单实例

前言: 我们在开发的时候,一定会使用ajax异步提交表单,在这里总结一下: 前提准备:引入脚本  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>  <script type="text/javascript&q
Jquery.Form 异步提交表单的简单实例

http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html# 1. 在你的页面里写一个表单.一个普通的表单,不需要任何特殊的标记: 复制代码代码如下: <form id="myForm" method="post" action="/Home/AjaxForm"><div>Name:<input id="username&qu
jQuery异步提交表单的两种方式

本文为大家分享了两种jQuery异步提交表单的方式,具体内容如下第一种方式:普通ajax方式提交 $(function(){ $('#send').click(function(){ $.ajax({ type: "GET", url: GLOBAL_PATH + "/Enterprise/savecompanyphoto", data: {username:$("#username").val(), content:$("#cont
jquery.form.js异步提交表单详解

本文实例为大家分享了jquery.form.js异步提交表单的具体代码,供大家参考,具体内容如下引入脚本: <script type="text/javascript" src="/js/jquery.form.min.js"></script> <script src="/js/json2.js"></script> //前端代码: <form id="f1">
Jquery异步提交表单代码分享

功能很实用代码也很简单,就不多废话了,直接奉上: $.ajax({ url:"mobileSurveyAction_addSurvey.action",//提交地址 data:$("#form1").serialize(),//将表单数据序列化 type:"POST", dataType:"json", success:function(result){ if (result.success == '100'){ $(&quo
jquery下异步提交表单异步跨域提交表单

1.使用post提交方式 2.构造表单的数格式 3.结合form表单的submit调用ajax的回调函数. 使用 jQuery 异步提交表单代码: 复制代码代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无标题页</title> </head> <script src="js/jquery-1.4.2.js">&l
JQuery异步提交表单与文件上传功能示例

本文实例讲述了JQuery异步提交表单与文件上传功能.分享给大家供大家参考,具体如下: Jquery.form.js是一个可以异步提交表单及上传文件的插件. 示例如下: index.html <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"
java通过模拟post方式提交表单实现图片上传功能实例

本文实例讲述了java通过模拟post方式提交表单实现图片上传功能.分享给大家供大家参考,具体如下: 模拟表单html如下: <form action="up_result.jsp" method="post" enctype="multipart/form-data" name="form1" id="form1"> <label> <input type="tex
Ajax提交Form表单及文件上传的实例代码

前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Form表单上传有一段Json串和图片文件: Form表单上传图片只需要在<form>标签里加上enctype = 'multipart/form-data',这样是可以上传图片的: 但问题来了,在我进行用Form表单提交的时候直接跳出来提交返回值的页面并且原先的页面刷新: 这样我们可以先到异步的Ajax可以实现局部刷新: 废话不多说了直接上代码: 首先是html: <form id = "f
纯javascript的ajax实现php异步提交表单的简单实例

很多时候需要异步提交表单,当表单太多是时候,一个个getElementById变得很不实际当然,jquery可以实现异步提交表单,jquery.form.js这个库貌似也挺流行只是有时候并不想使用额外的库,所以就琢磨着自己写,用纯js来实现异步提交表单实现如下(本例用POST方式提交,用php作为服务器脚本) HTM L文件:test <html> <head> <script type="text/javascript" src="nam
JS实现表单多文件上传样式美化支持选中文件后删除相关项

开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进行完善. 本文根据一个例子,对多文件的上传样式做了一些简单的美化(其实也没怎么美化..),同时支持选择文件后自定义删除相关的文件,最后再上传文章篇幅较长,先简单看看图示: 一.文件上传基础 1. 单文件上传最简单的文件上传,是单文件上传,form标签中加入enctype="multipart/f

JQuery异步提交表单与文件上传功能示例

相关推荐

随机推荐