當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
JS_单个或多个文件上传_不支持单独修改
生活随笔
收集整理的這篇文章主要介紹了
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_单个或多个文件上传_不支持单独修改的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 如何将html特殊字符编码转换成特殊字符
- 下一篇: jquery中点击切换的实现