jQuery文件上傳預覽圖像

我正在使用jQuery文件上傳插件（http://blueimp.github.io/jQuery-File-Upload/）爲我的網站上傳圖片。我查看了（https://github.com/blueimp/jQuery-File-Upload/wiki/Options），但我沒有找到設置來分配元素來顯示圖像。那麼，如何使用此插件在網頁上預覽圖像？jQuery文件上傳預覽圖像

謝謝。

來源

2014-01-15 user1995781

你試過什麼..？如果是的話，添加小提琴來更好地理解。 – Neha

沒有。我正在尋找工作的例子，但找不到一個。我也找不到從文檔進行圖像預覽的設置。 – user1995781

我不認爲Jquery File Upload插件提供預覽功能。

但是你可以很容易地實現到插件的附加選項：

add: function (e, data) { 
    if (data.files && data.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
      $('#target').attr('src', e.target.result); 
     } 
     reader.readAsDataURL(data.files[0]); 
     ... 
     data.submit(); 
    } 
}

Live exemple without BlueImp plugin.

來源

2014-01-15 11:08:31 Fractaliste

無法在IE瀏覽器中工作8 – Salim

它有一個破碎的圖片，然後再上傳一個 – Marcel

正常，因爲你使用了一個img標籤..如果你想擺脫破碎的圖片，只需在

「文件閱讀器API是不是在IE 9的支持，因此預覽圖像，請執行下列操作步驟：

1>使用圖像發送到服務器AJAX> 2>獲得來自服務器的圖像源上傳作爲響應 3>通過使用圖像源之後，將其追加到預覽圖像標籤「

來源

2014-05-09 06:06:55 user3080080

該插件確實支持圖像預覽，儘管我試圖弄清楚如何調整它到更高的分辨率。你可以通過做這樣的事情來訪問預覽：

$('.fileupload-field') 
    .fileupload({ 
    disableImageResize: false, 
    previewMaxWidth: 320, 
    previewMaxHeight: 320 
    }) 
    .bind('fileuploadprocessalways', function(e, data) 
    { 
     var canvas = data.files[0].preview; 
     var dataURL = canvas.toDataURL(); 
     $("#some-image").css("background-image", 'url(' + dataURL +')'); 

    })

來源

2014-07-07 05:22:08 Dex

這對我很有用，但是要注意依賴關係，因爲如果你沒有它們（按照正確的順序），那麼'data.files [0] .preview'根本不會存在：http://stackoverflow.com/questions/12900836/jquery-file-upload-does-not-display-preview – RTF

jQuery文件上傳預覽圖像

回答

相關問題