版權(quán)聲明： 本文由 一只博客 發(fā)表于?bloghome博客

創(chuàng)新互聯(lián)建站"三網(wǎng)合一"的企業(yè)建站思路。企業(yè)可建設(shè)擁有電腦版、微信版、手機(jī)版的企業(yè)網(wǎng)站。實(shí)現(xiàn)跨屏營銷，產(chǎn)品發(fā)布一步更新，電腦網(wǎng)絡(luò)+移動(dòng)網(wǎng)絡(luò)一網(wǎng)打盡，滿足企業(yè)的營銷需求！創(chuàng)新互聯(lián)建站具備承接各種類型的成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)項(xiàng)目的能力。經(jīng)過十多年的努力的開拓，為不同行業(yè)的企事業(yè)單位提供了優(yōu)質(zhì)的服務(wù)，并獲得了客戶的一致好評。

文章鏈接：?https://www.bloghome.com.cn/user/cnn237111

常規(guī)實(shí)現(xiàn)方法：

ajax無法實(shí)現(xiàn)上傳文件，因此常規(guī)情況下，要實(shí)現(xiàn)無刷新上傳文件的做法，是在頁面隱藏一個(gè)iframe，然后將上傳form的target指向這個(gè)iframe，變相的實(shí)現(xiàn)。如下代碼：

Uploading...

????File:?
??????????

upload_target是一個(gè)長寬都是0的iframe，所以頁面上看不見他。還需要配合js，使得效果更好：

其中startUpload方法是在提交表單的時(shí)候觸發(fā)，而由于沒有什么回調(diào)函數(shù)，因此finisheUpload只能由upload.php文件的輸出控制。通常就是在輸出中輸出一段javascript代碼來執(zhí)行。

php代碼如下：

window.parent.finisheUpload(0);?";
}
else
{
???echo?"window.parent.finisheUpload(1);?";
}

注意，輸出javascript的時(shí)候，由于調(diào)用的js方法是在iframe外定義的，要在iframe內(nèi)調(diào)用js方法，需要指定window.parent。

————————

HTML5下的實(shí)現(xiàn)方法：

先介紹一下FileReader對象：

FileReader對象的詳細(xì)說明可以在W3C官方文檔中查看。

該接口提供方法來讀取文件對象或者Blob對象。它繼承了EventTarget，接口的描述如下：

[Constructor]
????interface?FileReader:?EventTarget?{
??????//?async?read?methods
??????void?readAsArrayBuffer(Blob?blob);
??????void?readAsText(Blob?blob,?optional?DOMString?label);
??????void?readAsDataURL(Blob?blob);
??????void?abort();
??????//?states
??????const?unsigned?short?EMPTY?=?0;
??????const?unsigned?short?LOADING?=?1;
??????const?unsigned?short?DONE?=?2;
??????readonly?attribute?unsigned?short?readyState;
??????//?File?or?Blob?data
??????readonly?attribute?(DOMString?or?ArrayBuffer)??result;
??????readonly?attribute?DOMError??error;
??????//?event?handler?attributes
??????attribute?EventHandler???????attribute?EventHandler?onprogress;
??????attribute?EventHandler???????attribute?EventHandler?onabort;
??????attribute?EventHandler?onerror;
??????attribute?EventHandler?????};

可以看到有4個(gè)異步方法，其中3個(gè)是讀取，1個(gè)是放棄，4個(gè)狀態(tài)屬性,1個(gè)result，1個(gè)error和6個(gè)事件。（之前還有readAsBinaryString方法，不過已經(jīng)被W3C去除了）這6個(gè)事件的觸發(fā)時(shí)機(jī)如下：

loadstart --When the read starts.

progress --While reading (and decoding) blob

abort --When the read has been aborted. For instance, by invoking the abort() method.

error --When the read has failed (see errors).

load --When the read has successfully completed.

loadend --When the request has completed (either in success or failure).

下面演示一個(gè)例子，讀取一個(gè)文本文檔，并且alert出來內(nèi)容。