Home > php > Blueimp jQuery-File-Upload - file upload failed: script doesn't call server/php/

Blueimp jQuery-File-Upload - file upload failed: script doesn't call server/php/

January 21Hits:20
Advertisement

I use Blueimp Jquery-File-Upload (https://github.com/blueimp/jQuery-File-Upload) for uploading pictures to the server.

Setting up the demo. When I setup this plugin in the root as described in the documentation, all works fine. I even modified some of the code so I can run it on localhost/jsVR/vendor/ So far, so good.

Integration in a existing form I modified an existing form and added "basic-plus.html" to the code which results in this:

<!DOCTYPE HTML> <html>     <head>         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">         <title>BOMmeldingen - Veiligheidsregister</title>         <link rel="icon"              type="image/png"              href="img/favicon.ico">         <link id="style" rel="stylesheet" type="text/css" href="/jsVR/css/style.css">         <link id="easyui-style" rel="stylesheet" type="text/css" href="/jsVR/js/jquery-easyui/themes/default/easyui.css">         <link id="easyui-icons-style" rel="stylesheet" type="text/css" href="/jsVR/js/jquery-easyui/themes/icon.css"> <!-- scripts to use in the form -->          <script type="text/javascript" src="/jsVR/js/jquery-1.11.3.js"></script>                 <script type="text/javascript" src="/jsVR/js/jquery-easyui/easyloader.js"></script>         <script type="text/javascript" src="/jsVR/js/jquery-easyui/jquery.easyui.min.js"></script>     </head>     <body>         <div id="header-container"></div>         <div id="index-container" class="easyui-panel" data-options="{border: true}" style="">             <link rel="stylesheet" href="js/jquery-file-upload/css/blueimp-gallery.min.css"> <link rel="stylesheet" href="js/jquery-file-upload/css/bootstrap.min.css"> <!--<link rel="stylesheet" href="css/style.css">--> <link id="js/jquery-file-upload-Style" rel="stylesheet" type="text/css" href="js/jquery-file-upload/css/jquery.fileupload.css"> <!--<link id="js/jquery-file-upload-Demo-style" rel="stylesheet" type="text/css" href="js/jquery-file-upload/css/jquery.fileupload-ui.css">-->  <style>       .lbl{         width: 30px;     } </style>  <!-- include jQuery --> <!--<script src="js/jquery-1.11.3.js"></script>--> <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included --> <script src="js/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script> <!-- The Load Image plugin is included for the preview images and image resizing functionality --> <script src="js/jquery-file-upload/js/load-image.all.min.js"></script> <!-- The Canvas to blob plugin is included for image resizing functionality --> <script src="js/jquery-file-upload/js/canvas-to-blob.min.js"></script> <!-- The Iframe Transport is required for browsers without support for XHR file uploads --> <script src="js/jquery-file-upload/js/jquery.iframe-transport.js"></script> <!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 --> <!--[if (gte IE 8)&(lt IE 10)]> <script src="js/core/jquery.xdr-transport.js"></script> <![endif]--> <script src="js/jquery-file-upload/js/jquery.fileupload.js"></script> <!-- The File Upload processing plugin --> <script src="js/jquery-file-upload/js/jquery.fileupload-process.js"></script> <!-- The File Upload image preview & resize plugin --> <script src="js/jquery-file-upload/js/load-image.all.min.js"></script> <script src="js/jquery-file-upload/js/jquery.fileupload-image.js"></script> <script src="js/jquery-file-upload/js/jquery.fileupload-video.js"></script> <!-- optional for video uploads --> <script src="js/jquery-file-upload/js/jquery.fileupload-audio.js"></script> <!-- optional for audio uploads --> <script src="js/jquery-file-upload/js/jquery.fileupload-validate.js"></script> <script src="js/jquery-file-upload/js/bootstrap.min.js"></script>   <!--<div id="dlg" class="easyui-dialog" style="width:900px;height:400px;padding:10px 20px"                 closed="false" buttons="#dlg-buttons">-->     <div class="ftitle">Details BOM-meldingen</div>     <div class="container" style="background-color: wheat; padding: 30px;">             <form id="frm" method="post" novalidate>                 <div class="fitem">                         <label class="lbl">Datum:</label>                         <input type="text" name="datum" class="easyui-datebox" required="true">                 </div>                 <div class="fitem">                         <label>Melding:</label>                         <input type="textarea" name="melding" class="easyui-validatebox" required="true">                 </div>                 <div class="fitem">                         <label>Naam:</label>                         <input name="naam">                 </div>                 <div class="fitem">                         <label>Plaats:</label>                         <input name="plaats">                 </div>                 <div class="fitem">                         <label>Oplossing:</label>                         <input name="voorgestelde_oplossing">                 </div>                 <div class="fitem">                         <label>Eigen actie:</label>                         <input name="eigen_actie">                 </div>                 <div class="fitem">                         <label>Gemeld aan:</label>                         <input name="gemeld_aan">                 </div>         </form> <!--</div> end div dialog-box-->  <!-- The fileinput-button span is used to style the file input field as button -->         <span class="btn btn-success fileinput-button">             <i class="glyphicon glyphicon-plus"></i>             <span>Add files...</span> <!-- The file input field used as target for the file upload widget -->             <input id="fileupload" type="file" name="files[]" multiple>         </span>         <br>         <br> <!-- The global progress bar -->         <div id="progress" class="progress">             <div class="progress-bar progress-bar-success"></div>         </div> <!-- The container for the uploaded files -->         <div id="files" class="files"></div>         <br>      <div id="dlg-buttons">             <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="save()">Save</a>             <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>     </div> </div>  <script> /*jslint unparam: true */ /*global window, $ */     $(function () {     'use strict';     // Change this to the location of your server-side upload handler:     var url = 'server/php/',         uploadButton = $('<button/>')             .addClass('btn btn-primary')             .prop('disabled', true)             .text('Processing...')             .on('click', function () {                 var $this = $(this),                     data = $this.data();                 $this                     .off('click')                     .text('Abort')                     .on('click', function () {                         $this.remove();                         data.abort();                     });                 data.submit().always(function () {                     $this.remove();                 });             });     $('#fileupload').fileupload({         url: url,         dataType: 'json',         autoUpload: false,         acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,         maxFileSize: 999000,         // Enable image resizing, except for Android and Opera,         // which actually support image resizing, but fail to         // send Blob objects via XHR requests:         disableImageResize: /Android(?!.*Chrome)|Opera/             .test(window.navigator.userAgent),         previewMaxWidth: 100,         previewMaxHeight: 100,         previewCrop: true     }).on('fileuploadadd', function (e, data) {         data.context = $('<div/>').appendTo('#files');         $.each(data.files, function (index, file) {             var node = $('<p/>')                     .append($('<span/>').text(file.name));             if (!index) {                 node                     .append('<br>')                     .append(uploadButton.clone(true).data(data));             }             node.appendTo(data.context);         });     }).on('fileuploadprocessalways', function (e, data) {         var index = data.index,             file = data.files[index],             node = $(data.context.children()[index]);         if (file.preview) {             node                 .prepend('<br>')                 .prepend(file.preview);         }         if (file.error) {             node                 .append('<br>')                 .append($('<span class="text-danger"/>').text(file.error));         }         if (index + 1 === data.files.length) {             data.context.find('button')                 .text('Upload')                 .prop('disabled', !!data.files.error);         }     }).on('fileuploadprogressall', function (e, data) {         var progress = parseInt(data.loaded / data.total * 100, 10);         $('#progress .progress-bar').css(             'width',             progress + '%'         );     }).on('fileuploaddone', function (e, data) {         $.each(data.result.files, function (index, file) {             if (file.url) {                 var link = $('<a>')                     .attr('target', '_blank')                     .prop('href', file.url);                 $(data.context.children()[index])                     .wrap(link);             } else if (file.error) {                 var error = $('<span class="text-danger"/>').text(file.error);                 $(data.context.children()[index])                     .append('<br>')                     .append(error);             }         });     }).on('fileuploadfail', function (e, data) {         $.each(data.files, function (index) {             var error = $('<span class="text-danger"/>').text('File upload failed.');             alert(data.files[index].error);             $(data.context.children()[index])                 .append('<br>')                 .append(error);         });     }).prop('disabled', !$.support.fileInput)         .parent().addClass($.support.fileInput ? undefined : 'disabled'); }); </script></div>         <div id="footer-container"></div>     </body> </html> 

I cannot find anyreason why the file is not loaded to the server. I added alert(data.files[index].error); to catch the error: 'undefined'. I guess for some reason the script doesn't read server/php/index.php because I added a vardump in this file, but no response.

It may be very obvious where I go wrong, but any help is appreciated.

SOLVED:

It was obvious indeed. I changed the url-var in

$(function () {     'use strict';     // Change this to the location of your server-side upload handler:     var url = 'server/php/',...  

with the full path:

$(function () {    'use strict';    // Change this to the location of your server-side upload handler:    var url = 'js/jquery-file-upload/server/php/index.php', ... 

and all goes well. :)

Related Articles

Copyright (C) 2017 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 1.153 s.