2

我想要得到blueimp/jQuery的文件上傳與zend框架2.0工作。blueimp/jQuery的文件上傳模板上傳不工作在zend框架2

當我把表單和在我的視圖腳本(index.phtml)的layout.phtml中,一切正常! 當我使用zend框架(Zend \ Form \ Form)創建我的表單時,表單顯示喜歡它,但模板上載不再顯示。

任何人都可以幫助我嗎?我試圖複製粘貼腳本的看法,在佈局,..沒有工作..

這是我的看法腳本index.phtml

<div class="container center_piece place_need"> 
<!-- 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="http://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> 
      <!-- 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">&nbsp;</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> 
</div> 
<!-- Content --> 
... 
<!-- 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"></strong> 
    </td> 
    <td> 
     <p class="size">Processing...</p> 
     <div class="progress"></div> 
    </td> 
    <td> 
     {% if (!i && !o.options.autoUpload) { %} 
      <button class="start" disabled>Start</button> 
     {% } %} 
     {% if (!i) { %} 
      <button class="cancel">Cancel</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"> 
      <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a> 
     </p> 
     {% if (file.error) { %} 
      <div><span class="error">Error</span> {%=file.error%}</div> 
     {% } %} 
    </td> 
    <td> 
     <span class="size">{%=o.formatFileSize(file.size)%}</span> 
    </td> 
    <td> 
     <button class="delete" data-type="{%=file.deleteType%}" data-url="  {%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>Delete</button> 
     <input type="checkbox" name="delete" value="1" class="toggle"> 
    </td> 
</tr> 
{% } %} 
</script> 

回答

0

我不能添加評論內容然而。

你是否包含所有的js文件?您仍然需要使用演示中的代碼,並確保所有代碼都匹配。 Zend可能會改變一些標籤名稱,但它看起來像上面的代碼與演示相匹配。

<!-- The Templates plugin is included to render the upload/download listings --> 
<script src="http://blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script>