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 ...
随机推荐
- Jquery操作文档标签
1.插入动作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- retrofit+rxjava封装
public class RetrofitHelper { private static OkHttpClient okHttpClient; private static ServiceAPI se ...
- mac上terminal_问题_1117
(1)安装Homebrew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install ...
- 两台Linux机器传送文件
https://www.cnblogs.com/lianrenjujishou/p/5458206.html
- sqlserver 多行转一行
sql 例子: SELECT STUFF((SELECT ',' + CONVERT(VARCHAR, b.SCsinfoSourceId) FROM PZDataCsinfo b WHERE b.D ...
- HDFS基本架构及概念介绍
简单介绍 l 设计思想 分而治之:将大文件.大批量文件,分布式存放在大量服务器上,以便于采取分而治之的方式对海量数据进行运算分析: l 在大数据系统中作用: 为各类分布式运算框架(如:mapred ...
- C语言+嵌入式SQL+DB2开发经验总结
1.使用DB2工具将SQC文件预编译成C文件和bnd文件. 命令: db2 prep ***.sqc version * package using * bindfile BLOCKING ALL I ...
- La nuova tecnologia del puntatore laser
Il potente puntatore laser 20000 mW viene fornito di serie con gestione termica e driver laser di qu ...
- lua-01
ctrl + shift + L 多行编辑 ctrl + D 继续向下选中下一个相同的文本 Alt + F3 选中所有相同所选中德文本 =>Lua的快捷键 回调代码: function fact ...
- 一、Java和JavaScript
JavaScript诞生于1995年,所以他得叫我一声姐姐,(*^__^*) .当时它的主要任务就是表单验证,在还没JavaScript的时候,进行表单验证的时候必须要把数据提交到服务器,才能进行表单 ...