blueimp 파일 업로드 : ajax 호출

Question

아마도 이것이 잘못된 방법 일 수 있습니다. 그러나 많은 정보가 내 웹 페이지에 제공되고 있으므로 Ajax를 사용하는 사용자가 필요한만큼 비트를 가져 왔습니다. 내가 검색하고자하는 요소 중 하나는 blueimp 파일 업 로더입니다. 모두 파일을 추가하려고하면 콘솔에서받는 메시지를 제외하고 모두 좋은 것처럼 보입니다.

catch되지 않는 형식 오류가 : ... 다음 아무 것도 정의되지 않은

처리하여 이미지 표시의 특성 'parseMetaData'을 읽을 수 없지만, 할 수 없습니다.

누군가이 오류를 얻는 이유와 해결 방법을 알려 주면 매우 감사하게 생각합니다.

는 아약스

<!-- Bootstrap styles --> 
 
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
<!-- Generic page styles --> 
 
<link rel="stylesheet" href="fileUpload/css/style.css"> 
 
<!-- blueimp Gallery styles 
 
<link rel="stylesheet" href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css">--> 
 
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars --> 
 
<link rel="stylesheet" href="fileUpload/css/jquery.fileupload.css"> 
 
<link rel="stylesheet" href="fileUpload/css/jquery.fileupload-ui.css"> 
 
<!-- CSS adjustments for browsers with JavaScript disabled --> 
 
<noscript><link rel="stylesheet" href="fileUpload/css/jquery.fileupload-noscript.css"></noscript> 
 
<noscript><link rel="stylesheet" href="fileUpload/css/jquery.fileupload-ui-noscript.css"></noscript>

아약스 출력

 
<!-- The file upload form used as target for the file upload widget --> 
 
<form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data"> 
 
    <!-- Redirect browsers with JavaScript disabled to the origin page --> 
 
    <noscript><input type="hidden" name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/"></noscript> 
 
    <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload --> 
 
    <div class="row fileupload-buttonbar"> 
 
     <div class="col-lg-7"> 
 
      <!-- 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> 
 
       <input type="file" name="files[]" multiple> 
 
      </span> 
 
      <button type="submit" class="btn btn-primary start"> 
 
       <i class="glyphicon glyphicon-upload"></i> 
 
       <span>Start upload</span> 
 
      </button> 
 
      <button type="reset" class="btn btn-warning cancel"> 
 
       <i class="glyphicon glyphicon-ban-circle"></i> 
 
       <span>Cancel upload</span> 
 
      </button> 
 
      <button type="button" class="btn btn-danger delete"> 
 
       <i class="glyphicon glyphicon-trash"></i> 
 
       <span>Delete</span> 
 
      </button> 
 
      <input type="checkbox" class="toggle"> 
 
      <!-- The global file processing state --> 
 
      <span class="fileupload-process"></span> 
 
     </div> 
 
     <!-- The global progress state --> 
 
     <div class="col-lg-5 fileupload-progress fade"> 
 
      <!-- The global progress bar --> 
 
      <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"> 
 
       <div class="progress-bar progress-bar-success" style="width:0%;"></div> 
 
      </div> 
 
      <!-- The extended global progress state --> 
 
      <div class="progress-extended"> </div> 
 
     </div> 
 
    </div> 
 
    <!-- The table listing the files available for upload/download --> 
 
    <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table> 
 
</form> 
 

 
    
 

 
<!-- The template to display files available for upload --> 
 
<script id="template-upload" type="text/x-tmpl"> 
 
{% for (var i=0, file; file=o.files[i]; i++) { %} 
 
    <tr class="template-upload fade"> 
 
     <td> 
 
      <span class="preview"></span> 
 
     </td> 
 
     <td> 
 
      <p class="name">{%=file.name%}</p> 
 
      <strong class="error text-danger"></strong> 
 
     </td> 
 
     <td> 
 
      <p class="size">Processing...</p> 
 
      <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div> 
 
     </td> 
 
     <td> 
 
      {% if (!i && !o.options.autoUpload) { %} 
 
       <button class="btn btn-primary start" disabled> 
 
        <i class="glyphicon glyphicon-upload"></i> 
 
        <span>Start</span> 
 
       </button> 
 
      {% } %} 
 
      {% if (!i) { %} 
 
       <button class="btn btn-warning cancel"> 
 
        <i class="glyphicon glyphicon-ban-circle"></i> 
 
        <span>Cancel</span> 
 
       </button> 
 
      {% } %} 
 
     </td> 
 
    </tr> 
 
{% } %} 
 
</script> 
 
<!-- The template to display files available for download --> 
 
<script id="template-download" type="text/x-tmpl"> 
 
