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与系统信息相关的DOS命令

    首先,以管理员身份打开CMD命令框, 输入 start msinfo32:回车之后,出现一个弹窗,上面有大部分的系统信息:系统版本,电脑名称,BIOS,CPU,内存等: wmic bios:显示BIO ...

  2. 【python-appium】appium 关键字

    Appium 服务关键字 关键字 描述 实例 automationName 你想使用的自动化测试引擎 Appium (默认) 或 Selendroid platformName 你要测试的手机操作系统 ...

  3. 程序员基层知识程序与cpu【更新1】

    我是一个小白,但我通过学习我慢慢的懂了一些事.分享出来有错误的望大咖指导. 我们要很明确的明白我们学的是编程而不是编程语言,编程语言只是工具用来方便我们做很多编程有关的事. 首先我在学习的过程中,第一 ...

  4. Smokeping安装部署

    稳定性检测工具smokeping安装配置和使用方法 Smokeping介绍 是对IDC网络质量,稳定性等最好的检测工具,包括常规的 ping,dig,echoping,curl等,可以监视www服务器 ...

  5. Visual Studio 常见的快捷键

    “Ctrl + -”               回到上一个光标位置 “Ctrl + Shift + -”                前进到下一个光标位置 “Ctrl + C”           ...

  6. 在码云(gitee)上展开程序类课程教学

    码云主要提供了源代码管理(Git/SVN)功能,最近又推出了高校版让普通老师也能利用起来以供教学使用. 学生与老师不仅能利用其管理代码,更重要的是我们的程序教学能通过对git的使用来引入业界流行的软件 ...

  7. Photon自定义加载Resource之外的资源

    PhotonNetwork.cs 结尾添加如下代码: #region >>> Photon自定义异步加载GameObject public delegate void CustomL ...

  8. JavaScript工作体系中不可或缺的函数

    一.函数的概念 日常生活中,我们要完成一件事,总是习惯先有一个计划,后期按照计划,一步一步执行,则能够完成,并且达到一定效果实现一定的功能.在编程的世界里,“功能”可称呼为“函数”,因此“函数”即一段 ...

  9. Maven 项目打包出现错误 Failed to execute goal org.apache.maven.plugins:maven-resources-plugin

    今天碰到一个奇怪的问题,就是我在eclipse中使用maven命令:clean package 命令打完包之后,通过FlashFXP将jar包上传到Linux服务器后,由于其他原因,我想要修改下程序重 ...

  10. ajax&bootstrap

    1.ajax 后台 # 通过flask框架搭建后台 from flask import flask,request # 创建一个服务器对象 app = Flask(__name__) # 解决ajax ...