JS_单个或多个文件上传_不支持单独修改

A-From表单直接填写提交地址,不过干预:

1. 单文件上传

最简单的文件上传,是单文件上传,form标签中加入enctype="multipart/form-data",form表单中有一个input[type="file"]项

<form name="form1" method="post" action="/abc.ashx" enctype="multipart/form-data">
<input type="text" name="user" id="user" placeholder="请输入昵称">
<input type="file" name="userImage" id="userImage">
<input type="submit" name="sub" value="提交">
</form>

2. 多文件上传

  1)类似单文件上传,简单的多文件上传其实就是多几个input[type="file"]项

<form name="form1" method="post" action="/abc.php" enctype="multipart/form-data">
<input type="text" name="user" id="user" placeholder="请输入昵称">
<input type="file" name="userImage1" id="userImage1">
<input type="file" name="userImage2" id="userImage2">
<input type="file" name="userImage3" id="userImage3">
<input type="submit" name="sub" value="提交">
</form>

  2) HTML5为表单文件项新增了一个multiple属性,可以设置实现选择多个文件,如

<form name="form1" method="post" action="/abc.php" enctype="multipart/form-data">
<input type="text" name="user" id="user" placeholder="请输入昵称">
<input type="file" name="userImage" id="userImage" multiple>
<input type="submit" name="sub" value="提交">
</form>

 

B-JS处理提交:

  1-ajax:

$.ajax({    url : "http://localhost:8080/STS/rest/user",    type : "POST",    data : $( '#postForm').serialize(),    success : function(data) {    $( '#serverResponse').html(data);    },    error : function(data) {    $( '#serverResponse').html(data.status   " : "   data.statusText   " : "   data.responseText);    }    
});   

  2-ajax通过FormData:

$.ajax({url: '/upload',type: 'POST',cache: false,data: new FormData($('#uploadForm')[0]),processData: false,contentType: false
}).done(function(res) {
}).fail(function(res) {});

  3-jquery.form.js:

 需引用jquery.form.js文件

