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中的哈希标记，但我更喜欢在保存时自行处理图像名称文件（也消除其他不良字符）。这样可以将文件名保存在一般的网络友好形式中，以便以后更容易避免问题。

无法从路径中检索图像

1 个答案: