javascript - 關(guān)于ajax上傳多圖問題。
問題描述
不知道ajax 是如何上傳多圖發(fā)送給后臺(tái)的。
單個(gè)圖片的話可以用base64發(fā)送給后臺(tái)， 但是如果多圖用這個(gè)方法就不適宜了，因?yàn)閎ase64會(huì)很大。
用什么方式發(fā)送給后臺(tái)的？ 后臺(tái)如果是PHP 是如何接收？
根據(jù)評論的方法，明明選擇了2個(gè)圖片上傳。 為什么后臺(tái)只顯示1個(gè)文件？
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <script src='https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js'></script></head><body><form id='form'> <input type='file' multiple='' name='file'> <button type='button'>上傳</button></form><script>document.getElementById(’btn’).onclick = () => { $.ajax({url: ’./test.php’,type: ’POST’,dataType: ’text’,data: new FormData(document.getElementById(’form’)),processData: false,contentType: false, }) .done(function(data) {console.log(data); })}</script> </body></html>
問題解答
回答1：還是用表單吧，你選擇直接ajax的原因應(yīng)該是不想刷新頁面，這樣的話可以使用formdata進(jìn)行ajax提交，這是一個(gè)H5的新屬性，具體的可以看看實(shí)例，它最主要的功能就是將表單域里的內(nèi)容封裝成formdata，然后用ajax提交出去，表單控件的name對應(yīng)后臺(tái)的參數(shù)name，至于多個(gè)圖片就用一組相同name的input就可以了。下面是js和效果圖，還要不懂的話可以追問。
http://www.jianshu.com/p/756e...多圖就是多append進(jìn)FormData而已
回答3：使用FormData提交就可以了
funUploadFile: function(form, files) { var that = this; var formData = new FormData(form[0]); for (var i = 0; i < files.length; i++) {formData.append(’file[’ + i + ’]’, files[i]); } var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) {var data = JSON.parse(xhr.responseText);//提交返回 }} //偵查當(dāng)前附件上傳情況 xhr.upload.onprogress = function(evt) {var loaded = evt.loaded;var tot = evt.total;var per = Math.floor(100 * loaded / tot); //已經(jīng)上傳的百分比 // console.log(per); } xhr.open('post', 上傳地址); xhr.send(formData);}回答4：
function httpUpload(url, formData) { //formData.append('_token', window._token); return new Promise(function (resolve, reject) {$.ajax({ url: url, type: ’POST’, data: formData, processData: false, contentType: false, dataType: 'json', success: function (response) {resolve(response); }, error: function (response) {reject(response); }}); });}
https://developer.mozilla.org...主要就是將要上傳的文件往formData里面append后端該怎么取就怎么取(php: $_FILES里面)
回答5：貌似題主的初衷是一起傳太大了？ 可以一個(gè)一個(gè)傳，失敗了也能重試，實(shí)現(xiàn)成本低。
相關(guān)文章：
1. 視頻文件不能播放，怎么辦？2. mysql - 把一個(gè)表中的數(shù)據(jù)count更新到另一個(gè)表里?3. 請教使用PDO連接MSSQL數(shù)據(jù)庫插入是亂碼問題?4. mysql 查詢身份證號字段值有效的數(shù)據(jù)5. visual-studio - Python OpenCV: 奇怪的自動(dòng)補(bǔ)全問題6. mysql - 分庫分表、分區(qū)、讀寫分離 這些都是用在什么場景下 ，會(huì)帶來哪些效率或者其他方面的好處7. node.js - nodejs開發(fā)中常用的連接mysql的庫8. python bottle跑起來以后,定時(shí)執(zhí)行的任務(wù)為什么每次都重復(fù)(多)執(zhí)行一次?9. python - 爬蟲模擬登錄后，爬取csdn后臺(tái)文章列表遇到的問題10. Python爬蟲如何爬取span和span中間的內(nèi)容并分別存入字典里？
網(wǎng)公網(wǎng)安備