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

最新推荐文章于 2024-02-22 10:04:44 发布

w天空

最新推荐文章于 2024-02-22 10:04:44 发布

阅读量2.4k

点赞数

分类专栏： javascript 文章标签：手机

本文链接：https://blog.csdn.net/w632235548/article/details/54576970

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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");
                $(".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;
    }

w天空

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
H5访问手机相册与照相上传至服务器

html 页面：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #imageList li{ list-style: none; http://wr
复制链接

扫一扫