1

PROBLEM:

The JQuery File Upload plugin works fine when I open its basic-plus.html file in the browser, but it links to a few .css and .js files on the internet in the href and src attributes of its style and script tags.

After I downloaded those files from the internet and linked to their local versions in basic-plus.html, I get File Upload Failed when I try to upload a file.

The question is why and how do I fix this?

EXPLANATION:

I am trying to use the JQuery-File-Upload plugin. I followed their setup guide and it worked. That is I downloaded the .zip repository from their Github and extracted it in my LAMPP's htdocs folder. Then I opened basic-plus.html in browser and it worked perfectly fine.

enter image description here

The thing is that the basic-plus.html has the following statements:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/vendor/jquery.ui.widget.js"></script>

<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>

<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>

<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

That is, this .html page is including .css and .js files from the internet.

My requirement is to make a webpage (which contains a PHP file uploader) which works offline.

So I opened in the browser the links given in the values of href and src attributes of the <link> and <script> elements above, and I downloaded those .css and .js files into my project folder, and changed the paths in the values of href and src attributes to local paths where I placed the files:

<!-- Bootstrap styles -->
<link rel="stylesheet" href="css/bootstrap.min.css">
...

<script src="js/jquery.min.js"></script>

<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/vendor/jquery.ui.widget.js"></script>

<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="js/load-image.all.min.js"></script>

<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="js/canvas-to-blob.min.js"></script>

<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
<script src="js/bootstrap.min.js"></script>

Now when I open basic-plus.html in the browser, I get File Upload Failed when I try to upload a file.

enter image description here

Why is this happening? How can I fix it?

Louys Patrice Bessette
  • 33,375
  • 6
  • 36
  • 64
Shy
  • 542
  • 8
  • 20

0 Answers0