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

更多专业前端知识，请上【猿2048】www.mk2048.com

JS_单个或多个文件上传_不支持单独修改相关推荐

CI在mimes.php添加对apk文件上传下载的支持
CI在mimes.php添加对apk文件上传下载的支持 'apk' => array('application/x-zip', 'application/zip', 'application/x ...
想说爱你不容易 | 使用最小 WEB API 实现文件上传（Swagger 支持）
前言上回,我们使用最小 WEB API 实现文件上传功能(<想说爱你不容易 | 使用最小 WEB API 实现文件上传>),虽然客户端访问是正常的,但是当打开 Swagger 页面时,发 ...
文件上传--单个或多个文件上传
单个文件上传第一种方法: /*** * @param file 需要上传的文件* @param baseUrl 上传地址* @param uploadName 上传文件如果要更改文件名称,该字段为要 ...
part实现实现单个（上传图片和文件上传）
不用架包,但是需要添加一个注解. @MultipartConfig // 获取到上传的文件Part part = req.getPart("vimg");// 获取到文件名Stri ...
jsp文件上传_猿蜕变系列7——也说说springMVC上传姿势
看过之前的蜕变系列文章,相信你对springMVC有了一定的认识.对springMVC的异常处理,也有了一定的认识.今天我们来开启新讨论,讲一讲web开发中会经常遇到的一个功能,文件上传. 猿蜕变同样 ...
apache_fileupload实现文件上传_上传多个文件
1.导包核心类: DiskFileItemFactory – 设置磁盘空间,保存临时文件.只是一个具类. ServletFileUpload - 文件上传的核心类,此类接收request,并解析r ...
大文件上传服务器：支持超大文件HTTP断点续传的实现办法
点击上方蓝色"方志朋",选择"设为星标"回复"666"获取独家整理的学习资料! 来源:blog.csdn.net/ababab12345/a ...
input file文件上传_微服务间的文件上传与下载-Feign
一.文件上传 (1)服务提供者使用一个MultipartFile接收上传的文件 /** (2)Feign的Client接口服务门面-feign的接口 pom.xml <dependencie ...
html 文件上传_某平台存在多处任意文件上传
文章来源: EDI安全 01 漏洞标题某平台存在多处任意文件上传 02 漏洞类型文件上传 03 漏洞等级中危 04 漏洞地址 http://xxxx.xxxxx.com/er.app.xxxx/ ...

JS_单个或多个文件上传_不支持单独修改

JS_单个或多个文件上传_不支持单独修改相关推荐

最新文章

热门文章