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. 在原生Windows安装Keras

    既然要深入学习,就不能和时代脱节,所以选择了keras,资源相对比较丰富.由于Windows饱受歧视,各种文档都不推荐使用.但我又没有换系统的成本,所以还是凑合下,毕竟他们给出了方法,稍微折腾一下还是 ...

  2. RabbitMq相关

    RabbitMq 通过通过IP,Port等参数创建connection对象,然后实际上通信用的是channel,channel的建立基于connection RPC 调用: RPCClient通过ch ...

  3. window7 32位部署django

    window7 32位安装环境,所有的软件都用32位的,如果你想要用64位的软件需要操作系统和下面的相关软件都换成64位,我是在虚拟机上装了win7 32版做的测试. 软件下载地址: python2. ...

  4. jQuery-弹幕

    该方法可能有bug,毕竟简单粗暴 <!DOCTYPE html><html> <head> <meta charset="UTF-8"&g ...

  5. ByteArrayInputStream

    package org.example.io; import java.io.ByteArrayInputStream;import java.io.IOException; /** * ByteAr ...

  6. text-decoration:[ text-decoration-line ] || [ text-decoration-style ] || [ text-decoration-color ] 默认值:

    css3中字体装饰,多样化的界面效果,: [ text-decoration-line ]:指定文本装饰的种类.相当于CSS2.1的 text-decoration 属性, 可取值:none | un ...

  7. BCrypt加密算法

    用户表的密码通常使用MD5等不可逆算法加密后存储,为防止彩虹表破解更会先使用一个特定的字符串(如域名)加密,然后再使用一个随机的salt(盐值)加密. 特定字符串是程序代码中固定的,salt是每个密码 ...

  8. 控制页面打印的2种方法(css3的media媒体查询和window.print())

    在实际开发中,有时可能会有打印的需求.下面我总结了2种打印的方法,希望对各位小伙伴有所帮助. ①:直接用window.print()方法就可以打印整个页面,下面是一个小demo <!DOCTYP ...

  9. java后端服务器读取excel将数据导入数据库

    使用的是easypoi,官网文档:http://easypoi.mydoc.io/ /** * 导入Excel文件 */ @PostMapping("/importTeacher" ...

  10. 网页的异步请求(Ajax)

    JS原生Ajax操作(XMLHttpRequest) GET请求 var xmld=new XMLHttpRequest(); xmld.open("GET","wan. ...