使用FileReader選擇並顯示圖像

Question

這是我的問題，我有這個小代碼來顯示img，我正在上傳LIVE而不重新加載，但它僅適用於一個img，因為readURL(input)沒有類並直接從noname-input工作，當我正在添加一個類readURL(input.joint) ，它會丟失錯誤！ 這是我的代碼：

    <input class="joint" type='file' id="imgInp" />
    <img style="width:45px" id="blah" src="#" alt="your image" />


<script type="text/javascript">
function readURL(input) {

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

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

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

$("#imgInp").change(function(){
    readURL(this);
});
</script>

我需要在這個jquery函數中添加一些id或類，使其對每個輸入都是唯一的。

我想做什么：

<input class="joint" type='file' id="imgInp" />
        <img style="width:45px" id="blah" src="#" alt="your image" />


    <script type="text/javascript">
    function readURL(input.joint) {

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

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

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

    $("#imgInp").change(function(){
        readURL(this);
    });
    </script>


<input class="file2" type='file' id="imgInp" />
        <img style="width:45px" id="blah" src="#" alt="your image" />


    <script type="text/javascript">
    function readURL(input.file2) {

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

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

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

    $("#imgInp").change(function(){
        readURL(this);
    });
    </script>

Answer 1

你有重復的id（ imgInp和blah ），所以選擇器只會選擇第一個，最終你的事件只綁定到第一個輸入字段和$('#blah')的選擇。 您需要根據輸入選擇相對圖像。 您也不必復制腳本。 選擇相對於輸入的下一個圖像標記，如$(input).next('img').attr('src', e.target.result);

所以嘗試：

function readURL(input) {

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

        reader.onload = function (e) {
            $(input).next('img').attr('src', e.target.result);
        }

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


$(function(){   
    $(".upld").change(function () { //set up a common class
        readURL(this);
    });
});

小提琴

Answer 2

好吧，您嘗試使用點符號向函數參數添加類的事實說明您需要了解有關Javascript如何工作的更多信息，而不是在簡單的StackOverflow答案中解釋，但讓我試試：

• input在readURL(input)是一個參數的名稱，類似於一個變量名，所以您可以在不以任何方式擴展。 這是無論你傳遞，當你調用一個參考readURL ，在這種情況下，如果你看看你的代碼的末尾，是參照this 。 this是指您傳入的jQuery選擇器引用的元素： "#imgInp" 。

因此，如果您想使用.joint類，只需將其作為jQuery選擇器傳遞：

$(".joint").change(function(){
    readURL(this);
});

• 但是，假設您有多個.joint元素，則readURL函數將無法正常工作，因為它目前僅用於更改#blah的src 。 你需要做的是改變對應img的每個元素的src 。

所以，如果你有這樣的HTML：

<input class="joint" type='file' />
<img class="joint-img" style="width:45px" src="#" alt="your image" />

<input class="joint" type='file' />
<img class="joint-img" style="width:45px" src="#" alt="your image" />

<input class="joint" type='file' />
<img class="joint-img" style="width:45px" src="#" alt="your image" />

您可以在所有元素之后放置readURL函數，並更改reader.onload部分，如下所示：

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

        reader.onload = function (e) {
            $(input).next('.joint-img').attr('src', e.target.result);
        }

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

$(".joint").change(function(){
    readURL(this);
});

Answer 3

我修正錯字時，你的代碼可以正常使用：

if (input.filers && input.files[0]) {
          ^^^^^^
if (input.files && input.files[0]) {

這是一個例子： http ： //jsfiddle.net/s6ttw/

更新 ：

如果你希望它按預期工作，你需要使用類而不是id。

以下是您要求的更好的示例： http ： //jsfiddle.net/s6ttw/1/