闲话不多说,开发背景也不是大家关心的话题。就直接说实现如题功能
首先,你的手机要支持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/)