上傳我們一般都是用“input[type=file]”控件。當(dāng)你用此控件時(shí)，你就授權(quán)了網(wǎng)頁和服務(wù)器訪問對應(yīng)的文件，就可以得到File對象。

友情提示在，在Android手機(jī)webview中，是不支持上傳文件的，網(wǎng)上說是修改Android端的代碼，但我沒試過，我們這邊是使用客戶端提供的接口來實(shí)現(xiàn)上傳的。

下面的示例代碼可以在這里查看到。

一、accept屬性

該屬性表明了服務(wù)器端可接受的文件類型，可以限制你手機(jī)選擇相關(guān)的文件，如果限制多個(gè)，可以用逗號分割，下面的代碼就表示只能選擇圖片與音頻相關(guān)的文件：

在移動端，點(diǎn)擊后會讓你選擇拍照或相冊，還是蠻高大上的。下圖是UC瀏覽器中：

二、change事件

一般選擇文件都會使用“change”事件，下面的代碼就是綁定了change事件，彈出文件大小：

var upload = document.getElementById('upload');

upload.addEventListener('change', function() {

var file = upload.files[0];

alert(file.size);

}, false);

1) 有些手機(jī)瀏覽器在點(diǎn)擊的時(shí)候，會彈出鍵盤選擇，我用οnfοcus="this.blur()"，來強(qiáng)制失去焦點(diǎn)。

2) 當(dāng)選擇過一次后，再次選擇同一個(gè)文件，“change”事件不會觸發(fā)，因?yàn)関alue沒有改變，在網(wǎng)上看到個(gè)方法，我還沒有在實(shí)際項(xiàng)目中使用，兼容性有待考證。

使用“Node.cloneNode”復(fù)制上傳元素，再用“Node.replaceChild”替換節(jié)點(diǎn)。

這里注意下：克隆一個(gè)元素節(jié)點(diǎn)會拷貝它所有的屬性以及屬性值，但不會拷貝那些使用addEventListener()方法或者node.onclick = fn用JavaScript動態(tài)綁定的事件。

upload.addEventListener('change', function() {

var upload = document.getElementById('upload'); //每次要?jiǎng)討B(tài)獲取

var file = upload.files[0];

console.log(file.size);

//解決上傳相同文件不觸發(fā)onchange事件

var clone = upload.cloneNode(true);

clone.onchange = arguments.callee; //克隆不會復(fù)制動態(tài)綁定事件

clone.value = '';

upload.parentNode.replaceChild(clone, upload);

}, false);

三、File對象

用戶所選擇的文件都存儲在了一個(gè)FileList對象上，其中每個(gè)文件都對應(yīng)了一個(gè)File對象

File對象負(fù)責(zé)處理那些以文件形式存在的二進(jìn)制數(shù)據(jù)，也就是操作本地文件。

File對象是Blob【下面會提到】的特殊類型，即大塊的二進(jìn)制數(shù)據(jù)，File對象的尺寸及類型等屬性都繼承自Blob。

1)File對象可以通過3種方式獲取：

1. 元素上選擇文件后返回的FileList對象中的成員

2. 拖放操作【Drag或Drop】生成的?DataTransfer對象內(nèi)files屬性中的成員

3.?HTMLCanvasElement上執(zhí)行mozGetAsFile()方法后的返回結(jié)果

document.getElementById('upload').files[0]//選取第一個(gè)文件對象

2)File對象有9個(gè)屬性，這里就只介紹3個(gè)：

1.?name：當(dāng)前File對象所引用文件的文件名，不包括路徑，只讀。

2.?size：文件大小,單位為字節(jié),只讀的64位整數(shù).

3.?type：MIME類型,只讀字符串，如果類型未知，則返回null。有些移動端的瀏覽器明明選擇了圖片，返回的卻是null，非常坑。

還有3個(gè)非標(biāo)準(zhǔn)的方法：getAsBinary()、getAsDataURL()和getAsText(in DOMString encoding)。

這3個(gè)方法現(xiàn)在已經(jīng)過時(shí)，現(xiàn)在用FileReader對象中的方法來取代。

四、FileReader

web應(yīng)用程序可以異步的讀取存儲在用戶計(jì)算機(jī)上的文件(或者原始數(shù)據(jù)緩沖)內(nèi)容，可以使用File對象或者Blob對象來指定所要處理的文件或數(shù)據(jù)。

1)?readAsArrayBuffer()：在返回的result屬性中將包含一個(gè)ArrayBuffer對象【緩沖數(shù)組，是一種用于呈現(xiàn)通用、固定長度的二進(jìn)制數(shù)據(jù)的類型】以表示所讀取文件的內(nèi)容

