您的位置：首页 > Web前端 > HTML5

H5访问手机相册与照相上传至服务器

2017-01-16 19:59 225 查看

html 页面：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#imageList li{
list-style: none;
float: left;
padding-left: 10px;
}
#imageList li img{
display: block;
width: 0.933rem;
height: 0.933rem;
vertical-align: top;
}
</style>
<script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<form id="form" enctype="multipart/form-data" method="post">
<div class="e-upload">
<ul class="e-upload-ul" id="imageList">

</ul>
<a class="e-upLoad-a"><input type="file"  name="files[]" accept="image/*;" capture="camera" class="imgUpload"></a>
<div class="uploadTxt">共<span id="imageCount">0</span>张，还能上传<span id="limitCount">3</span>张</div>
</div>
<div class="btnBar">
<button class="e-btn-red" id="btn-submit" type="button">提 交</button>
</div>
</form>

<!-- 查看大图 -->
<div class="imgPreview" style="display: none">
<img src="">
</div>

<script>
$(function(){
$(".imgUpload").change(
function (e) {
uploadChange(e,this);
});

$(".imgPreview").click(function(){
$(this).hide();
});
})
function uploadChange(e,target){
if(e.target.files.length==1){
$(target).parent().hide();
$(target).parent().after("<a class='e-upLoad-a'><input type='file'  name='files[]' accept='image/*;' capture='camera' class='imgUpload'></a>");
$(".e-upLoad-a:last").find('input').change(
function (e) {
uploadChange(e,this);
});
}
for (var i = 0; i < e.target.files.length; i++) {
var file = e.target.files.item(i);
var fileSize=file.size;
if(fileSize>5242880){
alert("上传图片大小不能超过5MB");

4000
$(".e-upload").children('a').eq(-2).remove();
continue;
}
//允许文件MIME类型 也可以在input标签中指定accept属性
//console.log(/^image\/.*$/i.test(file.type));
console.log(e);
if (!(/^image\/.*$/i.test(file.type))) {
alert("请上传图片");
$(".e-upload").children('a').eq(-2).remove();
continue; //不是图片 就跳出这一次循环
}
var len = e.target.files.length;
if (len > 3) {
alert("最多只能上传3张图片");
break;
} else {
var imageOriginalCount = $("#imageCount").text();
var imageNewCount = len + parseInt(imageOriginalCount);
if (imageNewCount > 3) {
$(".e-upload").children('a').eq(3).remove();
showMsgTip("最多只能上传3张图片");
break;
} else {
var imageCount = $("#imageCount").text(imageNewCount);
var currentCount = $("#limitCount").text();
$("#limitCount").text(currentCount - len);
console.log(e.target.files);
for (var i = 0; i < len; i++) {
showimg(e.target.files[i]);
}
}
}

}
}

function showimg(img){
var a = new FileReader();
a.readAsDataURL(img);
a.onload=function(){
var img = new Image();
img.src=a.result;
img.onclick=function(){
var imgSrc = $(this).attr('src');
$('.imgPreview').show().find('img').attr('src',imgSrc);
}
var imgLi = document.createElement("li");
var imgA=document.createElement("a");
imgA.onclick=function(){
var index=$(this).index();
$(".e-upload").children('a').eq(index).remove();
var imageCount = $("#imageCount").text();
var limitCount = $("#limitCount").text();
$("#imageCount").text(parseInt(imageCount)-1);
$("#limitCount").text(parseInt(limitCount)+1);
$(this).parent().remove();
}
imgA.setAttribute("class",'close');
imgA.setAttribute("href",'javascript:;');
imgLi.appendChild(imgA);
imgLi.appendChild(img);
document.getElementById('imageList').appendChild(imgLi);

}
}
</script>
</body>
</html>

java 后台

@RequestMapping("/commit")
@ResponseBody
public CsJmResult commit(DefaultMultipartHttpServletRequest multipartRequest, HttpServletResponse response){
CsJmResult csJmResult = null;
List<String> picUrls=new ArrayList<String>();
response.setContentType("text/text;charset=utf-8");
try{
if (multipartRequest != null) {
Iterator<String> iterator = multipartRequest.getFileNames();
while (iterator.hasNext()) {
List<MultipartFile> multipartFileList= multipartRequest.getFiles(iterator.next());
for(MultipartFile multipartFile:multipartFileList){
if(multipartFile.getSize()==0){
continue;
}
String fileName = multipartFile.getOriginalFilename();
InputStream is = multipartFile.getInputStream();
String objectKey = JFSObjectKeyUtil.generateDirObjectKey(IMAGE_SHORT_PATH, fileName);
// 上传至服务器
JFSCommand.uploadFile(JFSConstant.JFS_BUCKET_NAME, is, objectKey);

String imgUrl = JFSObjectKeyUtil.getObjectURL(objectKey);
picUrls.add(imgUrl);
logger.info("imageUrl:" + imgUrl);
}
}
}
csJmResult = jmFeedbackService.commitFeedback(customeMobile,customeName,billType,billCode,questionDesc,createPin,createName,picUrls);
}catch (Throwable throwable){
Profiler.functionError(umpInfo);
logger.error("提交反馈失败_FeedbackController.commit__Error", throwable);
}finally{
Profiler.registerInfoEnd(umpInfo);
}
return csJmResult;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 手机

相关文章推荐

新的分享

章节导航