window.OrderComplaintCache.$formMessage.attr("action", "/ajax/usercenterHandler.js?action=complaintorder");
window.OrderComplaintCache.$formMessage.ajaxSubmit(function (json) {var data = null;try {data = JSON.parse(json);} catch (e) {data = new Function("return "   json   "")();}var code = data.code;//$(":text,textarea").val("");if (code > 0) {alert(window.UserCenterMsg.orderComplaintSentSuccessMessage);} else {alert(data.message);return;}location.href = location.href;});

 

参考资料:

http://www.jb51.net/article/93935.htm

https://www.cnblogs.com/zhuxiaojie/p/4783939.html

http://blog.csdn.net/inuyasha1121/article/details/51915742

http://blog.csdn.net/legendaryhe/article/details/74140171

http://blog.csdn.net/LCRxxoo/article/details/70891533


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/365495.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一些算法学习的推荐博文阅读(数论居多,图论没有)

上面是自己的学习笔记&#xff0c;下面是推荐博文阅读 关于每个知识点的阅读顺序若不加序号一般是并列的&#xff0c;有序号的话一般是推荐看&#xff08;当然一知半解的话可以从头看起也可以从中间开始&#xff09; 另外&#xff0c;有的链接放在推荐的下面了 另另外&#xff…

scipy是python下的什么_SciPy是什么

SciPy是一个开源的Python算法库和数学工具包。 SciPy包含的模块有最优化、线性代数、积分、插值、特殊函数、快速傅里叶变换、信号处理和图像处理、常微分方程求解和其他科学与工程中常用的计算。SciPy 是一个开源的 Python 算法库和数学工具包。 SciPy 包含的模块有最优化、线…

解码Java.Lang.OutOfMemoryError:PermGen空间

Java开发人员最不了解的领域之一是垃圾收集。 Java开发人员认为JVM负责垃圾收集&#xff0c;因此他们不必担心内存分配&#xff0c;释放等问题。但是&#xff0c;随着应用程序变得越来越复杂&#xff0c;垃圾收集也会变得越来越复杂&#xff0c;一旦性能变得复杂&#xff0c;性…

Python_报错:IndexError: list assignment index out of range

今天发现一个报错&#xff0c;卡了好几个点&#xff0c;后来发现原因后&#xff0c;脸上三条黑线&#xff0c;尴尬啊&#xff01;&#xff01;&#xff01; 报错&#xff1a;IndexError: list assignment index out of range 原因&#xff1a;split()写法转成列表就会认作一个整…

mysql跨服务器查询插入_Oracle跨服务器查询插入数据

想实现insert into 当前库表 select 远程库中的表数据这种方式的数据同步&#xff0c;于是配置了一下oracle服务&#xff0c;远程和本地服务都是oracle 一、在当前库中插入数据 1 2 create public database link remotedb connect to username identified by password using db…

angular-JS模仿Form表单提交

直接上示例代码&#xff0c;有不懂的欢迎留言&#xff1a; $http({url: "http://localhost:10086/yuanxin/Conference/ImportExcelDataForBusRoute",method: Post,headers: {Content-Type: multipart/form-data },data: { BusRoute: file, ConferenceID: "1&…

想要更快地使用AtomicLong? 等待它。

我经常听到Java原子类型&#xff08;java.util.concurrent.atomic&#xff09;超级快&#xff0c;可以很好地与高度并发的代码一起使用。 在大多数情况下&#xff0c;原子以健壮和高效的方式发挥作用。 但是&#xff0c;在某些情况下&#xff0c;原子类型上非托管争用的隐藏成本…

994. 腐烂的橘子

994. 腐烂的橘子 在给定的网格中&#xff0c;每个单元格可以有以下三个值之一&#xff1a; 值 0 代表空单元格&#xff1b;值 1 代表新鲜橘子&#xff1b;值 2 代表腐烂的橘子。每分钟&#xff0c;任何与腐烂的橘子&#xff08;在 4 个正方向上&#xff09;相邻的新鲜橘子都会腐…

python爬虫简历范文_爬虫数据解析,简历模板下载!想收我Q,不存在的!

目标网址代码基础代码&#xff1a;第一页模板下载import requestsfrom lxml import etreeif __name__ __main__:headers {User-Agent: Mozilla / 5.0(Windows NT 6.1; Win64; x64) AppleWebKit / 537.36(KHTML, like Gecko) Chrome / 86.0.4240.198 Safari / 537.36}# 免费下…

java获取页面标签_java获取网页源代码后,提取标签内容……

java获取网页源代码后&#xff0c;提取标签内容……关注:245 答案:2 mip版解决时间 2021-02-01 09:11提问者咏b琂败2021-01-31 13:49import java.io.BufferedReader;import java.io.InputStream;import java.io.InputStreamReader;import java.io.PrintWriter;import java.ne…

C#数字,日期格式化:String.Format

C#:String.Format数字格式化输出 int a 12345678; //格式为sring输出// Label1.Text string.Format("asdfadsf{0}adsfasdf",a);// Label2.Text "asdfadsf"a.ToString()"adsfasdf";// Label1.Text string.Format("asdfadsf{0:C}adsfasdf…

jquery中点击切换的实现

项目中经常会遇到一种情况&#xff0c;就是点击切换&#xff0c;比如点击按钮&#xff0c;div样式为1&#xff0c;再点击一下按钮&#xff0c;div样式为2&#xff0c;再点击一下按钮&#xff0c;div样式为1。需要自定义jQuery方法toggle。 // toggle方法$.fn.toggle function(…

Spring Data MongoDB级联保存在DBRef对象上

默认情况下&#xff0c; Spring Data MongoDB不支持对带有DBRef注释的引用对象的级联操作&#xff0c;如引用所述 &#xff1a; 映射框架不处理级联保存 。 如果更改了Person对象引用的Account对象&#xff0c;则必须单独 保存 Account对象。 在Person对象上调用save 不会自动…

BZOJ4061/Gym100624F CERC2012 Farm and Factory 最短路、切比雪夫距离

传送门——BZOJCH 传送门——Vjudge 设\(f_i\)表示\(i\)到\(1\)号点的最短距离&#xff0c;\(g_i\)表示\(i\)到\(2\)号点的最短距离&#xff0c;\(s_i\)表示\(n1\)号点到\(i\)号点的最短距离&#xff0c;\(As_1,Bs_2\) 根据最短路三角形不等式&#xff0c;\(|f_i - A| \leq s_i…

scrapy安装_爬虫框架Scrapy简介与安装

Scrapy 框架Scrapy是用纯Python实现一个为了爬取网站数据、提取结构性数据而编写的应用框架&#xff0c;用途非常广泛。框架的力量&#xff0c;用户只需要定制开发几个模块就可以轻松的实现一个爬虫&#xff0c;用来抓取网页内容以及各种图片&#xff0c;非常之方便。Scrapy 使…

前端面试题(附上自己的回答)

一些开放性题目 1.自我介绍&#xff1a;除了基本个人信息以外&#xff0c;面试官更想听的是你与众不同的地方和你的优势。 2.项目介绍&#xff1f; 3.如何看待前端开发&#xff1f; 4.平时是如何学习前端开发的&#xff1f; 5.未来三到五年的规划是怎样的&#xff1f; position…

汇编语言的基础知识

汇编语言是在硬件上工作的编程语言&#xff0c;我们需要了解硬件系统的结构&#xff0c;才能有效的用汇编语言对其进行编程。 一&#xff1a;汇编语言的组成 1&#xff09;汇编指令&#xff1a;机器码的助记符&#xff0c;有对应的机器码。 2&#xff09;伪指令&#xff1a;没有…

亚马逊Simple Worklfow服务的骆驼演示

在上一篇文章中&#xff0c;我解释了为什么AWS SWF服务很好&#xff0c;并宣布了新的Camel SWF组件。 现在&#xff0c;组件文档已准备就绪&#xff0c; 这是一个简单的完全可用的演示。 它包含三个独立的独立骆驼路线&#xff1a; 工作流生产者允许我们与工作流进行交互。 它…

CODEVS 1205 单词反转

嗯.... 这道题看起来挺像一个字符串的题&#xff0c;但其实却错了&#xff0c;它实质上却用了一个栈进行了一个模拟&#xff08;当然还有一种鬼畜的做法&#xff0c;下面也会介绍到..... 首先先看题&#xff1a; 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 青铜 Bronze 题…

python 定义函数为什么有个长线_关于格式化:如何在Python中打破这条长线?

如何设置这样的长行格式&#xff1f;我想让它的宽度不超过80个字符&#xff1a;logger.info("Skipping {0} because its thumbnail was already in our system as {1}.".format(line[indexes[url]], video.title))这是我最好的选择吗&#xff1f;url "Skipping …