HTML - 選擇文件名

可能重複後顯示圖片：
Preview an image before it is uploaded HTML - 選擇文件名

我有一個表格，讓我與

<input type="file" name="filename" accept="image/gif, image/jpeg, image/png">

瀏覽並選擇一個文件。

我想要做的是在圖像被選中後立即顯示該圖像。這是在表單上的「提交」按鈕被按下之前，因此圖像幾乎肯定存在於客戶端。這可以做到嗎？

來源

2012-09-11 Edward Hasted

多文件選擇預覽，而不上傳和延遲uplo ad http://anasthecoder.blogspot.in/2014/12/multi-file-select-preview-without.html – Ima

多文件預覽的詳細文章http://codepedia.info/2015/06/html5-filereader -preview-image-show-thumbnail-image-before-upload-on-server-in-jquery/with live demo –

197

在這裏你去：

HTML

<!DOCTYPE html> 
<html> 
<head> 
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 
</style> 
</head> 
<body> 
    <input type='file' onchange="readURL(this);" /> 
    <img id="blah" src="#" alt="your image" /> 
</body> 
</html>

腳本：

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

      reader.onload = function (e) { 
       $('#blah') 
        .attr('src', e.target.result) 
        .width(150) 
        .height(200); 
      }; 

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

Live Demo

來源

2012-09-11 11:48:16 ygssoni

Aplogies花費這麼長時間，我修改了你的答案，它完美的工作，但不是IE瀏覽器本來就是我測試過的，非常感謝。 –

這不適用於IE瀏覽器！IE沒有FileReader類！ – Rodrigo

演示爲我工作，但在我的網站（本地主機）不 - >可能是什麼原因，函數（電子）沒有叫我後上傳圖像？ – user1932595

您可以用下面的代碼實現這一點：

$("input").change(function(e) { 

    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) { 

     var file = e.originalEvent.srcElement.files[i]; 

     var img = document.createElement("img"); 
     var reader = new FileReader(); 
     reader.onloadend = function() { 
      img.src = reader.result; 
     } 
     reader.readAsDataURL(file); 
     $("input").after(img); 
    } 
});

演示： http://jsfiddle.net/ugPDx/

來源

2012-09-11 11:45:23 Xavier

這似乎不起作用。當我運行JSFIDDLE測試站點時，我可以瀏覽並選擇文件名，但不顯示任何內容。試圖在IE和Opera中。我究竟做錯了什麼？ –

無論是在JFiddle頁面還是試圖在我自己的頁面上實現時，我都會收到錯誤「e.originalEvent.srcElement is undefined」。當我檢查e.originalEvent時，它只有屬性：bubbles，cancelable，currentTarget，defaultPrevented，eventPhase，explicitOriginalTarget， isTrusted，originalTarget，target，timeStamp，type和__proto__。上傳的文件名和一些細節可以在e.orginalEvent.originalTarget.files下找到，但是我找不到在哪裏可以找到圖像的來源。 –

這可以通過使用HTML5來實現，而只會在支持它的瀏覽器。這是一個example。

請記住，您將需要一種不支持此功能的瀏覽器的替代方法。 this plugin我已經取得了很大的成功，這需要您完成很多工作。

來源

2012-09-11 11:47:08 Kelvin

上傳文件並移動它們很容易。我的問題是在選擇有效文件的那一刻顯示它們。目前爲止，我還沒有得到任何建議。至於HTML5帶來它，但直到它變得無處不在，我必須編寫一個適用於大部分瀏覽器的解決方案:-( –

HTML - 選擇文件名

回答

相關問題