无法从路径中检索图像

Question

我在显示我的图片时遇到了一些问题。当我尝试上传名称中带有哈希字符的图像时，例如：Dragon's3-#2.jpg，它不会加载。我已经检查了双引号，如果它们可能是原因，但它们不是。这是我的看法：

    <div class="row">
    <div class="col col-54">
        <div class="box-advert-img radius-5 js_advert_box">your advertisement</div>
        <input type="hidden" name="path" class='js_advert_file_val'>
    </div>
    <div class="col col-46">
        <div class="box-new-logo border radius-5 wid_155">
            <input type="file" class='js_advert_file' required="">
                <i class="fa fa-picture-o" aria-hidden="true"></i>
                    Upload image
        </div>
        <div class="service__text service__text_pad">
            File: JPG, PNG<br> Size: 180х60, up to 700Kb
        </div>
    </div>

还有 ajax：

  $('.js_advert_file').change(function(){
    var file = $(this);
    var formData = new FormData();
    formData.append( 'advert', $(this)[0].files[0] );
    $.ajax({
        url: "/back-door/advert/ajax-image",
        type: 'POST',
        data: formData,
        async: true,
        success: function (data) {
            console.log(data);
            if (data!='0' && data!='1') {
                $('.js_advert_box').css('padding', '0');
                $('.js_advert_box').empty();
                $('.js_advert_box').append('<img src="'+data+'" style="width: 100%;" />');

                $('.js_advert_file_val').val(data);
            }
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

这是错误日志：

Answer 1

哈希字符是 URL 中的特殊字符。

URL 中的散列字符表示片段，散列字符后面的内容不会作为请求的一部分发送到服务器。它对客户端页面可用，并且可以被脚本引用和使用，但服务器将不会收到超过该点的内容。例如，如果您有一个类似以下行的 URL：

http://www.fake.org/folder/image#name.jpg

...只有 # 字符之前的部分实际上会被发送到服务器以检索文件。在这种情况下，它将查找http://www.fake.org/folder/image，但找不到它，并抛出一个与您链接的错误非常相似的错误。

要解决此问题，您可以对图像的请求进行 URL 编码，从您在脚本中引用的 URL 中消除井号标签，但我更愿意在保存文件时自行处理图像名称 (还消除了其他不良字符）。这将使文件名保持通常对网络友好的形式，并且更容易避免以后出现问题。