JavaWeb+Jquery制作图片表单内容上传

原创
小哥 3年前 (2022-11-14) 阅读数 5 #大杂烩

博主在这里转换图片base64了, 因为这不是我的项目, 很老。所以很难写

直接转到代码, 还不是最严格的版本, 有许多判断可以自己添加。

function FileUpload_onselect(el) {
            console.log("选择文件");
            img2Base64($(#goodsPic)[0], function(data) {
                $(.userPhoto).attr(src, data);
        })
        }
        function submitAddGood(baseurl) {
            let goodsPic = $(#goodsPic)[0].files[0];
            console.log(goodsPic);
            img2Base64($(#goodsPic)[0], function(data) {
                $(#picUrl).attr(value, data);
                $.ajax({
                    type : "POST",
                    url : baseurl + "/user/addSellerGood.action",
                    data : $(#addGoodInfo).serialize(),
                    ContentType : false,
                    processData : false,

                    success : function(res) {
                        if (res.add == true) {
                            $("#msgTitle").html("Success");
                            $("#msgBody").html("提交成功");
                            $("#msgModal").modal();
                            location.reload();
                        } else {
                            $("#msgTitle").html("Failed");
                            $("#msgBody").html(res.msg);
                            $("#msgModal").modal();
                        }
                    },
                    error : function(res) {

                    }
                });
            });

        }

        // 转换图片文件Base64
        function img2Base64(input_file, get_data) {
            /*input_file:文件按钮对象。*/
            /*get_data: 转换成功后执行的方法。*/
            if (typeof (FileReader) === undefined) {
                console.log("图片异常")
            } else {
                try {
                    /*图片转Base64 核心代码*/
                    var file = input_file.files[0];
                    console.log((file.type));
                    console.log((file.type).toString().substring(0,5));
                    //判断类型,如果不是图片则返回。 您可以通过删除任何文件来上载它。
                    if (file.type.substring(0,5) !== image) {
                        return false;
                    }
                    var reader = new FileReader();
                    reader.onload = function() {
                        get_data(this.result);
                    }
                    reader.readAsDataURL(file);
                } catch (e) {
                    console.log("图片img2base64:转换失败")
                    alert("请上传图片格式的文件")
                    $("#goodsPic").val(""); 
                }
            }
        }

Html:

新商品信息:

图片缩略图

版权声明

所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除