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