H5页面中通过JQuery的方式实现相机、相册、拍摄视频三种方式的文件上传,Java后端通过Servlet的方式来接收上传的文件并写入的服务端存储目录中。
前端HTML文件:
<div class="log" style="text-align: center;float: left;width: 65px;margin: 20px 5px 0px 30px;font-size: 13px;color: #333;" >
<a id="postfile_camera" style="" class="file">
<img src="img/img_cam.png" style="width: 65px;cursor: pointer;" for="file_camera" >
<input type="file" name="file_camera" id="file_camera" accept="image/*" capture="camera" style="opacity: 0;height: 85px;width: 65px;position: absolute;z-index: 11;top: 20px;left: 30px;">
<span class="log_text" >拍照</span>
</a>
</div>
<div class="log" style="text-align: center;float: left;width: 65px;margin: 20px 5px 0px 30px;font-size: 13px;color: #333;" >
<a id="postfile_video" style="" class="file">
<img src="img/video.png" style="width: 65px;cursor: pointer;" for="file_video" >
<input type="file" name="file_video" id="file_video" accept="video/*" capture="camcorder" style="opacity: 0;height: 85px;width: 65px;position: absolute;z-index: 11;top: 20px;left: 130px;">
<span class="log_text" >录像</span>
</a>
</div>
<div class="log" style="text-align: center;float: left;width: 65px;margin: 20px 5px 0px 30px;font-size: 13px;color: #333;" >
<a id="postfile_" style="" class="file">
<img src="img/img_pic.png" style="width: 65px;cursor: pointer;" for="file_pic">
<input type="file" name="file_pic" id="file_pic" accept="image/*" style="opacity: 0;height: 85px;width: 65px;position: absolute;z-index: 11;top: 20px;left: 230px;">
<span class="log_text" >相册</span >
</a>
</div>
前端JS文件,通过Ajax方式提交文件:
var send_file_num = 0;
//相机拍照上传
$('#file_camera').localResizeIMG({
width: 800,
quality: 1,
success: function (result) {
send_file_num ++;
var num = send_file_num;
sendImgFile(result, num);
console.log(result);
},
before: function(thisObj, blob, file){
console.log