如何在 asp.net 中使用 javascript 顯示和上傳圖像？

Question

我不知道如何顯示圖像並使用 Javascript 上傳，請勿使用（輸入類型文件為 html ，控制文件上傳 asp.net ）。 我想使用如下

#img{width:100px;height:100px;}
<div id="img"></div>
<button type="button" id="bt_image">Image</button>
<button type="button" id="bt_save">Save</button>

當我單擊按鈕 Image 時，顯示對話框選擇文件，選擇文件圖像，圖像將顯示在 div img 上，單擊按鈕 Save ，此上傳到服務器。 謝謝你。

Answer 1

試試這個例子- 有一個上傳按鈕和一個預覽區域，您需要添加的只是上傳按鈕。

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>

和js：

function readURL(input) {
    if (input.files && 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);
});

Answer 2

Javascript 版本

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();    
        reader.onload = function (e) {document.querySelector('#blah').attr('src', e.target.result);}  
        reader.readAsDataURL(input.files[0]);
    }
}   
document.querySelector("#imgInp").change(function(){readURL(this);});