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_单个或多个文件上传_不支持单独修改的更多相关文章

  1. Nginx集群之WCF大文件上传及下载(支持6G传输)

    目录 1       大概思路... 1 2       Nginx集群之WCF大文件上传及下载... 1 3       BasicHttpBinding相关配置解析... 2 4       编写 ...

  2. ajaxfileupload多文件上传 - 修复只支持单个文件上传的bug

    搜索: jquery ajaxFileUpload AjaxFileUpload同时上传多个文件 原生的AjaxFileUpload插件是不支持多文件上传的,通过修改AjaxFileUpload少量代 ...

  3. 表单多文件上传样式美化 && 支持选中文件后删除相关项

    开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进 ...

  4. apache_fileupload实现文件上传_上传多个文件

    1.导包 核心类: DiskFileItemFactory – 设置磁盘空间,保存临时文件.只是一个具类. ServletFileUpload  - 文件上传的核心类,此类接收request,并解析r ...

  5. 考虑浏览器兼容的文件上传(IE8不支持FormData)

    方法一:使用FormData(因IE8不支持FormData, IE10才支持,因此此方法不兼容IE10以下的IE浏览器) 也可参考文章 http://www.jianshu.com/p/46e6e0 ...

  6. html多文件上传,可支持预览

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. django——文件上传_分页_ajax_富文本_celery

    上传文件 概述 当Django在处理文件上传时,文件的数据被存储在request.FILES属性中 FILES只有在请求的方法为POST且提交的form表单带有enctype="multip ...

  8. js_ajax模拟form表单提交_多文件上传_支持单个删除

    需求场景: 用一个input type="file"按钮上传多张图片,可多次上传,可单独删除,最后使用ajax模拟form表单提交功能提交到指定方法中: 问题:由于只有一个file ...

  9. 简单原始的ASP.NET WEBFORM中多文件上传【参考其他资料修改】

    首先是ASPX页面中添加file标签 <input onclick="addFile()" type="button" value="增加&qu ...

随机推荐

  1. Exp3 免杀原理与实践 20154320 李超

    基础知识 如何检测出恶意代码 基于特征码的检测:分析指令的统计特性.代码的结构特性等.如果一个可执行文件(或其他运行的库.脚本等)拥有一般恶意代码所通有的特征(开启后门等)则被认为是恶意代码 启发式恶 ...

  2. php中的冒泡排序和选择排序d

    //冒泡算法 //定义一个数组  $arr=arr{2,5,1155,3,8}; $len=count($arr); for($i=0;$i<$len-1;$i++) //定义以下需要宣传的次数 ...

  3. (1)selenium-java环境搭建

    已经学过了用python模拟浏览器操作,现在开始尝试使用java搭建环境,开头第一步就遇到了很多的问题 1.准备jdk安装,不再描述,自行百度 2.安装eclipse 3.接下来就是新建项目了,new ...

  4. 在windows上安装VTK

    看了很多教程,花了1天半的时间装上了,记录下. 前置条件:我安装了VS2015,用来编译工程. 参考资料 官方:http://www.vtk.org/Wiki/VTK/Building 安装:http ...

  5. python猜数字GUI版本V0.2

    使用类方式编写猜数字游戏GUI版本. 思路:初始化数字以及初始化wegdits,编写button click event判断代码的函数,每猜一次点击button调用一次该函数,并计算猜的次数.如果猜对 ...

  6. C# 自动程序 windows 无法启动 XXXX 服务 错误5 拒绝访问

    遇到过两次 这样的问题了,所以记录一下 原因可能是服务所在文件的目录权限不够 解决方法: 1是查看服务对应的程序所在的目录 2是设置目录的安全权限 右击–属性–安全–添加相应的帐号,给予除完全控制外的 ...

  7. 【每日一点】1. Java如何实现导出Excel单表头或多表头

    一.背景 在后台项目中,经常会遇到将呈现的内容导出到Excel的需求,通过都是导出单个表头的Excel文件,如果存在级联关系的情况下,也就需要导出多表头的场景.今天这篇文章就是分享导出Excel单表头 ...

  8. 使用Sybmol模块来构建神经网络

    符号编程 在之前的文章,我们介绍了NDArray模块,它是MXNet中处理数据的核心模块,我们可以使用NDArray完成非常丰富的数学运算.实际上,我们完全可以使用NDArray来定义神经网络,这种方 ...

  9. Docker系列教程26-Docker Compose控制服务启动顺序

    作者:周立 在生产中,往往有严格控制服务启动顺序的需求.然而Docker Compose自身并不具备该能力.要想实现启动顺序的控制,Docker Compose建议我们使用: wait-for-it ...

  10. 14.不同条目的listview

    分类界面 整个项目的逻辑就是这样的 CategoryInfo  public class CategoryInfo { private String title; private String url ...