html5视频前端视频上传，手机拍照上传，手机录像上传
我cao，真不知道该怎么说。看图吧
就是让客户点击按钮的时候可以触发到图二，手机自带的录像机。录像之后再上传。
当时的需求就是，（微信里面的）手机页面可以上传视频，也可以想图二那样。就是可以触发手机的录像功能！！
（说真的这功能写的真是头疼。看了各种大神的帖子博客啥的。小白，我就不诉苦了。）
放几个链接：
html5调用手机摄像头地址：
http://www.qdfuns.com/notes/26716/2d4fea81a990f8532ce7fa43af286add.html
（原来html5新特性直接就可以调用到手机的一些自带的比如相机啊，录像啥的。看到了希望。）
图片上传地址：
http://www.qdfuns.com/notes/18123/7110b12b485098aab5dfc2c59760688c.html
我是写完了图片上传之后才看见这个（宝宝心里苦。）
另外视频上传所借鉴参考文章地址：
http://blog.csdn.net/journey191/article/details/40744015
（这个我发现太高深我看不懂，有些方法已经过时了）
http://www.jq22.com/jquery-info2247
（这个我忘了，反正我也试了好久。感觉不是我要的，我就放弃了这个。）
http://blog.csdn.net/smm188/article/details/50750437
（这个也看了一遍就放弃。）
我并不怎么想用插件来做。（我只想简单的做出来）
http://www.cnblogs.com/hutuzhu/p/5254532.html
完美解决！！！我基本就是抄的，奥，不，借鉴，借鉴。
另外借鉴css样式地址：
http://www.haorooms.com/post/css_input_uploadmh
HTML
#######################
图片上传
content="width=device-width,initial-scale=1,user-scalable=0">
填写报修单
选择项目和设备
文字描述
id=uploader>
0/5
accept=image/* capture="camera" multiple>
#######################
(function($) {
$.extend($.fn, {
fileUpload: function(opts) {
this.each(function(){
var $self = $(this);
var doms = {
"fileToUpload": $self.find(".fileToUpload"),
"thumb": $self.find(".thumb"),
"progress": $self.find(".upload-progress")
};
var funs = {
//选择文件，获取文件大小，也可以在这里获取文件格式，限制用户上传非要求格式的文件
fileSelected: function() {
var files = (doms.fileToUpload)[0].files;
var count = files.length;
// console.log(files);
// console.log(count);
for (var index = 0; index < count; index++) {
var file = files[index];
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
// console.log(fileSize);
}
funs.uploadFile();
},
//异步上传文件
uploadFile: function() {
var fd = new FormData();//创建表单数据对象
var files = (doms.fileToUpload)[0].files;
// console.log(files[0].name);
$("#fileName").text(files[0].name);
var count = files.length;
for (var index = 0; index < count; index++) {
var file = files[index];
fd.append(opts.file, file);//将文件添加到表单数据中
// funs.previewImage(file);//上传前预览图片，也可以通过其他方法预览txt
}
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", funs.uploadProgress, false);//监听上传进度
xhr.addEventListener("load", funs.uploadComplete, false);
xhr.addEventListener("error", opts.uploadFailed, false);
xhr.open("POST", opts.url);
console.log(fd);
xhr.send(fd);
},
uploadProgress: function(evt) {
// console.log("----------------------");
// console.log(evt);
// console.log(evt.lengthComputable);
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
//doms.progress.html(percentComplete.toString() + '%');
$("#qin_progress").css("width",percentComplete.toString() + '%');
}
},
uploadComplete: function(evt) {
console.log(evt);
console.log(evt.target.responseText);
var text=evt.target.responseText;
var d = eval("(" + text + ")"); //把数据转成json
var mp4Url = d.fileVal;
console.log(mp4Url);
document.cookie = "mp4Url="+mp4Url;
}
};
doms.fileToUpload.on("change", function() {
doms.progress.find("span").width("0");
funs.fileSelected();
});
});
}
});
})(Zepto);controller（我用的是JFinal框架）
// 上传的视频
public void custVedioCon() {
// TODO Auto-generated method stub
String path = "custMp4";
// 获取上传的文件
UploadFile uf = getFile("myFile",path);//就是html设置的myFile
//System.out.println(uf);
//System.out.println(uf.getSaveDirectory());
// 拼接文件上传的完整路径
long mediaid = System.currentTimeMillis();
String rename = mediaid +"."+FileHelper.getExtName(uf.getFileName());
boolean bRet = FileHelper.renameFile(uf.getSaveDirectory(), uf.getFileName(),rename);
String fileName = "uploads/"+path+"/"+uf.getFileName();
if(bRet)
{
fileName = "uploads/"+path+"/"+rename;
}
//System.out.println("vediopahh="+fileName);
this.setAttr("fileVal", fileName);
System.out.println(fileName);
//System.out.println(mediaid);
//this.setAttr("file", mediaid);
//以json格式进行渲染
this.renderJson();
}
我写的可能很乱，我也是知道的。慢慢来吧