JS_单个或多个文件上传_不支持单独修改
2017-11-20 18:09
381 查看
A-From表单直接填写提交地址,不过干预:
1. 单文件上传
最简单的文件上传,是单文件上传,form标签中加入enctype="multipart/form-data",form表单中有一个input[type="file"]项
2. 多文件上传
1)类似单文件上传,简单的多文件上传其实就是多几个input[type="file"]项
2) HTML5为表单文件项新增了一个multiple属性,可以设置实现选择多个文件,如
B-JS处理提交:
1-ajax:
2-ajax通过FormData:
3-jquery.form.js:
需引用jquery.form.js文件
参考资料:
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
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_ajax模拟form表单提交_多文件上传_支持单个删除
- javascript构造可以上传文件的form表单(通过js修改enctype)
- 收藏个支持进度条与文件拖拽上传的js File Uploader
- js实现文件批量上传,支持ie firefox
- js 文件上传插件(支持上传进度信息)
- 【Node.js-5】multer的三种上传情况:单个文件,多个同名文件,多个不同名文件
- ajaxFileUpload.js插件支持多文件上传的方法
- jquery表单验证插件 jquery.form.js 支持文件上传~
- javascript构造可以上传文件的form表单(通过js修改enctype)
- 修改boa对单个上传文件大小的限制
- jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传。
- js支持全浏览器的文件上传预览
- JS实现表单多文件上传样式美化支持选中文件后删除相关项
- jquery.fileupload.js插件使用--后台处理单个上传文件类
- 自制文件上传JS控件,支持IE、chrome、firefox etc.
- js实现上传单个文件
- js限制本地上传文件大小(支持ie6,7,8 firefox 谷歌)
- resumable.js —— 基于 HTML 5 File API 的文件上传组件 支持续传后台c#实现
- js 上传单个文件(任意大小)