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