?一丶前端文件上傳方式

前端網頁文件上傳一般使用 <input type="file" />來實現。

? ? 在 HTML 文檔中： `<input type="file" />`標簽每出現一次，一個 FileUpload 對象就會被創建。該標簽包含一個文本輸入字段，用來輸入文件名，還有一個按鈕，用來打開文件選擇對話框以便圖形化選擇文件,該標簽的 value屬性保存了用戶指定的文件的名稱。

? ? ? ? ? ? ? ? ? ? ? 多選： 標簽可以通過添加 multiple 屬性來支持多選；如果選擇了多個文件, 這個值表示第一個被選擇的文件路徑. JavaScript 可以通過 Input 的 FileList屬性獲取到其他的文件路徑.

? ? ? ? ? ? ? ? 文件信息：可以通過 input.files 屬性返回 — 返回值是一個 FileList 對象,這個對象是一個包含了許多 File 文件的列表，列表包含圖片的name，type，size? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 等屬性。

? ? ? ? 限制文件類型：你可以使用 input 的 accept 屬性，accept 屬性接受一個逗號分隔的 MIME 類型字符串。如: accept="image/png, image/jpeg" or accept=".png, .jpg, .jpeg" — PNG/JPEG

? ? ? ? ? ? ? ? 選擇文件：會觸發input的onchange事件;

? ? ? ? ? ? ? ? ? ? ? 上傳：上傳文件前 使用FileReader對象讀取指定file的文件，并將文件轉換為二進制字符串, 并將xhr對象, overrideMimeType 屬性設置為text/plain;? charset=x-user-defined-binary, 最終后臺接收到二進制后再做具體處理。

?第一種：經典的form和input上傳

設置form的aciton為后端頁面，必填項：enctype="multipart/form-data"，type=‘post’

? ? <form action='uploadFile.php' enctype="multipart/form-data" type='post'>

? ? 　　<input type='file'>

? ? 　　<input type='hidden' name='userid'>

? ? 　　<input type='hidden' name='signature'>

? ? 　　<button>提交</button>

? ? </form>

使用input選擇文件，設置好其他input的值，點擊提交，將文件數據及簽名等認證信息發送到form設置的action對應的頁面，瀏覽器也會跳轉到該頁面。觸發form表單提交數據的方式有2種，一種是在頁面上點擊button按鈕或<input type='submit'>按鈕觸發，第二種是在js中執行form.submit()方法。

優點：使用簡單方便，兼容性好，基本所有瀏覽器都支持。

缺點： 1. 提交數據后頁面會跳轉（下面會講如何禁止頁面跳轉）。

? ? 2.因為是瀏覽器發起的請求，不是一個ajax，所以前端無法知道什么時候上傳結束。

? ? ? 3. form表單里發送除文件外的數據，一般是新建一個type=hidden的input，value=‘需要傳的數據’，每發送一個數據就需要一個input，一旦多了就會使得dom看起來比較冗余。

小技巧：

form表單提交數據后會自動跳轉到action指定的頁面，為了禁止頁面跳轉，可以在頁面中新建一個空的ifame，比如name='upload'，然后設置form的target="Uploader"，form有一個target的屬性，規定在何處打開action，這樣form提交數據后就會仍停留在當前頁。代碼如下：

? ? <form action='uploadFile.url' enctype="multipart/form-data" type='post' target="uploaderPage">

? ? ???? <input type='file'>

? ? ????button>提交</button>

? ? </form>

? ? <ifrmae name='upload' id='uploaderPage'></iframe>

這樣寫的另一個好處是，可以知道什么時候上傳完成并接收到后端的回調結果。比如上面這個例子，文件數據發送到了 'uploadFile.url'，假設該頁面處理完數據后返回了一個地址，該地址會被寫入到之前的iframe中。所以在ifame的onload函數觸發時，也就是上傳完成后，可以在iframe中讀取到后端返回的數據。

? ? var iframe = document.getElementById('uploadPage');

? ? iframe.onload = function () {

? ? ???? var doc = window.frames['uploaderPage'].document;

? ? ???? var pre = doc.getElementsByTagName('pre');

? ? ???? var obj = JSON.parse(pre[0].innerHTML);

? ? }

