最开始做这块的时候，主要是有两种方案
方案一利用微信提供的接口实现；参考链接：/lilinwei340/p/6379464.html
方案二，利用 输入输出流进行图片上传保存，在这里贴出代码来
<form id="originalForm" class="imgPic uploadForm" name="form"
action="" enctype="multipart/form-data">
<input name="resoType" value="images" style="display: none;" /> <input
id="fileNames" name="fileNames" value="" style="display: none;" />
<ul class="photoIds">
<li photoid="" class="upcam choosebtn"><a href="#"
οnclick="uploadImage($(this))"><img
src="../images/newJc/camera.png" class="camera"/></a></li>
</ul>
</form>
这里是存放图片的页面结构
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~图片的方法~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
var ua = navigator.userAgent.toLowerCase();//获取浏览器的userAgent,并转化为小写——注：userAgent是用户可以修改的
var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);//判断是否是苹果手机，是则是true
//创建input file 次数
var times = 0;
//选择图片的所有次数
var imageTimes = 0;
//选择图片
function uploadImage(that) {
times = times + 1;
isIos ? $(that).parent().before('<input name="imgList" class="abc" type="file" id="fileInput' + times + '" οnchange="showUpImage($(this))" style="display:none;" multiple="multiple" accept="image/*" capture="camera" name="cameraInput">') : $(that).parent().before('<input name="imgList" capture="camera" type="file" id="fileInput' + times + '" οnchange="showUpImage($(this))" style="display:none;" multiple="multiple" accept="image/*" capture="camera" name="cameraInput">');
$("#fileInput" + times).click();
}
//选择图片预览
function showUpImage(that) {
var id = that.attr('id');
var files = document.getElementById(id).files;
var fileNum = $(that).parents(".photoIds").find("li").length;
if (fileNum >= 3) {
$(that).parents(".photoIds").find(".choosebtn").hide()
}
for (var i = 0; i < files.length; i++) {
// $(that).parent().find(".upcam").before(
// '<li class="photoId' + imageTimes + '" photoId="' + files[i].name + '"><a href="#" οnclick="showBigImage(' + imageTimes + ')">'
// + '<img class="certImgAttach' + imageTimes + '" /><b class="deletImg" οnclick="removeImage(' + imageTimes + ')"></b>'
// + '</a></li>');
$(that).parent().find(".upcam").before(
'<li class="photoId' + imageTimes + '" photoId="' + files[i].name + '"><a href="#" οnclick="showBigImage($(this))">'
+ '<img class="certImgAttach' + imageTimes + '" /><b class="deletImg" οnclick="removeImage($(this))"></b>'
+ '</a></li>');
var imgObjPreview = document.getElementsByClassName("certImgAttach" + imageTimes)[0];
// 火狐下，直接设img属性
// 火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(files[i]);
imageTimes = imageTimes + 1;
}
}
//放大
function showBigImage(that) {
var nowImg = that;
$(nowImg).hasClass("bigImg") ? $(nowImg).removeClass("bigImg") : $(nowImg).addClass("bigImg")
}
//获取预览文件数
function getFileNumber() {
var fileNum = 0;
$(".photoIds li").each(function () {
if ($(this).attr("photoId") != null && $(this).attr("photoId") != "") {
fileNum = fileNum * 1 + 1;
}
});
return fileNum;
}
//移除
function removeImage(that) {
// var liLen = $(".photoId" + imgId).parent().find("li").length - 1
// if (liLen <= 3) $(".photoId" + imgId).parent().find(".choosebtn").show()
// $(".photoId" + imgId).add("#fileInput" + (imgId + 1)).remove()
var liLen = $("#mmm").find("ul:eq(0)").find("li").length - 1
if (liLen <= 3) $("#mmm").find(".choosebtn").show();
that.parent().parent().add($("#mmm").find("#fileInput"+(that.parent().parent().attr("class").slice(7)*1+1))).remove()
}
function getFileNames() {
var fileNames = "";
$(".photoIds li").each(function () {
if ($(this).attr("photoId") != null && $(this).attr("photoId") != "") {
fileNames = fileNames + $(this).attr("photoId") + ",";
}
});
if (fileNames != "") {
fileNames = fileNames.substring(0, fileNames.length - 1);
}
return fileNames
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~图片的方法~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
用到的js方法
这里只是页面的方法， 实现了页面的调取摄像头以及进行图片的回显，
$.ajax({
url: sessionStorage.getItem("httpSession") + 'Img/setPicUpload.do',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
dataType: "json",
success: function (returndata) {
if(returndata!=null && returndata.result.length>0){
for(var i=0;i<returndata.result.length;i++){
photo+=returndata.result[i]+">"
}
}else{
photo=null;
}
if(photo!=null){
photo=photo.slice(0,photo.length)
}
photos.push(photo);
}
})
图片进行后台交互存储用的是转为formData 进行ajax传输
@RequestMapping(value = "/setPicUpload.do", produces = { "text/html;charset=UTF-8;", "application/json;" })
@ResponseBody
public Map<String,Object> setPicUpload(@RequestParam(required = false, value = "imgList") List<MultipartFile> file,
HttpServletResponse response) throws IOException {
response.setHeader("Access-Control-Allow-Origin", "*");
ResponseObject result = new ResponseObject();
List<String> list = new ArrayList<String>();
Map<String,Object> map=new HashMap<String, Object>();
// 文件返回路径
for (int i = 0; i < file.size(); i++) {
if (file.get(i).getOriginalFilename() == null || file.get(i).getOriginalFilename().equals("")) {
continue;
} else {
try {
String path = infoScopeImgReportService.uploadPic(file.get(i).getBytes(), file.get(i).getOriginalFilename(),
file.get(i).getSize());
// 获取url
String url = fdfsClientConf.init.getStorage();
// String[] split = url.split(":");
list.add(url + path);
} catch (Exception e) {
// 删除案卷的操作
e.printStackTrace();
}
}
}
map.put("result", list);
return map;
}
后台为ssm框架，这位controller层，图片存储用的fastDFS,进行的图片存储，这里完成了图片的存储，当然这种做饭有一点不好的是，由于机型太多的原因，有几类手机是无法实现图片上传的，其实不是无法存储，而已利用input调不起手机的摄像头，目前知道的华为 mate9。苹果5s是有问题的。目前正在适配此类机型，后续进行更新。
