最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間:8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
JS+php后臺(tái)實(shí)現(xiàn)文件上傳功能詳解

本文實(shí)例講述了JS+php后臺(tái)實(shí)現(xiàn)文件上傳功能。分享給大家供大家參考,具體如下:

成都創(chuàng)新互聯(lián)是一家專業(yè)提供赤城企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、HTML5建站、小程序制作等業(yè)務(wù)。10年已為赤城眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。

一、利用 FormData 對(duì)象形式上傳

FormData 是 XMLHttpRequest 2 的產(chǎn)物,兼容 IE10+。

FormData 對(duì)象,可以把form中所有表單元素的name與value組成一個(gè)queryString,提交到后臺(tái)。在使用Ajax提交時(shí),使用FormData對(duì)象可以減少拼接queryString的工作量。

使用 FormData 對(duì)象

1.取得form對(duì)象,作為參數(shù)傳入到FormData對(duì)象

html:

js:

var form = document.getElementById('form1');
var formdata = new FormData(form);

2.創(chuàng)建一個(gè)FormData空對(duì)象,然后使用append方法添加key/value

var formdata = new FormData();
formdata.append('name','fdipzone');
formdata.append('gender','male');

使用FormData提交表單及上傳文件實(shí)例:

實(shí)例1

一般項(xiàng)目中使用的點(diǎn)擊上傳文件的按鈕跟 默認(rèn)樣式是不一樣的,我們得自定義。方法是,自己寫一個(gè)

JS:

methods: {
  triggerSelect () {
   this.$refs.input.click()
  },
  selectedFile (e) {
   console.log(e.target.files[0])
   //根據(jù)項(xiàng)目需求做具體處理,比如說獲取文件名
  },
  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)
       })
     })
   }
  }
}

實(shí)例2



 
 
  FormData Demo 
 
 
  

name:

gender:male female

photo:

server.php

<?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數(shù)據(jù)轉(zhuǎn)換為Blob --------
function convertBase64UrlToBlob(urlData, filetype){
    //去掉url的頭,并轉(zhuǎn)換為byte
    var bytes = window.atob(urlData.split(',')[1]);
    //處理異常,將ascii碼小于0的轉(zhuǎn)換為大于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 + ' 個(gè)文件');
    // 遍歷選中的文件,預(yù)覽、上傳
    $.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);
        // 發(fā)送數(shù)據(jù)
        xhr.send(formData);
      });
      reader.readAsDataURL(file);
    });
});

二、base64 字符串方式上傳圖片

base64 在線轉(zhuǎn)換網(wǎng)站:http://tools.jb51.net/transcoding/img2base64

DataURI 允許在HTML文檔中嵌入小文件,可以使用 img 標(biāo)簽或 CSS 嵌入轉(zhuǎn)換后的 Base64 編碼,減少 HTTP 請(qǐng)求,加快小圖像的加載時(shí)間。 經(jīng)過Base64 編碼后的文件體積一般比源文件大 30% 左右。

Base64 在CSS中的使用:

.box{
 background-image: url("data:image/jpg;base64,/9j/4QMZR...");
}

Base64 在HTML中的使用:



(不推薦用base64,效率慢,消耗流量,占用空間。推薦使用把base64圖片格式轉(zhuǎn)換成FormData形式傳遞)

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript表單(form)操作技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。


本文題目:JS+php后臺(tái)實(shí)現(xiàn)文件上傳功能詳解
網(wǎng)頁URL:http://fisionsoft.com.cn/article/iigosj.html