jQuery文件上傳預覽選定的文件

我有一個表格，我需要多個文件上傳，我從jQuery文件上傳基本插件開始。但即時通訊試圖實現演示顯示的預覽內容，並且我一直在閱讀像https://github.com/blueimp/jQuery-File-Upload/wiki/Template-Engine這樣的文檔，並且遵循代碼，但是我的預覽根本不起作用，我不知道我錯過了什麼。我的代碼如下所示：jQuery文件上傳預覽選定的文件

<a href="#" id="upload">upload files</a> 
<input style="visibility: hidden;" id="fileupload" type="file" name="files[]" data-url="{{ asset('/bundles/testetestebundleblueimp/js/jQuery-file-upload/server/php/index.php') }}" multiple> 
<input type="button" value="upload" id="upload-files"/> 

<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>

現在的腳本：

$('#upload').live('click', function(){ 
     $('#fileupload').click(); 
     return false;  
    }); 

$(function() { 
    $('#fileupload').fileupload({ 
     dataType: 'json', 
     autoUpload : false, 
     uploadTemplateId: null, 
     downloadTemplateId: null, 
     uploadTemplate: function (o) { 
     var rows = $(); 
     $.each(o.files, function (index, file) { 
      var row = $('<tr class="template-upload fade">' + 
       '<td class="preview"><span class="fade"></span></td>' + 
       '<td class="name"></td>' + 
       '<td class="size"></td>' + 
       (file.error ? '<td class="error" colspan="2"></td>' : 
         '<td><div class="progress">' + 
          '<div class="bar" style="width:0%;"></div></div></td>' + 
          '<td class="start"><button>Start</button></td>' 
       ) + '<td class="cancel"><button>Cancel</button></td></tr>'); 
      row.find('.name').text(file.name); 
      row.find('.size').text(o.formatFileSize(file.size)); 
      if (file.error) { 
       row.find('.error').text(
        locale.fileupload.errors[file.error] || file.error 
       ); 
      } 
      rows = rows.add(row); 
     }); 
     return rows; 
    }, 
     done: function (e, data) { 
      alert('done'); 
     }, 
     add : function(e, data) { 
      $.each(data.files, function (index, file) { 
        console.log('Added file: ' + file.name); 
      });    
      $("#upload-files").on("click", function() { 
        $('#progress .bar').show();      
        data.submit(); 
        $("#upload-files").off("click"); 
      }); 
     }    
    }); 
});

我在這裏的目標是讓用戶選擇文件並在一個容器中進行預覽。當用戶點擊「upload-files」時，我想發送容器中的所有文件，就像演示一樣。

來源

2012-12-17 João Alves

有你在試圖本身的插件？嘗試一塊一塊地替換..？ – EricG

@EricG是的，我嘗試了一步一步的基本設置，但直到現在我沒有設法使它工作 –

但是原來的例子是否適合你？沒有修改它以滿足您的需求？如果你提供了一個完整的工作例子，人們可能會更加渴望自己測試;） – EricG

您缺乏所有類型的數據/資源。

看看這裏。

templates

scripts

意味着你需要很多比的jsfiddle多。

現在，因爲我沒有可能將文件上傳到某個位置，所以我無法進一步測試。我使用jsfiddle收到了一個錯誤，但我相信你可能有自己的服務器位置上傳到。

更新
出於某種原因，你的data.files[index].thumbnail_url未在add功能設置。
對我來說，得到的是濫用file.name財產的唯一方法：

add : function(e, data) { 

    console.dir(arguments); 

    $.each(data.files, function (index, file) { 
     console.log(file, file.thumbnail_url); 
     console.log('Added file: ' + file.name); 
     document.body.innerHTML += '<img src="server/php/files/' + file.name + '">'; 
    }); 

    $("#upload-files").on("click", function() { 
     $('#progress .bar').show();      
     data.submit(); 
     $("#upload-files").off("click"); 
    }); 
}

來源

2012-12-19 12:41:52 EricG

jQuery文件上傳預覽選定的文件

回答

相關問題