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 ...
随机推荐
- UML-Based Modeling of Robustness Testing
一.基本信息 标题:UML-Based Modeling of Robustness Testing 时间:2014 出版源:IEEE会议论文 领域分类:稳健性测试:UML测试Prole:UML Pr ...
- Linux-3.0.8中基于S5PV210的IRQ模块代码追踪和分析
init/main.c: asmlinkage void start_kernel(void) { ...... early_irq_init(); init_IRQ(); ...... } earl ...
- 阿里云Centos+Django+Nginx+uWSGI
针对系统中自带的Python2.7版本 1.安装python-devel yum install python-devel 2.安装uwsgi pip install uwsgi 3.测试uwsgi是 ...
- 关于CSS层叠机制
谈到层叠机制,首先我们要知道什么是声明冲突. 声明冲突有三个条件:①多个选择器选中同一个元素:②声明块里的属性相同:③属性的属性值不同.同时满足这三点时就会产生声明冲突.比如下图html代码: < ...
- lambada
一.动态创建 ParameterExpression parameter = Expression.Parameter(typeof(User), "u"); //创建委托 Mem ...
- Linux 区别 chown和chmod的用法
chown用法用来更改某个目录或文件的用户名和用户组的chown 用户名:组名 文件路径(可以是就对路径也可以是相对路径)例1:chown root:root /tmp/tmp1就是把tmp下的tmp ...
- 在windows上安装wamp时遇到apache无法启动,图标为橙色
1.首先测试端口号是否被占用,如果端口号被占用,修改相对应文件的端口号,修改端口号的方法网上很容易搜到. 2.如果端口号没有被占用,cd到httpd.exe目录下,查看错误原因,这里我显示的错误是ht ...
- RabbitMQ in Action(5): Clustering and dealing with failure
Batteries included: RabbitMQ clustering The clustering built in to RabbitMQ was designed with two go ...
- Windows 10 IoT Serials 10 – 如何使用OCR引擎进行文字识别
1. 引言 OCR (Optical Character Recognition,光学字符识别)是指电子设备(例如扫描仪或数码相机)检查纸上打印的字符,通过检测暗.亮的模式确定其形状,然后用字符识别方 ...
- Linux系统安装Mysql5.7
1.下载tar包,这里使用wget从官网下载 wget https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.22-linux-glibc2. ...