C:\fakepath\如何解决在线等

深海里的BB君 2020-04-23 07:09:00

在网上找到了一串代码怎么用呢
网上找的代码

我使用ajax上传的图片

a为undefined

在线等急！

...全文

1107 5 打赏收藏举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

深海里的BB君 2021-02-25

打赏
举报

引用 4 楼 tianyl0n 的回复:

楼主，你是怎么解决的，我现在也有个需求要获取上传文件的绝对路径

var array=[];//用来存储图片地址的数组，从而存放到数据库中，每次关闭模态框的时候数组就要重置为空

/**
 * 上传图片
 */
$("#productPicDiv").change(function () {
    var formData=new FormData();
    var productPic=$("#productPicId")[0].files[0];
    formData.append("productPic",productPic);
    $.ajax({
        url:"/product/uploadProductPic",
        type:"post",
        data:formData,
        contentType:false,//告诉jquery不要设置content-type的请求头
        processData:false,//告诉jquery不要去处理发送的数据
        success:function (data) {
            //添加图片的按钮要动态变化，每次先移走，最后再创建
            $("#addProductPicBtn").remove();
            //用于上传数据的图片地址数组
            array.push(data);
            //加入的图片
            addProductPic(data);
            if(array.length<3){
                //添加图片的按钮，但最多上传三张照片，超过三张就不显示这个添加图片的按钮了，也就是不允许再添加图片了
                addProductPicBtn();
            }
            else{
                $("#addProductPicBtn").remove();
            }
        },
        error:function (data) {
            falseProductPic.style.display='block';
        }
    });
});

/**
 * 添加的商品图片
 */
function addProductPic(data) {
    var img=document.createElement("img");
    img.src=data;
    img.height=80;
    img.width=80;
    var icon=$("<button style='position: absolute;padding-top: -10px;margin-left: 60px'></button>").addClass("mdi mdi-close-circle-outline").addClass("mybutton");
    var div=$("<div style='margin-right: 15px;'></div>").append(img);
    $("<div></div>").append(icon).append(div).appendTo("#productPicDiv");
    icon.click(function () {
        //点击按钮删除图片
        $(this).parent().remove();
        //获取当前元素下在data数组里的索引
        var index=array.indexOf(data);
        //删除array数组里的这个元素
        if(index>-1)
            array.splice(index,1);//splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
        //删除完之后要继续判断当前照片个数，从而决定是否要显示添加图片按钮
        if(array.length==2){
            //添加图片的按钮，但最多上传三张照片，超过三张就不显示这个添加图片的按钮了，也就是不允许再添加图片了
            addProductPicBtn();
        }
    })
}

/**
 * 添加图片按钮
 */
function addProductPicBtn() {
    var text=$("<div></div>").addClass("myaddpicText").append($("<span>+</span>")).append($("<p></p>").append("点击上传"));
    var input="<input type='file' id='productPicId' name='productPic' multiple='multiple' class='custom-file-input'>";
    $("<div id='addProductPicBtn'></div>").addClass("myaddpicBtn").addClass("col-md-3").append(text).append(input).appendTo("#productPicDiv")
}

前台代码：

 <%--上传商品图片--%>
                                <label class="mylabel">商品图片（4：3的比例最佳）</label>
                                <%--上传的过程在js--%>
                                <div class="row" id="productPicDiv" style="margin-left: 10px" ></div>
                                <small id="falseProductPic" class="invalid-feedback">上传的图片大小不超过10M</small>