閒話不多說，開發背景也不是大家關心的話題。就直接說實現如題功能
首先，你的手機要支持html5吧（現在應該都支持吧
）
然後，html代碼只要一句<input>就夠了
<input type="file" id="file" accept="image/*" />
<button id="upload" class="btn" >上傳</button>
這樣頁面就會有出現一個選擇文件的對話框了。
ios上的效果。
然後點擊選擇文件，手機會提示你是要拍照還是選擇已有圖片
在ios上試了只要這樣就能調用拍照功能，但在android上試了不行，然後加個capture屬性
<input type="file" id="file" accept="image/*" capture="camera" />
網上也找到這麼個寫法
<input type="file" id="file" accept="image/*;capture=camera" />
但是我充話費送的手機上面測試方法二不行，可能是不同安卓兼容性不一樣吧。
在這裏accept="image/*"只獲取圖像，你也可以捕獲視頻、音頻。如下：
<!--調用手機攝像頭-->
<input type="file" id="file" accept="video/*" capture="camcorder" />
<!--調用錄用功能-->
<input type="file" id="file" accept="audio/*" capture="microphone" />
好了，這個是html代碼，然後是js
var page = {
init: function(){
$("#upload").click($.proxy(this.upload, this));
},
upload: function(){
var guid = new GUID();
var strGuid = guid.newGUID();//因爲是同一文件分片上傳，在服務器生成fileNumber會不一致，所以這邊先生成後傳到服務器
//分片上傳
var file = $("#file")[0].files[0], //文件對象
name = file.name, //文件名
size = file.size, //總大小
chenggong = 0;
var shardSize = 4 * 1024 * 1024, //以4MB爲一個分片
shardCount = Math.ceil(size / shardSize); //總片數
for(var i = 0;i < shardCount;i++){
//計算每一片的起始與結束位置
var start = i * shardSize,
end = Math.min(size, start + shardSize);
try
{
//構造一個表單，FormData是HTML5新增的
var form = new FormData();
form.append("name", name);
form.append("total", shardCount); //總片數
form.append("index", i + 1); //當前是第幾片
form.append("data", file.slice(start,end)); //slice方法用於切出文件的一部分
form.append("guid", strGuid);
//Ajax提交
$.ajax({
url: "UploadFile.ashx",
type: "POST",
data: form,
async: false, //是否異步
processData: false, //很重要，告訴jquery不要對form進行處理
contentType: false, //很重要，指定爲false才能形成正確的Content-Type
success:function(response){
chenggong++;
if(chenggong == shardCount)
{
alert("上傳成功");
}
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert("上傳第"+(i+1)+"個片段失敗");
},
complete: function (XHR, TS) {
XHR = null
}
});
}
catch(e)
{
alert(e.message);
}
}
}
};
$(function(){
page.init();
});那個strGuid是我上傳到服務器的文件編號，因爲如果在服務器生成，可能不同的文件片的編號不一樣，這樣服務器合併文件的時候就不知道誰是誰了，所以我這裏先生成一個上傳上去。讀者可忽略。
UploadFile.ashx是我的上傳處理程序，聰明的你一定能自己寫出來。
具體思路的話就是：上傳一個片段就保存一個，然後indx==total的時候就把這幾個合併成一個文件。
最後的最後。
我這邊測試的時候出現一個問題：就是Iphone上，使用自帶瀏覽器Safari，拍照完之後 或者是 拍好照點擊"使用照片"，有時會不成功，提示"因出現錯誤，重新加載頁面"。其他瀏覽器更離譜，如微信、UC非自帶的，直接就推出系統了。目前沒有找到原因。求路過的大神解救。（注：我的手機沒有越域過，所以不是越域的問題）
（分片上傳，感謝http://boytnt.blog.51cto.com/966121/1552759/）