Search code examples
jqueryjquery-file-upload

Change jQuery File Upload Script

I am trying to use the jQuery File Upload plugin (http://blueimp.github.io/jQuery-File-Upload/) for image upload for my website. By default, when uploading a image, it will go to the script located at "server/php/" path.

So, how can I customize the upload script location?

My Script:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        url: 'upload/index.php',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});
</script>
</body> 
</html>

Thank you.

Solution

  • This is definitely set by the url option:

    https://github.com/blueimp/jQuery-File-Upload/wiki/Options#url

    And for your example code, if you intend to use upload/index.php ... use a / at the beginning.

    The code should be:

    $(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        url: '/upload/index.php', //de Added "/" at start of relative URI.
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});

    If you don't use the / at the start, the upload target will be relative to the address of wherever the script showing the uploader is.