HTML5之fileAPI

創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括扎蘭屯網(wǎng)站建設(shè)、扎蘭屯網(wǎng)站制作、扎蘭屯網(wǎng)頁(yè)制作以及扎蘭屯網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，扎蘭屯網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到扎蘭屯省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

HTML5之fileAPI使得我們處理圖片上傳更加簡(jiǎn)單。

實(shí)例

html代碼

  位置圖:
  

   
   
   
  

效果:

這里我們可以通過(guò)$("#modal_inputFile")[0].files[0]來(lái)獲取到圖片的信息。

這里有name,size,type這幾個(gè)我們常用的屬性。

實(shí)現(xiàn)預(yù)覽

選擇好圖片后，我們都希望會(huì)有個(gè)預(yù)覽功能。這個(gè)html5也為我們想到了。

他提供了FileReader這個(gè)新的對(duì)象給我們。

FileReader該接口主要用來(lái)把文件讀入內(nèi)存，并且讀取文件中的數(shù)據(jù)。

這樣我們就可以通過(guò)date url來(lái)實(shí)現(xiàn)預(yù)覽了。

var file = document.getElementById(modal_inputFile'').files[0];
 if (!file) {
 return false;
 }
 var reader = new FileReader();
 reader.readAsDataURL(file);
 reader.onload = function(e) {
 var ib_pre = document.getElementById('modal-pre');
 ib_pre.src = this.result;
}

這樣就實(shí)現(xiàn)了預(yù)覽。

我們?cè)賮?lái)查看下img的src。

src是base64編碼。

與后臺(tái)對(duì)接

既然前端使用文件API能滿足我們的需求，那我們接下來(lái)就需要上傳到服務(wù)端了。當(dāng)仁不讓的就是NodeJs了。

前端請(qǐng)求

下面是前端發(fā)起請(qǐng)求的例子：

//圖片上傳
$('#preUpload').on('click', function(e) {
 var data = new FormData();
 var _files = $("#modal_inputFile")[0].files[0];
 var ect = ($("#modal_inputFile")[0].files[0]).name.split('.')[1];
 if(ect !== 'png'){
  alert('請(qǐng)上傳png圖片!')
  return;
 }
 data.append("modal_file", _files);
 $.ajax({
  type: 'post',
  dataType: 'json',
  url: window.stnt_hosts + 'thirdAdmanage/upload/modal',
  data: data,
  contentType: false,
  processData: false
 }).done(function(data, status) {
  console.log('上傳成功');
 }).fail(function(err) {
  console.log('上傳失敗');
 })
})

這里通過(guò)FormData來(lái)處理我們需要上傳的數(shù)據(jù)。

這里的data數(shù)據(jù)是一個(gè)序列過(guò)的對(duì)象。后臺(tái)接受就行了。

后端處理

服務(wù)端我們使用node-formidable來(lái)處理圖片的保存等操作。

見(jiàn)代碼:

var formidable = require("formidable");
var form = new formidable.IncomingForm();
//臨時(shí)目錄
form.uploadDir = './upload/';
//預(yù)覽圖片上傳
router.post('/upload/modal', function(req, res, next) {
 form.parse(req, function(err, fields, files) {
  if (files.modal_file) {
   rename(files.modal_file.path, files.modal_file.name, 'preview')
   res.send({
    stats:'success',
    data:[]
   })
  }
 })
});
function rename(old, _new, code, bId) {
 var path = './upload/' + code + '/';
  fs.exists(path, function(exists) {
   if (!exists) {
    fs.mkdir(path)
    console.log('創(chuàng)建文件夾！')
   }
   fs.renameSync(old, path + _new, function(err) {
    if (err) {
     console.log(err);
     return;
    }
    console.log('上傳成功!')
   })
  })
}

這里使用fs.renameSync的原因是，我們里面設(shè)置的臨時(shí)目錄form.uploadDir是存在于內(nèi)存中的數(shù)據(jù)，并不是真正的圖片。

類似這樣

我們需要通過(guò)fs的方法，將文件重新保存到我們需要的地方即可。這時(shí)候就是圖片了。

最后

這里的form.parse(req, function(err, fields, files)中的fields與files到底是什么對(duì)象，一定要自己調(diào)試著看。看完你就明白是什么了。

之前我不清楚的時(shí)候就是打開(kāi)瀏覽器就搜索，結(jié)果可想而知很慘，幾乎全是錯(cuò)的。

所以不清楚的話一定要去查github。

還有app.use(bodyParser.urlencoded({ extended: true }));的作用是用來(lái)解析我們通常的form表單提交的數(shù)據(jù)，也就是請(qǐng)求頭中包含這樣的信息： Content-Type: application/x-www-form-urlencoded

app.use(bodyParser.json())是用來(lái)解析json的。

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持創(chuàng)新互聯(lián)！