手机浏览器<input type="file">标签调用手机拍照+分片上传

闲话不多说，开发背景也不是大家关心的话题。就直接说实现如题功能

首先，你的手机要支持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/）