js 实现文件上传 php,JS+php后台实现文件上传功能详解
本文實例講述了JS+php后臺實現文件上傳功能。分享給大家供大家參考，具體如下：
一、利用 FormData 對象形式上傳
FormData 是 XMLHttpRequest 2 的產物，兼容 IE10+。
FormData 對象，可以把form中所有表單元素的name與value組成一個queryString，提交到后臺。在使用Ajax提交時，使用FormData對象可以減少拼接queryString的工作量。
使用 FormData 對象
1.取得form對象，作為參數傳入到FormData對象
html：
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
一般項目中使用的點擊上傳文件的按鈕跟 默認樣式是不一樣的，我們得自定義。方法是，自己寫一個 按鈕，然后再寫一個 (這個要隱藏，太難看)，點擊 的時候出發 的 click 事件。
HTML：
:style="{display: 'none'}"
ref="input" @change="selectedFile"
/>
上傳
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
FormData Demoname:
gender:male female
photo:
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'] + '
';
result += 'gender=' + ret['gender'] + '
';
result += '';
$('#result').html(result);
}else{
alert('提交失敗');
}
});
return false;
}
server.php
$name = isset($_POST['name'])? $_POST['name'] : '';
$gender = isset($_POST['gender'])? $_POST['gender'] : '';
$filename = time().substr($_FILES['photo']['name'], strrpos($_FILES['photo']['name'],'.'));
$response = array();
if(move_uploaded_file($_FILES['photo']['tmp_name'], $filename)){
$response['isSuccess'] = true;
$response['name'] = $name;
$response['gender'] = $gender;
$response['photo'] = $filename;
}else{
$response['isSuccess'] = false;
}
echo json_encode($response);
?>
帶顯示圖片的上傳圖片
// -------- 將以base64的圖片url數據轉換為Blob --------
function convertBase64UrlToBlob(urlData, filetype){
//去掉url的頭，并轉換為byte
var bytes = window.atob(urlData.split(',')[1]);
//處理異常,將ascii碼小于0的轉換為大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
var i;
for (i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], {type : filetype});
}
$input.on('change', function (e) {
var input = $input.get(0);
var files = input.files || [];
if (files.length === 0) {
return;
}
console.log('選中 ' + files.length + ' 個文件');
// 遍歷選中的文件，預覽、上傳
$.each(files, function (key, file) {
var filename = file.name || '';
var fileType = file.type || '';
var reader = new FileReader();
// onload事件
reader.onload = function (e) {
var base64 = e.target.result || this.result;
var formData = new FormData();
formData.append("upload_file", convertBase64UrlToBlob(base64, fileType), filename);
var xhr = new XMLHttpRequest();
// 開始上傳
xhr.open('POST', uploadImgUrl, true);
// 發送數據
xhr.send(formData);
});
reader.readAsDataURL(file);
});
});
二、base64 字符串方式上傳圖片
base64 在線轉換網站：http://tools.jb51.net/transcoding/img2base64
DataURI 允許在HTML文檔中嵌入小文件，可以使用 img 標簽或 CSS 嵌入轉換后的 Base64 編碼，減少 HTTP 請求，加快小圖像的加載時間。 經過Base64 編碼后的文件體積一般比源文件大 30% 左右。
Base64 在CSS中的使用：
.box{
background-image: url("data:image/jpg;base64,/9j/4QMZR...");
}
Base64 在HTML中的使用：
(不推薦用base64，效率慢，消耗流量，占用空間。推薦使用把base64圖片格式轉換成FormData形式傳遞)
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript表單(form)操作技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript錯誤與調試技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
總結
以上是生活随笔為你收集整理的js 实现文件上传 php,JS+php后台实现文件上传功能详解的全部內容，希望文章能夠幫你解決所遇到的問題。
