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
JS_单个或多个文件上传_不支持单独修改的更多相关文章
- Nginx集群之WCF大文件上传及下载(支持6G传输)
目录 1 大概思路... 1 2 Nginx集群之WCF大文件上传及下载... 1 3 BasicHttpBinding相关配置解析... 2 4 编写 ...
- ajaxfileupload多文件上传 - 修复只支持单个文件上传的bug
搜索: jquery ajaxFileUpload AjaxFileUpload同时上传多个文件 原生的AjaxFileUpload插件是不支持多文件上传的,通过修改AjaxFileUpload少量代 ...
- 表单多文件上传样式美化 && 支持选中文件后删除相关项
开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进 ...
- apache_fileupload实现文件上传_上传多个文件
1.导包 核心类: DiskFileItemFactory – 设置磁盘空间,保存临时文件.只是一个具类. ServletFileUpload - 文件上传的核心类,此类接收request,并解析r ...
- 考虑浏览器兼容的文件上传(IE8不支持FormData)
方法一:使用FormData(因IE8不支持FormData, IE10才支持,因此此方法不兼容IE10以下的IE浏览器) 也可参考文章 http://www.jianshu.com/p/46e6e0 ...
- html多文件上传,可支持预览
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- django——文件上传_分页_ajax_富文本_celery
上传文件 概述 当Django在处理文件上传时,文件的数据被存储在request.FILES属性中 FILES只有在请求的方法为POST且提交的form表单带有enctype="multip ...
- js_ajax模拟form表单提交_多文件上传_支持单个删除
需求场景: 用一个input type="file"按钮上传多张图片,可多次上传,可单独删除,最后使用ajax模拟form表单提交功能提交到指定方法中: 问题:由于只有一个file ...
- 简单原始的ASP.NET WEBFORM中多文件上传【参考其他资料修改】
首先是ASPX页面中添加file标签 <input onclick="addFile()" type="button" value="增加&qu ...
随机推荐
- ubuntu安装苹果Windows以及微软雅黑consolas字体
ubuntu安装苹果Windows以及微软雅黑consolas字体 ubuntu安装苹果字体 wget http://drive.noobslab.com/data/Mac/macfonts.zip ...
- java性能分析工具
jcmd:向JVM发送诊断的命令,jvm未必会全部响应,有些需要在jvm开启相应功能才能响应.个人平时用的不是很多. SampleA: 添加 jcmd pid VM.native_mem ...
- dell T130服务器加内存
需求:客户一台dell T130塔式服务器,由于本机只有一条8G内存,系统运行比较慢,需要再增加一条8G内存. 增加过程:第一次增加时由于没有注意机器上内存频率是2133的,所以新增加的一条2400频 ...
- jquery validate 校验使用总结
一.jquery.validator表单验证id和name问题 因为后台是struts,表单提交,所有输入框的值保存在name=对象.名字中,而jquery.validator表单验证用的是name, ...
- git 团队开发常用操作流程(适用于 gogs、gitlab、github)
git 团队开发常用操作流程(适用于 gogs.gitlab.github) NO1 项目构建者 (1)在远程仓库创建仓库 (2)将伙伴添加到仓库合作者中(无先后要求) (2)cd 到项目将要存放项目 ...
- QEMU Networking
QEMU Networking QEMU has a number of really nice ways to set up networking for its guests. It can be ...
- 数值计算 的bug:(理论)数学上等价,实际运行未必等价
1. 计算表达式的值(lambda 表达式) fun1 和 fun2 理论上是等价的:同样的输入情形下,两种输出结果不一致. # fun1 定义 fun1=lambda x:sqrt(x+1)-sqr ...
- 【红色警报】XXE 高危漏洞将大面积影响微信支付安全,可能导致系统沦陷,请升级你的系统!
今天,微信支付发布了一则紧急通知: 尊敬的微信支付商户: 您的系统在接受微信支付XML格式的商户回调通知(支付成功通知.退款成功通知.委托代扣签约/解约/扣款通知.车主解约通知)时,如未正确地进行安全 ...
- [转]Kaldi语音识别
转:http://ftli.farbox.com/post/kaldizhong-wen-shi-bie Kaldi语音识别 1.声学建模单元的选择 1.1对声学建模单元加入位置信息 2.输入特征 3 ...
- Java中的NIO基础知识
上一篇介绍了五种NIO模型,本篇将介绍Java中的NIO类库,为学习netty做好铺垫 Java NIO 由3个核心组成,分别是Channels,Buffers,Selectors.本文主要介绍着三个 ...