上載之前的javascript jquery預覽圖像

Question

參考：

如何在使用JavaScript或jquery上傳之前預覽圖像？ javascript-上傳之前圖像預覽如何通過JavaScript上傳之前如何上傳預覽圖像

不適用於我...從上面的引用來看，有些僅在ff中起作用，有些首先上傳，然后僅顯示預覽。

我在以下位置找到了確切的解決方案： http : //blueimp.github.com/jQuery-File-Upload/

它在所有我測試過的作品中都有效。

我發現它有效，但是我的代碼不起作用。 那么，blueimp的關鍵點是什么，我錯過了在上傳之前啟用圖像預覽的功能。

我嘗試了：

  $('.hidFileBtn').live('change', function(e){ $childImg = $(this).closest('.parent').find('img.previewImg'); var FileName = $(this).val(); console.log(FileName + "-" + $(this)[0].value); $childImg[0].src = $(this).val(); });

但是沒有運氣。

Answer 1

在您的JavaScript中編寫此代碼，並從此“ 上傳之前顯示圖像”教程創建一個文件按鈕附加onchange事件，例如此onchange =“ preview_image（event）”代碼

function preview_image(event) 
{
  var reader = new FileReader();
  reader.onload = function()
  {
    var output = document.getElementById('output_image');
    output.src = reader.result;
  }
  reader.readAsDataURL(event.target.files[0]);
}

Answer 2

您可以嘗試HTML5的FileReader。如果要支持IE，請使用以下方法：

div.css({'filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="' + input.val() + '")'});

Answer 3

此鏈接有一個很好的答案：在上傳圖像之前預覽圖像

<input type = "file" name = "fileFind" onchange = "readURL(this)" id = "fileFind" />
<img id = "imagePreview" src = "" alt = "" />

function readURL(input) {
if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
        $('#imagePreview').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
}
}

Answer 4

 <html> <head> <script type='text/javascript'> function preview_image(event) { var reader = new FileReader(); reader.onload = function() { var output = document.getElementById('output_image'); output.src = reader.result; } reader.readAsDataURL(event.target.files[0]); } </script> <style> body { width:100%; margin:0 auto; padding:0px; font-family:helvetica; background-color:#0B3861; } #wrapper { text-align:center; margin:0 auto; padding:0px; width:995px; } #output_image { max-width:300px; } </style> </head> <body> <div id="wrapper"> <input type="file" accept="image/*" onchange="preview_image(event)"> <img id="output_image"/> </div> </body> </html>

上載之前的javascript jquery預覽圖像

問題描述

4 個解決方案

解決方案1
0 2016-06-09 07:08:39

解決方案2
0 2016-06-09 07:23:07

解決方案3
0 2018-02-15 06:21:55

解決方案4
0 2019-10-04 12:37:28

上載之前的javascript jquery預覽圖像

問題描述

4 個解決方案

解決方案1 0 2016-06-09 07:08:39

解決方案2 0 2016-06-09 07:23:07

解決方案3 0 2018-02-15 06:21:55

解決方案4 0 2019-10-04 12:37:28

解決方案1
0 2016-06-09 07:08:39

解決方案2
0 2016-06-09 07:23:07

解決方案3
0 2018-02-15 06:21:55

解決方案4
0 2019-10-04 12:37:28