FTP上传网页后显示不了图片和js,听别人说是路径问题 请问怎么改

FTP上传网页后显示不了图片和js,听别人说是路径问题 请问怎么改,第1张

网站根目录为wwwroot,不管哪个文件里引用其他文件,前面都加/就不会错。

比如你截图右侧这些文件是直接放在wwwroot目录下

那么yun4.htm里引用图片logo.gif,代码为<img src="/logo.gif">

如果你的图片logo.gif,是放在images文件夹里,那么代码为<img src="/images/logo.gif">

实际上是<img src="wwwroot/xxx/xxx">,在这个环境中wwwoot为根目录,/代表从wwwoot(根目录)开始的路径。

默认情况下kindeditor上传的图片在编辑器的根目录/attached/目录下。以日期建一个目录,然后保存文件。有些时候大概我们并不想这样。考虑到更新编辑器,或更换编辑器不太方便。比如我现在想把上传的文件保存在根目录下的uploadfiles目录下,需要修改以下代码:

首先,打开文件php\upload_json.php,在大约第16行到第19行,定义了文件保存目录路径和文件保存目录URL,我们需要修改为:

//文件保存目录路径

$save_path = $_SERVER['DOCUMENT_ROOT'].'\\uploadfiles\\'

//文件保存目录URL

$save_url = '/uploadfiles/'

解释一下:$save_path 即为最后保存文件的目录。这里就是根目录下的uploadfiles

$save_url 即为上传成功后,图片的URL地址。

这样,保存地址就变成了 根目录下的 uploadfiles/年月日/xxxxx.jpg了。

    产品提了一个需求,要求在一个html中实现多行多图片上传,原型图如下:

    2.1 :html

        html页面由前端实现,此处增加<ul><li></li></ul>是为了配合图片单击放大图片功能的实现

        <ul  id="ul_other">

              <li><input type="file" id="file_other" class="file_input" onchange="add_file_image('other')"></li>

        </ul>

    2.2 :js

        var imgSrc_other=[]

        var imgFile_other=[]

        function add_file_image(id) {

            var fileList =document.getElementById("file_"+id).files// js 获取文件对象

            if (verificationFile(fileList[0])){

                for(var i =0i

                    var imgSrcI =getObjectURL(fileList[i])

                        if (id=="other"){

                            imgSrc_other.push(imgSrcI)

                            if(fileList[i].size/1024 >100) { //大于100kb,进行压缩上传

                                 fileResizetoFile(fileList[i],0.6,function(res){

                                  imgFile_other.push(res)

                                })

                            }else{

                                imgFile_other.push(res)

                        }

                    }

                    addNewContent(id)

                }

        }

    //新增图片

    function addNewContent(obj) {

        //删除原先

        $("#ul_"+obj).html("")

        //判断循环新增

        var  text=""

        if (obj=="other"){

           for(var a =0a <imgSrc_examReportCard.lengtha++) {

            text +='<li><input type="file" id="file_other" class="file_input" onchange="add_file_image('other')"></li>'

           }

        }else{

            console.log('脏数据')

        }

        var oldBox ="<li><div class=\"filediv\"><span>+</span>\n" +

        "<input type=\"file\" id=\"file_"+obj+"\"  class=\"file_input\" onchange=\"add_file_image('"+obj+"')\">\n" +

        "</div></li>"

        $("#ul_"+obj).html( text+localText)

    }

    使用formData上传

    var form =document.getElementById("form_addArchive")//表单id

    var formData =new FormData(form)

    $.each(imgFile_other,function(i, file){

        formData.append('imgFileOther', file)

    })

$.ajax({

    url:url,

    type:'POST',

    async:true,

    cache:false,

    contentType:false,

    processData:false,

    dataType:'json',

    data:formData,

    xhrFields:{

        withCredentials:true

    },

    success:function(data) {

     }

  },

  error:function(XMLHttpRequest, textStatus, errorThrown) {

    }

})

后台使用@RequestParam(value ="imgFileOther", required=false) List<MultipartFile>imgFileOther, 接受

//获取图片url以便显示       

//文件格式验证

//图片压缩


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11808807.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-18
下一篇2023-05-18

发表评论

登录后才能评论

评论列表(0条)

    保存