{% for (var i=0, file; file=o.files[i]; i++) { %} 
 
    <tr class="template-download fade"> 
 
     <td> 
 
      <span class="preview"> 
 
       {% if (file.thumbnailUrl) { %} 
 
        <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a> 
 
       {% } %} 
 
      </span> 
 
     </td> 
 
     <td> 
 
      <p class="name"> 
 
       {% if (file.url) { %} 
 
        <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a> 
 
       {% } else { %} 
 
        <span>{%=file.name%}</span> 
 
       {% } %} 
 
      </p> 
 
      {% if (file.error) { %} 
 
       <div><span class="label label-danger">Error</span> {%=file.error%}</div> 
 
      {% } %} 
 
     </td> 
 
     <td> 
 
      <span class="size">{%=o.formatFileSize(file.size)%}</span> 
 
     </td> 
 
     <td> 
 
      {% if (file.deleteUrl) { %} 
 
       <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}> 
 
        <i class="glyphicon glyphicon-trash"></i> 
 
        <span>Delete</span> 
 
       </button> 
 
       <input type="checkbox" name="delete" value="1" class="toggle"> 
 
      {% } else { %} 
 
       <button class="btn btn-warning cancel"> 
 
        <i class="glyphicon glyphicon-ban-circle"></i> 
 
        <span>Cancel</span> 
 
       </button> 
 
      {% } %} 
 
     </td> 
 
    </tr> 
 
{% } %} 
 
</script> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included --> 
 
<script src="fileUpload/js/vendor/jquery.ui.widget.js"></script> 
 
<!-- The Templates plugin is included to render the upload/download listings --> 
 
<script src="//blueimp.github.io/JavaScript-Templates/js/tmpl.min.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> 
 
<!-- blueimp Gallery script --> 
 
<script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script> 
 
<!-- The Iframe Transport is required for browsers without support for XHR file uploads --> 
 
<script src="fileUpload/js/jquery.iframe-transport.js"></script> 
 
<!-- The basic File Upload plugin --> 
 
<script src="fileUpload/js/jquery.fileupload.js"></script> 
 
<!-- The File Upload processing plugin --> 
 
<script src="fileUpload/js/jquery.fileupload-process.js"></script> 
 
<!-- The File Upload image preview & resize plugin --> 
 
<script src="fileUpload/js/jquery.fileupload-image.js"></script> 
 
<!-- The File Upload audio preview plugin --> 
 
<script src="fileUpload/js/jquery.fileupload-audio.js"></script> 
 
<!-- The File Upload video preview plugin --> 
 
<script src="fileUpload/js/jquery.fileupload-video.js"></script> 
 
<!-- The File Upload validation plugin --> 
 
<script src="fileUpload/js/jquery.fileupload-validate.js"></script> 
 
<!-- The File Upload user interface plugin --> 
 
<script src="fileUpload/js/jquery.fileupload-ui.js"></script> 
 
<!-- The main application script --> 
 
<script src="fileUpload/js/main.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/cors/jquery.xdr-transport.js"></script> 
 
<![endif]-->

는 희망 그 Y 무엇을의 헤더에서 화면

에 기록 무엇 너 필요해.

loadImageMetaData: function (data, options) { 
 
       if (options.disabled) { 
 
        return data; 
 
       } 
 
       var that = this, 
 
        dfd = $.Deferred(); 
 
       loadImage.parseMetaData(data.files[data.index], function (result) { 
 
        $.extend(data, result); 
 
        dfd.resolveWith(that, [data]); 
 
       }, options); 
 
       return dfd.promise(); 
 
      },

Answer 1

시도 별도로

<script src="https://blueimp.github.io/JavaScript-Load-Image/js/load-image.js"></script> 
<script src="https://blueimp.github.io/JavaScript-Load-Image/js/load-image-ios.js"></script> 
<script src="https://blueimp.github.io/JavaScript-Load-Image/js/load-image-orientation.js"></script> 
<script src="https://blueimp.github.io/JavaScript-Load-Image/js/load-image-meta.js"></script> 
<script src="https://blueimp.github.io/JavaScript-Load-Image/js/load-image-exif.js"></script> 
<script src="https://blueimp.github.io/JavaScript-Load-Image/js/load-image-exif-map.js"></script> 

-- my fault was that I should have added `https://` in front of [BlueImp][1] . Apologies for the same 

Answer 2

을 각 파일을 추가 당신이하지 않은 확인 :

는 더 정밀한 점검에 나는이 내 몇 가지 문제를 일으키는 부분이 될 것 같아요 load-image-all을 모달 등으로로드하는 것은 내 문제였습니다. 아무리 기다리는 시간, 시간의 90 %는 내가 얻을 것이다 :

Uncaught TypeError: Cannot read property 'parseMetaData' of undefined

가 기적적으로 근무 시간의 나머지 10 % ...

를 그래서 다시 - 기본 템플릿에 스크립트를 넣어 내 고침 이었어.

Answer 3

jquery.fileuploader 화상는 (라인 (41)의 주위)에 loadImage 수신 다음 부하 image.all.min.js 전에 해당 스크립트에 포함되지 않은 경우

}(function ($, loadImage) { 

이 오류 것 (라인 275 주변) :

loadImage.parseMetaData