Ajax网址GET 404错误

Question

I'm trying Ajax on loading all pictures inside one local folder onto my html page. Code references this question. Files run on (Tomcat 8.5) server in Eclipse first and I open url in Google Chrome. Then Ajax fails according to the console:

GET /Users/jiaqni/.../WebContent/upload 404 ()

Any idea what I did wrong? Relative path "dir='upload/';" neither works. Thanks guys!

<script>
    $(document).ready(function(){
        console.log("Image appending...");
        var dir = "/Users/jiaqni/.../WebContent/upload/";
        var regexp = new RegExp("\.png|\.jpg|\.jpeg");
        $.ajax({
            url: dir,
            success: function (data) {
                //List all .png .jpg .jpeg file names in the page
                console.log("Success!");
                $(data).find("a").filter(function(){return regexp.test($(this).text());}).each(function(){
                    var filename = this.href.replace(window.location, "");
                    ...
                });
            }
        });
    });
</script>

.htaccess was added to folder /User/.../upload/ to ensure it's browsable. And without Ajax, <img src="upload/xxx.jpeg"/> does display image in that folder.

Answer 1

I am guessing that the URL in question here refers to a local resource on your computer.

Unfortunately, this is not possible - usually browsers (e.g., Google Chrome) prevent you from doing so (due to privacy & security issues that may arise by allowing it).

You should put your files in your web server (e.g., Apache, ngnix, etc.) and adjust the URL of the AJAX request accordingly.

Good luck.