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

原文地址:https://www.cnblogs.com/lxhbky/p/7867578.html