使用這種方法時需要注意，iframe有跨域限制，創建出來的iframe的地址如果和當前頁面地址不同源，會報錯。這種情況下，建議大家在iframe的onload函數中，再次向后端請求一個接口獲取文件地址，而不是直接去iframe里讀取。或者返回這樣的數據。

? ? <script type="text/javascript">

? ? ???? window.top.window.callback(data)

? ? </script>

callback是和前端約定好的名字，上傳完成后觸發該函數并返回后端數據。

?第二種：使用formData上傳。（分借用form和不借用form）

? 借助form的ajax文件上傳

? ? <script src="jquery.min.js"></script>

? ? <form id="uploadForm" enctype="multipart/form-data">

? ? ? ? <input type="file" name="file" id="file">

? ? ? ? <input type="button" value="Upload" id="upload" />

? ? </form>

? ? <script>

? ? ? ? $(function () {

? ? ? ? ? ? $('#upload').click(function () {

? ? ? ? ? ? ? ? $.ajax({

? ? ? ? ? ? ? ? ? ? url: "http://localhost:8080/img",

? ? ? ? ? ? ? ? ? ? type: "post",

? ? ? ? ? ? ? ? ? ? data: new FormData($('#uploadForm')[0]),

? ? ? ? ? ? ? ? ? ? cache: false,

? ? ? ? ? ? ? ? ? ? processData: false,

? ? ? ? ? ? ? ? ? ? contentType: false,

? ? ? ? ? ? ? ? ? ? success: function (res) {

? ? ? ? ? ? ? ? ? ? console.log(res)

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? error: function (err) {

? ? ? ? ? ? ? ? ? ? ? ? console.log(err)

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? })

? ? ? ? ? ? })

? ? ? ? })

? ? </script>

processData設置為false。因為data值是FormData對象，不需要對數據做處理。

`<form>`標簽添加enctype="multipart/form-data"屬性。

cache設置為false，上傳文件不需要緩存。

contentType設置為false。因為是由`<form>`表單構造的FormData對象，且已經聲明了屬性enctype="multipart/form-data"，所以這里設置為false。

不借助form的ajax文件上傳

? ? <input type="file" name="file" id="file"><input type="button" value="Upload" id="upload" />

? ? <script src="jquery.min.js"></script>

? ? <script>

? ? $(function () {

? ? ? ? $('#upload').click(function () {

? ? ? ? ? ? let file = $("#file")[0].files[0];

? ? ? ? ? ? //創建formdata對象

? ? ? ? ? ? let formData = new FormData();

? ? ? ? ? ? formData.append("file", file);

? ? ? ? ? ? $.ajax({

? ? ? ? ? ? ? ? url: "http://localhost:8081/images",

? ? ? ? ? ? ? ? type: "post",

? ? ? ? ? ? ? ? data: formData,

? ? ? ? ? ? ? ? cache: false,

? ? ? ? ? ? ? ? processData: false,

? ? ? ? ? ? ? ? contentType: false,

? ? ? ? ? ? ? ? // headers: { 'Content-Type': 'multipart/form-data' },

? ? ? ? ? ? ? ? success: function (res) {

? ? ? ? ? ? ? ? ? ? console.log(res)

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? error: function (err) {

? ? ? ? ? ? ? ? ? ? console.log(err)

? ? ? ? ? ? ? ? }

? ? ? ? ? ? })

? ? ? })

? ? })

? ? </script>

append()的第二個參數應是文件對象，即`$('#file')[0].files[0]`。

contentType也要設置為‘false’。

從代碼`$('#file')[0].files[0]`中可以看到一個`<input type="file">`標簽能夠上傳多個文件， 只需要在`<input type="file">`里添加multiple或multiple="multiple"屬性。

用js構造form表單的數據，簡單高效，但最低只兼容IE10，所以需要兼容IE9的童鞋們就略過這個方法吧。

? ? ? html:

? ? ? ? <input type='file'>

? ? ? ? js:

? ? ? ? var formData = new FormData();

? ? ? ? formData.append("userid", userid);

? ? ? ? formData.append("signature", signature);

? ? ? ? formData.append("file", file); //file是blob數據

?????//再用ajax發送formData到服務器即可，注意一定要是post方式上傳

說明：第一種方法提到了創建多個type=‘hidden’的input來發送簽名數據，這兒可以用formData.append方法來代替該操作，避免了dom中有多個input的情況出現。最后將file數據也append到formData發送到服務器即可完成上傳。

優點：由于這種方式是ajax上傳，可以準確知道什么時候上傳完成，也可以方便地接收到回調數據。

缺點：兼容性差

第三種：使用fileReader讀取文件數據進行上傳。

HTML5的新api，兼容性也不是特別好，只兼容到了IE10。

? ? var fr = new FileReader();

? ? fr.readAsDataURL(file);

? ? fr.onload = function (event) {

? ? var data= event.target.result; //此處獲得的data是base64格式的數據

? ? ? ? ? ? ? ? ? ? ? ? img.src = data;

? ? ajax(url,{data} ,function(){})

? ? }

上面獲得的data可以用來實現圖片上傳前的本地預覽，也可以用來發送base64數據給后端然后返回該數據塊對應的地址。

優點： 同第二種

缺點：一次性發送大量的base64數據會導致瀏覽器卡頓，服務器端接收這樣的數據可能也會出現問題

第四種：flash上傳 參考jQuery封裝好的uploadify插件

? ? <div id="file_upload"></div>

html部分很簡單，預留一個hook后，插件會在這個節點內部創建Flash的object，并且還附帶創建了上傳進度、取消控件和多文件隊列展示等界面。

? ? $(function() {

? ? $("#file_upload").uploadify({

? ???? auto: true,

????? method: "Post",

????? width: 120,

? ???? height: 30,

? ???? swf: './uploadify.swf',

? ? ???? uploader: 'http://uploadUrl',

? formData: {

? ???? token: $("#token").val()

? ? },

? ? fileObjName: "file",

? ? onUploadSuccess: function(file, data, response){

? ? // 根據返回結果指定界面操作

? ? }

? ? });

? ? });

關于jQuery.uploadify可以訪問了解： http://www.uploadify.com/documentation/ 。值得注意的是flash并不適合手機端應用，更好的解決方案是使用flash+html5來解決平臺的兼容性問題。

二丶圖片上傳和預覽

?方法一：使用js的FileReader對象

1、FileReader對象簡介

1.檢測瀏覽器對FileReader的支持

? ? if(window.FileReader) {

? ? ???? var fr = new FileReader();

? ????? // add your code here

? ? }else {

? ????? alert("Not supported by your browser!");

? ? }

調用FileReader對象的方法

FileReader 的實例擁有 4 個方法，其中 3 個用以讀取文件，另一個用來中斷讀取。下面的表格列出了這些方法以及他們的參數和功能，

需要注意的是 ，無論讀取成功或失敗，方法并不會返回讀取結果，這一結果存儲在 result屬性中。

? ? 方法名? ? ? ? ? ? ? ? ????????? 參數? ? ? ? ? ? ????????? 描述

? ? abort? ? ? ? ? ? ? ? ????????? ????none? ? ? ? ? ????????? 中斷讀取

? ? readAsBinaryString ? ???? file? ? ? ? ? ? ? ? ? ? ? ?將文件讀取為二進制碼

? ? readAsDataURL ????? ???? file ? ???????????? ???????? 將文件讀取為 DataURL

? ? readAsText ? ????????????????file, [encoding] ???????? 將文件讀取為文本

readAsText：該方法有兩個參數，其中第二個參數是文本的編碼方式，默認值為 UTF-8。這個方法非常容易 ?

理解，將文件以文本方式讀取，讀取的結果即是這個文本文件中的內容。

readAsBinaryString：該方法將文件讀取為二進制字符串，通常我們將它傳送到后端，后端可以通過這段字符串存儲文件。

readAsDataURL：這是例子程序中用到的方法，該方法將文件讀取為一段以 data: 開頭的字符串，這段字符 串的實質就是 Data URL，Data URL是一種將小文件直接嵌入文檔的方案。這里的小文件通常是指圖像與 html 等格式的文件。（其中base64的方式就是由此來獲得的。。）

2. FileReader處理事件簡介

FileReader 包含了一套完整的事件模型，用于捕獲讀取文件時的狀態，下面這個表格歸納了這些事件。

onabort? ? ? ? 中斷時觸發

onerror? ? ? ? ? 出錯時觸發

onload? ? ? ? ? 文件讀取成功完成時觸發

onloadend? ? 讀取完成觸發，無論成功或失敗

onloadstart? ? 讀取開始時觸發

onprogress? ? 讀取中

文件一旦開始讀取，無論成功或失敗，實例的 result 屬性都會被填充。如果讀取失敗，則 result 的值為 null ，否則即是讀取的結果，絕大多數的程序都會在成功讀取文件的時候，抓取這個值。

<p>

? ? ? ? ? ? <label>請選擇一個文件：</label>

? ? ? ? ? ? <input type="file" id="file" />

? ? ? ? ? ? <input type="button" value="讀取圖像" onclick="readAsDataURL()" />

? ? ? ? ? ? <input type="button" value="讀取二進制數據" onclick="readAsBinaryString()" />

? ? ? ? ? ? <input type="button" value="讀取文本文件" onclick="readAsText()" />

? ? ? ? </p>

? ? ? ? <div id="result" name="result"></div>

? ? ? ? <script type="text/javascript">

? ? ? ? ? ? var result = document.getElementById("result");

? ? ? ? ? ? var file = document.getElementById("file");

? ? ? ? ? ? //判斷瀏覽器是否支持FileReader接口

? ? ? ? ? ? if (typeof FileReader == 'undefined') {

? ? ? ? ? ? ? ? result.InnerHTML = "<p>你的瀏覽器不支持FileReader接口！</p>";

? ? ? ? ? ? ? ? //使選擇控件不可操作

? ? ? ? ? ? ? ? file.setAttribute("disabled", "disabled");

? ? ? ? ? ? }

? ? ? ? ? ? function readAsDataURL() {

? ? ? ? ? ? ? ? //檢驗是否為圖像文件

? ? ? ? ? ? ? ? var file = document.getElementById("file").files[0];

? ? ? ? ? ? ? ? if (!/image\/\w+/.test(file.type)) {

? ? ? ? ? ? ? ? ? ? alert("看清楚，這個需要圖片！");

? ? ? ? ? ? ? ? ? ? return false;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? var reader = new FileReader();

? ? ? ? ? ? ? ? //將文件以Data URL形式讀入頁面

? ? ? ? ? ? ? ? reader.readAsDataURL(file);

? ? ? ? ? ? ? ? reader.onload = function (e) {

? ? ? ? ? ? ? ? ? ? var result = document.getElementById("result");

? ? ? ? ? ? ? ? ? ? //顯示文件

? ? ? ? ? ? ? ? ? ? result.innerHTML = '<img src="' + this.result + '" alt="" />';

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? ? function readAsBinaryString() {

? ? ? ? ? ? ? ? var file = document.getElementById("file").files[0];

? ? ? ? ? ? ? ? var reader = new FileReader();

? ? ? ? ? ? ? ? //將文件以二進制形式讀入頁面

? ? ? ? ? ? ? ? reader.readAsBinaryString(file);

? ? ? ? ? ? ? ? reader.onload = function (f) {

? ? ? ? ? ? ? ? ? ? var result = document.getElementById("result");

? ? ? ? ? ? ? ? ? ? //顯示文件

? ? ? ? ? ? ? ? ? ? result.innerHTML = this.result;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? ? function readAsText() {

? ? ? ? ? ? ? ? var file = document.getElementById("file").files[0];

? ? ? ? ? ? ? ? var reader = new FileReader();

? ? ? ? ? ? ? ? //將文件以文本形式讀入頁面

? ? ? ? ? ? ? ? reader.readAsText(file);

? ? ? ? ? ? ? ? reader.onload = function (f) {

? ? ? ? ? ? ? ? ? ? var result = document.getElementById("result");

? ? ? ? ? ? ? ? ? ? //顯示文件

? ? ? ? ? ? ? ? ? ? result.innerHTML = this.result;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? </script>

3 、使用js的FileReader對象實現上傳圖片時的圖片預覽功能

? ? <!DOCTYPE html>

? ? <html>

? ? <head>

? ? ? ? <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">

? ? ? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

? ? ? ? <meta name="format-detection" content="telephone=no">

? ? ? ? <title>test</title>

? ? ? ? <script>

? ? ? ? ? ? //選擇圖片時預覽功能

? ? ? ? ? ? function imageshow(source) {

? ? ? ? ? ? ? ? var file = source.files[0];

? ? ? ? ? ? ? ? var imageid = source.id;

? ? ? ? ? ? ? ? if (window.FileReader) {

? ? ? ? ? ? ? ? ? ? var fr = new FileReader();

? ? ? ? ? ? ? ? ? ? fr.onloadend = function (e) {

? ? ? ? ? ? ? ? ? ? ? ? document.getElementById("portrait" + imageid).src = e.target.result;

? ? ? ? ? ? ? ? ? ? };

? ? ? ? ? ? ? ? ? ? fr.readAsDataURL(file);

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? document.getElementById("image" + imageid).style.display = "none";

? ? ? ? ? ? ? ? document.getElementById("show" + imageid).style.display = "block";

? ? ? ? ? ? }

? ? ? ? </script>

? ? </head>

? ? <body>

? ? ? ? <div>

? ? ? ? ? ? <div id="image1">

? ? ? ? ? ? ? ? 　　　　　　<p>上傳截圖</p>

? ? ? ? ? ? ? ? <input type="file" name="screenshot1" id="1" onchange="imageshow(this)" />

? ? ? ? ? ? </div>

? ? ? ? ? ? 　　　　<div id="show1" style="display:none;">

? ? ? ? ? ? ? ? 　　　　　　<img src="" id="portrait1" width="100" height="70">

? ? ? ? ? ? ? ? 　　　　</div>

? ? ? ? ? ? 　　　　<div id="image2">

? ? ? ? ? ? ? ? <p>上傳截圖</p>

? ? ? ? ? ? ? ? <input type="file" name="screenshot2" id="2" onchange="imageshow(this)" />

? ? ? ? ? ? </div>

? ? ? ? ? ? 　　　 <div id="show2" style="display:none;">

? ? ? ? ? ? ? ? 　　　　　　<img src="" id="portrait2" width="100" height="70">

? ? ? ? ? ? ? ? 　　　</div>

? ? ? ? ? ? <div id="image3">

? ? ? ? ? ? ? ? <p>上傳截圖</p>

? ? ? ? ? ? ? ? <input type="file" name="screenshot3" id="3" onchange="imageshow(this)" />

? ? ? ? ? ? </div>

? ? ? ? ? ? 　　<div id="show3" style="display:none;">

? ? ? ? ? ? ? ? 　　　　　　<img src="" id="portrait3" width="100" height="70">

? ? ? ? ? ? ? ? 　　　　</div>

? ? ? ? </div>

? ? </body>

? ? </html>

方法二：使用window.createObjectURL

直接上代碼：

? ? <!DOCTYPE html>

? ? <html>

? ? <head>

? ? ? ? <title>圖片上傳預覽</title>

? ? ? ? <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

? ? ? ? <script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>

? ? </head>

? ? <body>

? ? ? ? <form name="form0" id="form0">

? ? ? ? ? ? <input type="file" name="file0" id="file0" multiple="multiple" />

? ? ? ? ? ? <br>

? ? ? ? ? ? <img src="" width="100" height="100" id="img0">

? ? ? ? </form>

? ? ? ? <script>

? ? ? ? ? ? $("#file0").change(function () {

? ? ? ? ? ? ? ? var objUrl = getObjectURL(this.files[0]);

? ? ? ? ? ? ? ? console.log("objUrl = " + objUrl);

? ? ? ? ? ? ? ? if (objUrl) {

? ? ? ? ? ? ? ? ? ? $("#img0").attr("src", objUrl);

? ? ? ? ? ? ? ? }

? ? ? ? ? ? });

? ? ? ? ? ? //取得該文件的url function getObjectURL(file) {

? ? ? ? ? ? var url = null;

? ? ? ? ? ? if (window.createObjectURL != undefined) {

? ? ? ? ? ? ? ? url = window.createObjectURL(file);

? ? ? ? ? ? } else if (window.URL != undefined) {

? ? ? ? ? ? ? ? url = window.URL.createObjectURL(file);

? ? ? ? ? ? } else if (window.webkitURL != undefined) {

? ? ? ? ? ? ? ? url = window.webkitURL.createObjectURL(file);

? ? ? ? ? ? }

? ? ? ? ? ? return url;

? ? //}

? ? ? ? </script>

? ? </body>

? ? </html>