本文實例講述了JS+php后臺實現文件上傳功能。分享給大家供大家參考，具體如下：
一、利用 FormData 對象形式上傳
FormData 是 XMLHttpRequest 2 的產物，兼容 IE10+。
FormData 對象，可以把form中所有表單元素的name與value組成一個queryString，提交到后臺。在使用Ajax提交時，使用FormData對象可以減少拼接queryString的工作量。
使用 FormData 對象
1.取得form對象，作為參數傳入到FormData對象
html：
<form name="form1" id="form1"> <input type="text" name="name" value="fdipzone"> <input type="text" name="gender" value="male"></form>
js：
var form = document.getElementById('form1');var formdata = new FormData(form);2.創建一個FormData空對象，然后使用append方法添加key/value
var formdata = new FormData();formdata.append('name','fdipzone');formdata.append('gender','male');使用FormData提交表單及上傳文件實例：
實例1
一般項目中使用的點擊上傳文件的按鈕跟 <input type="file"/> 默認樣式是不一樣的，我們得自定義。方法是，自己寫一個<button> 按鈕，然后再寫一個 <input type="file"/>（這個要隱藏，太難看），點擊 <button> 的時候出發 <input type="file"/> 的 click 事件。
HTML：
<input type="file" :style="{display: 'none'}" ref="input" @change="selectedFile"/><button @click="upload">上傳</button>JS：
methods: { triggerSelect () { this.$refs.input.click() }, selectedFile (e) { console.log(e.target.files[0]) //根據項目需求做具體處理，比如說獲取文件名 }, async upload () { //如果不需要用到上傳后的返回值可以把 async...await 語法去掉 let files = this.$refs.input.files; if(files.length > 0) { let form = new FormData(); form.append('file', files[0]) let data = await new Promise((resolve, reject) => { axios({ url: '', method: 'post', data: form }) .then(res => { resolve(res) }) .catch(err => { reject(err) }) }) } }}實例2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> FormData Demo </title> </head> <body> <form name="form1" id="form1"> <p>name:<input type="text" name="name" ></p> <p>gender:<input type="radio" name="gender" value="1">male <input type="radio" name="gender" value="2">female</p> <p>photo:<input type="file" name="photo" id="photo"></p> <p><input type="button" name="b1" value="submit" onclick="fsubmit()"></p> </form> <div id="result"></div> <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript"> function fsubmit(){ var data = new FormData($('#form1')[0]); $.ajax({ url: 'server.php', type: 'POST', data: data, dataType: 'JSON', cache: false, processData: false, //不處理發送的數據，因為data值是FormData對象，不需要對數據做處理 contentType: false //不設置Content-type請求頭 }).done(function(ret){ if(ret['isSuccess']){ var result = ''; result += 'name=' + ret['name'] + '<br>'; result += 'gender=' + ret['gender'] + '<br>'; result += '<img src="' + ret['photo'] + '" width="100">'; $('#result').html(result); }else{ alert('提交失敗'); } }); return false; } </script></body></html>
新聞熱點
疑難解答
圖片精選
