h5图片、视频预览、跟表单一起上传

最新推荐文章于 2025-02-16 05:00:00 发布

Ai糖宝

最新推荐文章于 2025-02-16 05:00:00 发布

阅读量9.4k

点赞数 4

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u012480620/article/details/53009011

版权

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

自己遇到的问题：

在网上找了一会没有符合自己条件的，就算有，样式什么的也不愿意自己去改，而且很多只是单独上传图片，预览的，

我重新写了一个其实就是拿到所有的file，遍历，让后把file文件放到img标签中，然后上传的时候取出来，放到formdata中，上传

废话不多说

主要js：只是实现了功能，并且调接口测试没问题，至于美化，我就真不擅长了，毕竟做还是做后端的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js" type="application/javascript"></script>
</head>
<body>
<input type="text" id="test"/>
<input id="uploadInput" type="file"  name="files[]"  multiple="multiple"/>
<span id="submitBtn">提交</span>
<div id="imgs">

</div>
</body>
<script>
  var formdata = new FormData();

    $(function () {
        //图片上传
        $("#uploadInput").on("change", function (obj) {
            var files = obj.target.files || obj.dataTransfer.files;//js获取所有文件
            //var files = $(obj).get(0).files;//jquery获取所有文件
            if (imgFilter(files) == false) {
                return flase;
            }

            //判断上传的图片跟页面上的图片，如果已经上传了，不需要重新上传
            var imgList = $("img[data-flag='flag']");//获取所有的img
            $.each(files, function (i, item) {
                var objUrl = getObjectURL(item);
                var a = true;
                if(imgList.length>0){
                    $.each(imgList, function (j, val) {
                        var fileName = $(val).data("img").name;
                        var fileSize = $(val).data("img").size;
                        if (fileName == item.name && fileSize == item.size) {
                            a = false;
                        }
                    });
                }
                if (a) {
                    var html = "";
                    html += "<div>";
                    html += "<img id='col-img' class='imgSet' data-flag='flag' src='" + objUrl + "'>";
                    html += "<span οnclick='$(this).parent().remove();' id='del' class='deleteButton'>删除</span>";
                    html += "</div>";
                    $("#imgs").append(html);
                    var img = $("#imgs>div").last().children("img");//获取新生成的img标签
                    img.data("img",item);//将file放到img当中
                }

            })
            $("#uploadInput").val("");//清空刚才选中的图片，bug：选中一张，如果重新选择，不执行change方法， 所以清空file，就会执行change方法
        });


        //提交按钮
        $("#submitBtn").on("click", function () {
            //获取图片，放到form中
            var imgList = $("img[data-flag='flag']")
            $.each(imgList, function (j, value) {//添加图片
                formdata.append("uploadImgs", $(value).data("img"));
            });

            $.ajax({
                url: "http://localhost:8080/liuyan/contentController.do?method=upload",
                type: "POST",
                data: formdata,
                cache:false,
                processData: false,  // 告诉jQuery不要去处理发送的数据
                contentType: false   // 告诉jQuery不要去设置Content-Type请求头
            });
        })
    });

    //获取文件地址，显示预览用
    var getObjectURL = function (file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    };

    //图片过滤
    var imgFilter = function (files) {
        var a = true;
        for (var i = 0, file; file = files[i]; i++) {
            console.log(file);
            console.log(file.type);
              if (file.type.indexOf("image") == 0) {
                if (file.size >= 512000) {
                    alert('您这张"' + file.name + '"图片大小过大，应小于500k，请重新上传');
                    a = false;
                }
            } else {
                alert('文件"' + file.name + '"不是图片。请重新上传');
                a = false;
            }
        }
        return a;
    }


</script>
</html>

那么测试后台代码：

@RequestMapping(params = "method=upload")
    public void upload(@RequestParam(value = "files[]", required = false) MultipartFile[] files,@RequestParam(value = "test", required = false) String test){
        System.out.println("fileLength,"+files.length);
    }

测试结果截图：