Blob可以“append”，ArrayBuffer數(shù)據(jù)。ArrayBuffer存在的意義就是作為數(shù)據(jù)源提前寫入在內(nèi)存中，就是提前釘死在某個(gè)區(qū)域，長度也固定。

2)?readAsBinaryString()：result屬性中將包含所讀取文件的原始二進(jìn)制數(shù)據(jù)

3)?readAsDataURL()：result屬性中將包含一個(gè)data: URL格式的字符串以表示所讀取文件的內(nèi)容

4)?readAsText()：result屬性中將包含一個(gè)字符串以表示所讀取的文件內(nèi)容

下面的代碼是獲取data:URL，可以將返回的result內(nèi)容賦值給img的src，用于預(yù)覽等操作。

var reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function(e) {

var img = new Image();

img.src = this.result;

console.log(this.result);

};

console.log(this.result)內(nèi)容如下：

五、URL對象

URL對象是硬盤上指向文件的URL。上面的例子中獲取圖片的引用，通過讀取data URI，data URI是個(gè)一大串的字符。

圖片原本就在硬盤上，還要轉(zhuǎn)換成另一個(gè)格式再用，有點(diǎn)繞了，完全可以直接引用文件的URL，下面是兩個(gè)方法：

1) URL.createObjectURL()：接收一個(gè)文件的引用(File或Blob對象)返回一個(gè)URL對象

2) URL.revokeObjectURL()：銷毀創(chuàng)建的URL

var url = URL.createObjectURL(file);

var img = new Image();

img.src = url;

img.onload = function(e) {

window.URL.revokeObjectURL(this.src); //銷毀

}

console.log(url);

console.log(url)內(nèi)容如下：

在移動端需要做個(gè)兼容性判斷：

window.URL = window.URL || window.webkitURL;

六、Blob對象

Blob(binary large object)對象代表了一段二進(jìn)制數(shù)據(jù)，就是一個(gè)包含只讀原始數(shù)據(jù)的類文件對象。

File接口基于Blob，繼承了Blob的功能，并且擴(kuò)展支持了用戶計(jì)算機(jī)上的本地文件。

1)創(chuàng)建Blob對象的4種方法：

1. 調(diào)用Blob構(gòu)造函數(shù)

2. 使用一個(gè)已有Blob對象上的slice()方法切出另一個(gè)Blob對象

3. 調(diào)用canvas對象上的toBlob方法

4.?過氣的方法，通過BlobBuilder接口創(chuàng)建，但兼容性不好，并且現(xiàn)有的BlobBuilder實(shí)現(xiàn)都是帶前綴的

2)利用Blob對象，生成可下載文件

var blob = new Blob(["pwstrick"]);//數(shù)組中添加DOMString對象

var a = document.createElement("a");

a.href = URL.createObjectURL(blob);//創(chuàng)建URL對象

a.download = "test.txt";//HTML5新屬性

a.textContent = "test";

document.getElementsByTagName('body')[0].appendChild(a);

生成一個(gè)“a”標(biāo)簽，并且點(diǎn)擊這個(gè)鏈接，可以下載一個(gè)txt文本，內(nèi)容是“pwstrick”。

3)通過slice方法，將二進(jìn)制數(shù)據(jù)按照字節(jié)分塊，返回一個(gè)新的Blob對象

upload.addEventListener('change', function() {

var upload = document.getElementById('upload'); //每次要?jiǎng)討B(tài)獲取

var file = upload.files[0];

var start = 0;

var chunk = 1024 * 10; //10KB

var end = start + chunk;

var size = file.size;

while (start < size) {

segment(file, start, end);

start = end;

end = start + chunk;

if (end > size) {

end = size;

}

}

}, false);

function segment(file, start, end) {

var reader = new FileReader();

reader.onload = function(evt) {

console.log(['Read bytes: ', start, ' - ', end].join(''));

};

var blob = file.slice(start, end);

reader.readAsBinaryString(blob);

}

七、formData

利用FormData對象，可以使用鍵值對來模擬一個(gè)完整的表單，然后使用XMLHttpRequest發(fā)送這個(gè)"表單"。

使用FormData的最大優(yōu)點(diǎn)就是我們可以異步上傳一個(gè)二進(jìn)制文件。

var formData = new FormData();

formData.append("name", "value");//普通鍵值對

formData.append("blob", blob); //傳遞一個(gè)blob對象

formData.append("file", file); //傳遞一個(gè)file對象

var oReq = new XMLHttpRequest();

oReq.open("POST", "http://xx.com");

oReq.send(formData);

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的java 移动页面中的图片上传_HTML5移动端图片上传(一)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。